title: React redux slice - Accessing to state changes after logged in
body: <p>I'm trying to use a combination of a slice react redux to store my token credentials with a dispatch action to update the state in a call to my API.</p>
  <p>Finally in the login component i was trying to verify if somehow that token state changed to verify if user can access.</p>
  <p>But this condition in my component <code>loginHandler</code> function:</p>
  <pre><code>if(auth){ history.push('/wallet') }
  </code></pre>
  <p><strong>Seems to be always empty.</strong></p>
  <p>This is my redux slice:</p>
  <pre><code>import {createSlice} from &quot;@reduxjs/toolkit&quot;;
  
  const authSlice = createSlice({
      name: 'auth',
      initialState: {
          token: {
              access: '',
              refresh: ''
          }
      },
      reducers: {
          login(state, action){
              state.token = action.payload
          },
          logout(state){
              state.token.access = ''
              state.token.refresh = ''
          }
      }
  })
  
  export const authActions = authSlice.actions
  
  export default authSlice
  </code></pre>
  <p>This is my action:</p>
  <pre><code>import http from &quot;../http-common&quot;;
  import {authActions} from &quot;./auth-slice&quot;;
  
  export const login = (data) =&gt; {
  
      return async (dispatch) =&gt; {
  
          const loginRequest = async () =&gt; {
              const response = await http.post('/api/token/login', data);
              return response.data;
          };
  
          try {
              const sessionsData = await loginRequest();
              console.log(sessionsData)
              localStorage.setItem(&quot;token&quot;, JSON.stringify(sessionsData))
              console.log(sessionsData)
              dispatch(
                  authActions.login(sessionsData)
              )
          } catch (error) {
              console.log(error)
          }
      };
  }
  </code></pre>
  <p>And inside my component i'm using the dispatch to my action and the useSelector to track changes to my store state:</p>
  <pre><code>import React, {useState, useContext} from 'react';
  import {useHistory} from &quot;react-router-dom&quot;;
  import LoginForm from '../../components/forms/LoginFormPage'
  import {useSelector, useDispatch} from &quot;react-redux&quot;;
  import {login} from &quot;../../store/auth-actions&quot;;
  
  
  const Login = () =&gt; {
  
      let history = useHistory();
      const dispatch = useDispatch();
      const [isLoading, setIsLoading] = useState(false)
      const auth = useSelector((state) =&gt; state.auth.token.access);
  
  
      const handleLogin = (data) =&gt; {
          console.log(auth)
          setIsLoading(true)
          dispatch(login({email: data.email, password: data.password})).then()
          console.log(auth)
  
          if(auth){
              history.push('/wallet')
          }
          setIsLoading(false)
      }
  
      return (
          &lt;LoginForm
              onLoginSubmit={handleLogin}
              isLoading={isLoading}/&gt;
      )
  }
  
  export default Login;
  </code></pre>