How to configure Store and use localStorage with react and redux.

configureStore.js

import { createStore } from 'redux'
import throttle from 'lodash/throttle'
import rootReducer from './reducer';
import { loadState, saveState } from './localStorage'

const configureStore = () => {
  const persistedState = loadState();
  const store = createStore(rootReducer, persistedState);

  store.subscribe(throttle(() => {
    saveState({
      todos: store.getState().todos
    })
  }, 1000))

  return store
}

export default configureStore

index.js

import React from 'react'
import { render } from 'react-dom'
import Root from './components/Root'
import configureStore from './configureStore'

const store = configureStore();

render(
  <Root store={store} />,
  document.getElementById('root')
);

localStorage.js

export const loadState = stateName => {
  try {
    const serializedState = localStorage.getItem(stateName);
    if (serializedState === null) {
      return undefined;
    }
    return JSON.parse(serializedState);
  } catch (err) {
    return undefined;
  }
};

export const saveState = (state, stateName) => {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem(stateName, serializedState);
  } catch (err) {
    throw new Error("Can't save changes in local storage");
  }
};

locaStorage-react-redux.md

1. You must understand that if save state to the localStorage is an expensive so if your storage changing often you should think about performance. So I recommend to use lodash's throttle which won't allow launch your function if it's called more often than number in ms that you've given as second argument.

You should install lodash via ``yarn:

  yarn add lodash

• Or npm

  npm i --save lodash

2. Note that you should wrap your calls to localStorage in try/catch because if user's browser doesn't allow caching in localStorage it will give an error and in this case you should return current state.

3. We add Root component because it helps to keep clean index.js and later if we need to add other wrapping components like Router, it will be easy to do.

Root.js

import React from 'react';
import { Provider } from 'react-redux';
import { PropTypes } from 'prop-types';
import App from './App';

const Root = ({ store }) => (
  <Provider store={store}>
    <App />
  </Provider>
);

Root.propTypes = {
  store: PropTypes.object.isRequired,
};

export default Root;