I don’t know how to refresh the token, there is a request for a refresh, but I don’t know how to use it

Question

This is a commercial project, so I can't show everything. The login is made and when I log in, I get a token and user data, but as soon as I refresh the page or go back to the profile, the data disappears, this is due to the refresh of the token, which works fine on the main page in the console, but it does not work in the profile , the data must be overwritten via redux. I will show parts of the code associated with the token.

action accessToken

import actionTypes from "./actionTypes";

export const setToken = (token) => {
  return (dispatch) => {
    dispatch({ type: actionTypes.setToken, payload: token });
  };
};

export const resetToken = () => {
  return (dispatch) => {
    dispatch({ type: actionTypes.resetToken});
  };
};

export default { setToken, resetToken };

reducersAccessToken

import actionTypes from "../actions/actionTypes";

const initialState = null;

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.setToken:
      return action.payload;
    case actionTypes.resetToken:
      return action.payload;
    default:
      return state;
  }
};

export default reducer;

mainPage when going on get refreshToken

const dispatch = useDispatch();
  const { setToken } = bindActionCreators(accessTokenActions, dispatch);
  const { setCurrentUser } = bindActionCreators(currentUserActions, dispatch);
  const axiosPrivate = useAxiosPrivate();

  useEffect(() => {
    const checkAuth = async () => {
      const response = await axiosPrivate.post(`${baseUrl}/api/auth/refresh`);
      if (response.data.status === 200) {
        setToken(response.data.body.token);
        setCurrentUser(response.data.body.user);
      }
      console.log(response)
    };
    checkAuth();
  }, []);

Answer 1

I leave you some code example for persisting data:

in /store/reducers.js

 import autoMergeLevel2 from 'redux persist/lib/stateReconciler/autoMergeLevel2'
 import { persistReducer } from 'redux-persist'
 //here import your main root reducer for example->
 import app from '../containers/App/reducer'

        const appPersistConfig = {
          key: 'app',
          storage,
          whitelist: ['accessToken'],
          stateReconciler: autoMergeLevel2
        }
        
        export default combineReducers({
          app: persistReducer(appPersistConfig, app)
        })

in /store/index.js

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import createSagaMiddleware from 'redux-saga';

import { persistStore, persistReducer } from 'redux-persist'
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2'

import reducers from './reducers';

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['none'],
  stateReconciler: autoMergeLevel2
}

const sagaMiddleware = createSagaMiddleware();

const middleware = [
  ...getDefaultMiddleware({
    thunk: false,
    serializableCheck: false,
    immutableCheck: false
  }),
  sagaMiddleware,
];

const persistedReducer = persistReducer(persistConfig, reducers)

const store = configureStore({
  reducer: persistedReducer,
  middleware
});


export const persistor = persistStore(store)
export default store

This is just a default example of persist store, customize it with everything you need. Check https://github.com/rt2zz/redux-persist here and be careful using persist

Remember that you need to install those libraries imported at the top of the file to make it works