redux-localstorageを使用して状態をlocalStrageに保存する

React Redux

やりたいこと

  • redux-localstorageを使用して状態をlocalStrageに保存する

npm install

npm install --save redux-localstorage

storeにredux-localstorageを追加

// 編集前
import { createStore } from 'redux';
import rootReducer from '../reducers/index';

const store = createStore(rootReducer);

export default store;

// 編集後
import { compose, createStore } from 'redux';
import persistState from 'redux-localstorage';
import rootReducer from '../reducers/index';

const enhancer = compose(persistState(['datas', 'sprints'], { key: 'burndown-app' }));

const store = createStore(rootReducer, enhancer);

export default store;

persistStateの第一引数がlocalStorageに保存するstateの変数名。
第二引数はconfigの設定を行う。上記の例ではkeyのみ設定しているが、
localStorageと同期する部分を操作する関数の定義(slicer）なども設定できるらしい。

詳細 github.com

stateが変更されたら自動で保存、画面更新後も自動でlocalStorageから状態を取得してくれる。
localStorage.setItemやlocalStorage.getItemをする必要がなくてめっちゃ便利。