Redux ToolkitでlocalStorageにデータを保存するには

Redux ToolkitでStoreブラウザのlocalStorageにデータを保存して永続化する方法です。
localStorageへの読み書きはライブラリ「redux-localstorage-simple」を使用します。

Redux Toolkitを使う場合は

Reducer, Actionなどをまとめて定義するため、通常のReduxにおける設定方法とは異なります。
middlewareの読み込みが可能なので、設定していきます。

redux-localstorage-simpleについて

StoreとReducerの定義時にlocalstorageへのsave, loadメソッドをセットするだけでlocalstorageへ読み書きしてくれるお手軽ライブラリです。

GitHub kilkelly/redux-localstorage-simple
https://github.com/kilkelly/redux-localstorage-simple

設定方法

redux-localstorage-simpleをインストール

パッケージマネージャからインストールします。

npm install --save redux-localstorage-simple

サンプル store.ts

※TypeScriptのサンプルなので、JavaScriptで使用する場合は型宣言を取り除く必要があります。

Redux Toolkitでstoreを生成するタイミングで読み込みます。

import { configureStore } from '@reduxjs/toolkit';
import {
  plantFieldReducer,
  PlantFieldState,
} from 'src/containers/PlantField/plantFieldSlice';
import { save, load } from 'redux-localstorage-simple';

export interface RootState {
  plantField: PlantFieldState;
}

export const store = configureStore({
  reducer: {
    plantField: plantFieldReducer,
  },
  preloadedState: load(),
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(save()),
});