Redux Toolkitを使用したローカルストレージの統合

パッケージのインストール: まず、Redux Toolkitとローカルストレージを操作するためのパッケージをインストールします。以下のコマンドを使用して、必要なパッケージをインストールします。

npm install @reduxjs/toolkit redux-persist

ストアの設定: Redux Toolkitのストアを作成し、ローカルストレージとの統合を行います。以下のようなコードを使用して、ストアを設定します。

import { configureStore } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
// ルートリデューサーのインポート
import rootReducer from './reducers';
// Redux Persistの設定
const persistConfig = {
  key: 'root',
  storage,
};
// パーシストレデューサーの作成
const persistedReducer = persistReducer(persistConfig, rootReducer);
// ストアの作成
const store = configureStore({
  reducer: persistedReducer,
});
// パーシストストアの作成
const persistor = persistStore(store);
export { store, persistor };

上記のコードでは、Redux Persistパッケージを使用して、ストアの状態をローカルストレージに永続化しています。persistConfigオブジェクトには、パーシストの設定が含まれています。

コンポーネントでの使用: Redux Toolkitのストアを使用するコンポーネントで、ローカルストレージとの統合を活用します。以下の例では、カウンターの値をローカルストレージに保存する方法を示しています。

import { useSelector, useDispatch } from 'react-redux';
import { increment } from './reducers/counterSlice';
const Counter = () => {
  const dispatch = useDispatch();
  const count = useSelector((state) => state.counter);
  const handleIncrement = () => {
    dispatch(increment());
  };
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
};
export default Counter;

上記のコードでは、useSelectorフックを使用してストアの状態を取得し、useDispatchフックを使用してアクションをディスパッチしています。カウンターの値が変更されるたびに、自動的にローカルストレージに保存されます。

以上のように、Redux Toolkitとローカルストレージを統合することで、アプリケーションの状態を永続化することができます。この方法を使用することで、ブラウザのリロードや再起動後も状態が保持されます。