title: Persist multiple states using LocalStorage in Redux
body: <p>I need to persist multiple states in Redux store using <code>LocalStorage</code>. I already have working one key in my case it is drivers. also need to do with buses and carriers states. </p>
  
  <p><strong>Store.js</strong> </p>
  
  <pre><code>import ReduxThunk from 'redux-thunk';
  import { createStore, applyMiddleware, compose } from 'redux';
  import Reducers from './reducers';
  import { loadState, saveState } from '../../utils/localstorage';
  
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  
  // LOCAL STORAGE FOR DRIVERS, BUSES, CARRIERS
  
  const persistedState = loadState()
  
  const store = createStore(
    Reducers,
    persistedState,
    composeEnhancers(
      applyMiddleware(
        ReduxThunk
      )
    )
  );
  
  store.subscribe(() =&gt; {
    saveState({
      drivers: store.getState().drivers
    });
  });
  
  export default store;
  </code></pre>
  
  <p><strong>localstorage.js</strong></p>
  
  <pre><code>export const loadState = () =&gt; {
    try {
  
      const serializedDriversState = localStorage.getItem('drivers')
  
      if (serializedDriversState === null) {
        return undefined;
      }
      return JSON.parse(serializedDriversState);
    } catch (err) {
      return undefined;
    }
  };
  
  export const saveState = (drivers) =&gt; {
    try {
      const serializedDriversState = JSON.stringify(drivers);
      localStorage.setItem('drivers', serializedDriversState)
    } catch (err) {
      // Ignore errors.
    }
  }
  </code></pre>
  
  <p>I'm using Dan Abramov's example: <a href="https://egghead.io/lessons/javascript-redux-persisting-the-state-to-the-local-storage" rel="nofollow noreferrer">Redux LocalStorage</a>.</p>
  
  <p>So how to store multiple states using LocalStorage in Redux store? Is it good approach or use some middleware like <a href="https://github.com/rt2zz/redux-persist" rel="nofollow noreferrer">redux-persist</a>?</p>