redux-localstorage-adapter

Localstorage adapter for redux

Main points

• Keep your components pure.
• Sync localstorage and store and use actions to change it.

Setup

your/known-localstorage-api.js

import LocalStorageApi from 'redux-localstorage-adapter';
 
const knownLocalStorageKeys = [
  'NEWS_SIMILAR_ENTRIES_TEMPLATE',
  'FIRE_THEME_ENABLED'
];
 
const knownApi = {};
 
knownLocalStorageKeys.forEach(key=> {
  knownApi[key] = new LocalStorageApi(key);
});
 
export default knownApi;

your/localstorage-reducer.js

import knownLocalStorageApi from 'your/known-localstorage-api';
import {combineReducers} from 'redux';
 
export default combineReducers(_.mapValues(knownLocalStorageApi, api => api.reducer));
 

your/index-reducer.js

import localStorage from 'your/localstorage-reducer';
import {combineReducers} from 'redux';
 
export default combineReducers({
  localStorage
  //..
});

your/localstorage-actions.js

import knownLocalStorageApi from 'your/known-localstorage-api';
 
export default _.mapValues(knownLocalStorageApi, api => api.actions);

Usage

your/some-redux-container.js

import localStorageActions from 'your/localstorage-actions';
 
class SomeComponent extends BaseComponent {
/...
 onCarIconClick = ()=> {
    this.props.setFire(!this.props.fireEnabled);
  }
/...
}
 
const mapStateToProps = (state) => ({
  fireEnabled: state.localStorage.FIRE_THEME_ENABLED
});
 
const mapDispatchToProps = {
  setFire: localStorageActions.FIRE_THEME_ENABLED.setItem
}
 
export default connect(mapStateToProps, mapDispatchToProps)(SomeComponent);

Enjoy the redux flow