redux-toolkitのstoreをローカルストレージに保存する方法

開発を進めていく中でredux-toolkitのstoreに保存されているものをlocalStorageにも保存する処理が必要になったので、その方法を記載していく。

redux-localstoreage-simpleを利用することで簡単に実装することができた。

##1.インストールする

npm install redux-localstorage-simple

##2.store.tsを編集する

store.ts

import { configureStore } from '@reduxjs/toolkit';
import authReducer from "../features/auth/authSlice";
import { save, load } from 'redux-localstorage-simple'; //追記

export const store = configureStore({
  reducer: {
    auth: authReducer,
  },
// 下記を追記
  preloadedState: load(),
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(save()),
});

以上で、storeの変更が行われた際に自動的にローカルストレージに保存されるようになる。