title: How to use local storage to access combined reducer values React-Redux
body: <p>So I have been working on a personal project lately with react/redux/django and I had to use <code>combine reduces</code> modules because I have 2 reducers. My redux &quot;blueprint&quot; looks something like this:</p>
  <pre><code>authReducer: {
    IS_AUTHENTICATED:true
    AUTH_SUCCESS:true
    USERNAME:&quot;Some User&quot;
    TOKEN:&quot;31d715af03390235d8e6bedd1c67e4853a365bd4&quot;
  }
  roomReducer: {
    ACTIVEFRIEND: null
    ROOM: null
    ROOMS: [{}, {} ...]
  }
  </code></pre>
  <p>also you should know that I have persisted the state using <code>local storage</code>. My problem is that I do not know how to access for example the <code>TOKEN</code> state using <code>local storage.get()</code> module. Keep in mind that I am using <code>combine reducers</code> from <code>react-redux</code>. Does anyone know the solution to my problem? Thank you in advance.</p>
  <p><strong>Edit</strong></p>
  <p>Here are my reducers:</p>
  <p>ROOM REDUCER</p>
  <pre><code>import backendTypes from &quot;./Types&quot;;
  
  const roomForm = {
    ACTIVEFRIEND: null,
    ROOMS: null,
    ROOM: null,
  };
  
  const roomReducer = (state = roomForm, action) =&gt; {
    switch (action.type) {
      case backendTypes.GET_ROOMS_SUCCESS:
        state[&quot;ACTIVEFRIEND&quot;] = null;
        state[&quot;ROOMS&quot;] = action.allRooms;
        state[&quot;ROOM&quot;] = null;
  
        return state;
      case backendTypes.GET_ROOM_SUCCESS:
        state[&quot;ACTIVEFRIEND&quot;] = action.activeFriend;
        state[&quot;ROOMS&quot;] = localStorage.getItem(&quot;ROOMS&quot;);
        state[&quot;ROOM&quot;] = action.activeRoom;
  
        return state;
      case backendTypes.GET_ROOMS_FAIL:
        state[&quot;ACTIVEFRIEND&quot;] = null;
        state[&quot;ROOMS&quot;] = null;
        state[&quot;ROOM&quot;] = null;
  
        return state;
      case backendTypes.GET_ROOM_FAIL:
        state[&quot;ACTIVEFRIEND&quot;] = null;
        state[&quot;ROOMS&quot;] = localStorage.getItem(&quot;ROOMS&quot;);
        state[&quot;ROOM&quot;] = null;
  
        return state;
      default:
        return state;
    }
  };
  
  export default roomReducer;
  </code></pre>
  <p>AUTH REDUCER</p>
  <pre><code>import authTypes from &quot;./Types&quot;;
  
  const authForm = {
    IS_AUTHENTICATED: false,
    AUTH_SUCCESS: false,
    USERNAME: &quot;AnonymousUser&quot;,
    TOKEN: null,
  };
  
  const authReducer = (state = authForm, action) =&gt; {
    switch (action.type) {
      case authTypes.SIGN_IN_SUCCESS:
        state[&quot;IS_AUTHENTICATED&quot;] = true;
        state[&quot;AUTH_SUCCESS&quot;] = true;
        state[&quot;USERNAME&quot;] = action.username;
        state[&quot;TOKEN&quot;] = action.token;
  
        return state;
      case authTypes.SIGN_IN_FAIL:
        state[&quot;IS_AUTHENTICATED&quot;] = false;
        state[&quot;AUTH_SUCCESS&quot;] = false;
        state[&quot;USERNAME&quot;] = &quot;AnonymousUser&quot;;
        state[&quot;TOKEN&quot;] = null;
  
        return state;
      case authTypes.SIGN_UP_SUCCESS:
        state[&quot;IS_AUTHENTICATED&quot;] = true;
        state[&quot;AUTH_SUCCESS&quot;] = true;
        state[&quot;USERNAME&quot;] = action.username;
        state[&quot;TOKEN&quot;] = action.token;
  
        return state;
      case authTypes.SIGN_UP_FAIL:
        state[&quot;IS_AUTHENTICATED&quot;] = false;
        state[&quot;AUTH_SUCCESS&quot;] = false;
        state[&quot;USERNAME&quot;] = &quot;AnonymousUser&quot;;
        state[&quot;TOKEN&quot;] = null;
  
        return state;
      case authTypes.SIGN_OUT_SUCCESS:
        state[&quot;IS_AUTHENTICATED&quot;] = false;
        state[&quot;AUTH_SUCCESS&quot;] = false;
        state[&quot;USERNAME&quot;] = &quot;AnonymousUser&quot;;
        state[&quot;TOKEN&quot;] = null;
  
        return state;
      case authTypes.SIGN_OUT_FAIL:
        state[&quot;IS_AUTHENTICATED&quot;] = localStorage.getItem(&quot;IS_AUTHENTICATED&quot;);
        state[&quot;AUTH_SUCCESS&quot;] = false;
        state[&quot;USERNAME&quot;] = localStorage.getItem(&quot;USERNAME&quot;);
        state[&quot;TOKEN&quot;] = localStorage.getItem(&quot;TOKEN&quot;);
  
        return state;
      default:
        return state;
    }
  };
  
  export default authReducer;
  </code></pre>
  <p>COMBINED REDUCER</p>
  <pre><code>import authReducer from &quot;./Auth/Reducer&quot;;
  import roomReducer from &quot;./Backend/Reducer&quot;;
  
  import { combineReducers } from &quot;redux&quot;;
  
  const reducer = combineReducers({
    authReducer,
    roomReducer,
  });
  
  export default reducer;
  </code></pre>
  <p>index.js</p>
  <pre><code>...
  function saveToLocalStorage(state) {
    try {
      const serialisedState = JSON.stringify(state);
      localStorage.setItem(&quot;persistantState&quot;, serialisedState);
    } catch (e) {
      console.warn(e);
    }
  }
  
  function loadFromLocalStorage() {
    try {
      const serialisedState = localStorage.getItem(&quot;persistantState&quot;);
      if (serialisedState === null) return undefined;
      return JSON.parse(serialisedState);
    } catch (e) {
      console.warn(e);
      return undefined;
    }
  }
  
  const store = createStore(
    reducer,
    loadFromLocalStorage(),
    window.__REDUX_DEVTOOLS_EXTENSION__ &amp;&amp; window.__REDUX_DEVTOOLS_EXTENSION__()
  );
  
  store.subscribe(() =&gt; saveToLocalStorage(store.getState()));
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;Provider store={store}&gt;
        &lt;App /&gt;
      &lt;/Provider&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById(&quot;root&quot;)
  );
  ...
  </code></pre>