title: Updating Redux state by calling dispatch not working
body: <p>I have a redux that handles Authentication the responses are only access &amp; refresh tokens, which the access token is sent as an authorization header, and if it has expired the refresh token is sent to get a new access token.</p>
  <p><strong>this is the login Apicall</strong></p>
  <pre><code> export const login = (dispatch, user) =&gt; {
          dispatch(loginStart());
          axiosInstance
              .post('users/login/', user)
              .then((res) =&gt; {
                  dispatch(loginSuccess(res.data));
              })
              .catch((error) =&gt; {
                  dispatch(loginFailure(error.response.data.error));
              });
      };
  </code></pre>
  <p><strong>this is the logic used to send over the refresh token to get a new access token</strong></p>
  <pre><code>const refreshToken = currentUser?.refresh;
  
              if (refreshToken) {
                  const tokenParts = JSON.parse(atob(refreshToken.split('.')[1]));
  
                  const now = Math.ceil(Date.now() / 1000);
                  console.log(tokenParts.exp);
  
                  if (tokenParts.exp &gt; now) {
                      return axiosInstance
                          .post('users/login/refresh/',  {
                              refresh: refreshToken,
                          })
                          .then((response, dispatch) =&gt; {
                              dispatch(loginSuccess(response.data));
  
                              axiosInstance.defaults.headers['Authorization'] =
                                  'JWT ' + response.data.access;
                              originalRequest.headers['Authorization'] =
                                  'JWT ' + response.data.access;
  
                              return axiosInstance(originalRequest);
                          })
                          .catch((err, dispatch) =&gt; {
                              console.log(err);
                              dispatch(loginFailure());
                          });
                  } else {
                      console.log('Refresh token is expired', tokenParts.exp, now);
                      &lt;Navigate to=&quot;/login&quot; /&gt;;
                  }
              } else {
                  console.log('Refresh token not available.');
                  &lt;Navigate to=&quot;/login&quot; /&gt;;
              }
  </code></pre>
  <p><strong>this is the userSlice</strong></p>
  <pre><code>const userSlice = createSlice({
      name: &quot;user&quot;,
      initialState: {
          currentUser: null,
          isFetching: false,
          error: false,
          errorMsg: null,
      },
      reducers: {
          loginStart: (state) =&gt; {
              state.isFetching = true;
          },
          loginSuccess: (state, action) =&gt; {
              state.isFetching = false;
              state.currentUser = action.payload;
          },
          loginFailure: (state, action) =&gt; {
              state.isFetching = false;
              state.error = true;
              state.errorMsg = action.payload
          },
      },
  });
  </code></pre>
  <p><strong>added the main part of the redux store</strong></p>
  <pre><code>const persistConfig = {
    key: &quot;user&quot;,
    version: 1,
    storage,
    blackList: [ 'errorMsg' ]
  };
  
  const rootReducer = combineReducers({ user: userSlice });
  
  const persistedReducer = persistReducer(persistConfig, rootReducer);
  </code></pre>
  <p>for some reason that i don't know this causes an infinite loop or something that makes it call the api for ever.</p>
  <p><a href="https://i.stack.imgur.com/k3oLM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k3oLM.png" alt="enter image description here" /></a></p>