redux-localstorageを使ってlocalstorageにstateを保存する

概要

reduxを用いた開発でデータの永続化をするためにlocalstorageにstateを保存する方法について見ていきます。

インストール

まずはターミナルからredux-localstorageをインストールします。

npm install --save redux-localstorage

使い方

import { compose, createStore } from "redux";
import persistState from "redux-localstorage";


compose(persistState())(createStore);

reduxからcompose、redux-localstorageからpersistStateを取ってくることが必要になります。

上記のようにcomposeとpersistStateを使うことによってstate情報をlocalstorageに保存することができ、データの永続化ができるようになります。

私が実際に書いたコードが下記になります。
ルーティングを実装しているので見えづらいかもしれません。
composeとpersistStateを使っているところを見てください。

store/store.js

import {
  createStore as reduxCreateStore,
  combineReducers,
  applyMiddleware,
  compose
} from "redux";
import { routerReducer, routerMiddleware } from "react-router-redux";
import todoReducer from "../reducers/todo";
import persistState from "redux-localstorage";



export default function createStore(history) {
  return compose(persistState())(reduxCreateStore)(
    combineReducers({
      todo: todoReducer,
      router: routerReducer
    }),
    applyMiddleware(
      routerMiddleware(history)
    )
  );
}

感じたこと

今回この記事を書いたのは自分が実際にreduxを用いて開発する中でデータを永続化させることに苦戦したからです。
いろいろ調べた結果redux-localstorageを使うのが一番簡単でわかりやすいのではと感じました。

以上です。参考になれば幸いです。