How to work with dispatch, functions components and actions in conjunction?

Question

React

There is a functional component, in which, by clicking on the button, you need to make a request and render new data here.
How to do it right? Dispatch to send in action or resolve in a component?
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

well, if you need to render only in this component , then you don’t need redux at all, but it’s probably better to store the token in the store and send something like this

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