Redux Persistを使用すると、Reduxストアの状態を永続化できます。具体的には、ストアの状態をローカルストレージやセッションストレージに保存し、ページのリロードや遷移後も状態を復元することができます。
以下に、Redux Persistの基本的な使用方法とコード例を示します。
まず、Redux Persistパッケージをインストールします。以下のコマンドを使用してください。
npm install redux-persistまたは
yarn add redux-persist次に、Redux Persistを設定します。まず、Reduxのストアを作成します。
import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
// レデューサーとパーシステント設定を定義します
const persistConfig = {
key: 'root',
storage,
};
// パーシステントレデューサーを作成します
const persistedReducer = persistReducer(persistConfig, rootReducer);
// パーシステントストアを作成します
const store = createStore(persistedReducer);
const persistor = persistStore(store);この例では、redux-persistパッケージからpersistStore、persistReducerメソッドをインポートし、redux-persist/lib/storageからstorageオブジェクトをインポートしています。また、persistConfigオブジェクトを定義し、keyプロパティには永続化ストレージ内でのストアのキーを指定します。
次に、パーシステントストアを作成し、persistStoreメソッドを使用してストアを永続化します。
これで、Reduxの状態が永続化されるようになりました。
コード例の一部として、以下のようなアクションとレデューサーを考えてみましょう。
// アクション
const increment = () => {
return {
type: 'INCREMENT',
};
};
// レデューサー
const counterReducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
default:
return state;
}
};これらのアクションとレデューサーを使用して、Reduxの状態を変更します。
store.dispatch(increment());Redux Persistによって、この状態変更は永続化され、ページのリロード後も保持されます。
以上が、Redux Persistの基本的な使用方法とコード例です。このようにRedux Persistを使用することで、アプリケーションの状態を永続化し、ユーザーの操作に関わらず状態を維持することができます。