title: Using redux why won't my app state isAuthenticated stay set to true after any kind of reload?
body: <p>Using redux for a reactjs app and trying to keep track of users being authenticated or not. For auth state isAuthenticated is set to true but goes back to null if there is a page reload even though the tokens still remain in local storage as the user is still logged in. Check out the code:</p>
  <p>here is the store</p>
  <pre><code>const store = createStore(
      rootReducer,
      initialState,
      composeWithDevTools(applyMiddleware(...middleware)),
  );
  </code></pre>
  <p>Here is the reducer and the case where isAuthenticated is set to true:</p>
  <pre><code>const initialState = {
      isAuthenticated: null,
      user: null,
  };
  
  export default function(state = initialState, action) {
      switch (action.type) {
          case LOGIN_SUCCESS:
          case REGISTER_SUCCESS:
              const access = action.payload.access;
              const refresh = action.payload.refresh;
              localStorage.setItem('access_token', access);
              localStorage.setItem('refresh_token', refresh);
              return {
                  ...state,
                  isAuthenticated: true,
              };
          case LOGIN_FAIL:
          case LOGOUT_SUCCESS:
          case REGISTER_FAIL:
              return {
                  ...state,
                  user: null,
                  isAuthenticated: false,
              };
          default:
              return state;
      }
  }
  </code></pre>
  <p>Here is where the store is brought in:</p>
  <pre><code>function App() {
    return (
      &lt;Router&gt;
        &lt;Provider store={store}&gt;
          &lt;Header/&gt;
          &lt;Switch&gt;
              &lt;BaseRouter/&gt;
          &lt;/Switch&gt;
          &lt;Footer/&gt;
        &lt;/Provider&gt;
      &lt;/Router&gt;
    );
  }
  </code></pre>