title: Cannot read properties of null (reading 'user')
body: <p>I have been trying to solve this issue wherein, I can grab the accessToken after login only? I have been stuck on this</p>
  <p>The main problem is, the Token is already looking for it on localstorage, but I'm not even logged in yet. How can I make the user to login first before looking to the local storage</p>
  <p>requestMethod.js</p>
  <pre><code>import axios from 'axios'
  
  const BASE_URL = 'http://localhost:5000/api'
  
  const TOKEN = JSON.parse(JSON.parse(localStorage.getItem('persist:root')).user)
    .currentUser.accessToken
  
  export const publicRequest = axios.create({
    baseURL: BASE_URL,
  })
  
  export const userRequest = axios.create({
    baseURL: BASE_URL,
    headers: { token: `Bearer ${TOKEN}` },
  })
  </code></pre>
  <p>Login.jsx</p>
  <pre><code>import { useEffect } from &quot;react&quot;
  import { useState } from &quot;react&quot;
  import { useDispatch } from &quot;react-redux&quot;
  import { useHistory } from &quot;react-router&quot;
  import { login } from &quot;../../redux/apiCalls&quot;
  import { userRequest } from &quot;../../requestMethod&quot;
  
  const Login = () =&gt; {
      let history = useHistory()
      const [username, setUsername] = useState(&quot;&quot;)
      const [password, setPassword] = useState(&quot;&quot;)
      const dispatch = useDispatch()
      const handleClick = (e) =&gt;{
          e.preventDefault()
          login(dispatch,{username,password})      
          history.push('/home')
          
      }
  
      useEffect(() =&gt;{
          try {
              
          } catch (error) {
              
          }
      },[])
  
      return (
          &lt;div style={{display: 'flex', alignItems:&quot;center&quot;, justifyContent:&quot;center&quot;, height: '100vh', flexDirection: &quot;column&quot;}}&gt;
              &lt;form action=&quot;&quot;&gt;
              &lt;input style={{padding: 10, marginBottom:20}} value={username}  type=&quot;text&quot; placeholder=&quot;username&quot; onChange={e =&gt; setUsername(e.target.value)} /&gt;
              &lt;input style={{padding: 10, marginBottom:20}} value={password} type=&quot;password&quot; placeholder=&quot;password&quot; onChange={e =&gt; setPassword(e.target.value)} /&gt;
              &lt;button style={{padding: 10, width: 100}} onClick={handleClick}&gt;Login&lt;/button&gt;
              &lt;/form&gt;
  
          &lt;/div&gt;
      )
  }
  
  export default Login
  </code></pre>
  <p>apicalls.js</p>
  <pre><code>import { loginFailure, loginStart, loginSuccess } from './userRedux'
  
  export const login = async (dispatch, user) =&gt; {
    dispatch(loginStart())
    try {
      const res = await publicRequest.post('/auth/login', user)
      const TOKEN = JSON.parse(
        JSON.parse(localStorage.getItem('persist:root')).user
      ).currentUser.accessToken
      dispatch(loginSuccess(res.data))
    } catch (error) {
      dispatch(loginFailure())
    }
  </code></pre>
  <p>}</p>