Как работать с dispatch, functions components и actions в связке?

Question

[lexstile]

Есть функциональный компонент, в нем по клику на кнопку нужно сделать запрос и здесь же отрендерить новые данные.
Как правильно это сделать? Dispatch отправлять в экшн или разруливать в компоненте?
App.jsx

spoiler

const InitialPageComponent = () => {
  const token = useSelector((state) => state.app.access_token);
  const handleClick = () => {
    // нужно чтобы токен оказался в store и был отрендерен в этом компоненте.
    console.log('getAuthToken', getAuthToken());
  };

  return (
    <div>
      <div>{token}</div>
      <Button title="Получить токен" onClick={handleClick} />
    </div>
  );
};

actions.js

spoiler

export const setAccessToken = (accessToken) => ({
  type: SET_ACCESS_TOKEN,
  payload: accessToken,
});

reducer.js

spoiler

const initialState = {
  accessToken: null,
};

export const appReducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_ACCESS_TOKEN: {
      return {
        ...state,
        accessToken: action.payload,
      };
    }

    default: {
      return state;
    }
  }
};

getAuthToken

spoiler

export const getAuthToken = () => setAccessToken('324324');

Answer 1

[hzzzzl]

ну если надо рендерить только в этом компоненте, то вообще редукс не нужен, но токен наверно лучше все же хранить в сторе и пересылать как-то так

import { useDispatch } from 'react-redux'
const dispatch = useDispatch()
..
const token = getAuthToken()   
dispatch({ type: SET_ACCESS_TOKEN, payload: token })