[redux]redux-persistの使い方
はじめに
redux-persistの使い方について簡単に書いていきます。
redux-persistとは
redux-persistは、storeに保存したデータを永続化してくれるライブラリです。
使用方法
使い方の説明をしていきます。
インストール
まずはインストールです。
npm install redux-persist
yarn add redux-persist
実装コード
コードを書いていきます。
まずは、ルートファイルに以下のコードを書きます。
import { store, persistor } from "../src/store/store";
import { PersistGate } from "redux-persist/integration/react";
import { Provider } from "react-redux";
root.render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>
);
これは、redux-persistを使う際に、storeの情報をPersistGateを使って、永続的に管理できるようにするためのコードです。
次に、store.jsファイルで以下のように書いていきます。
※redux-persistに関係のないコードは省いています。
import { configureStore } from "@reduxjs/toolkit";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { persistReducer, persistStore } from "redux-persist";
// ストレージ エンジンを明示的に渡す
const persistConfig = {
key: "root",
storage: AsyncStorage,
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
export const store = configureStore({
reducer: persistedReducer,
});
export const persistor = persistStore(store);
各コードについて解説します。
persistConfig オブジェクト
const persistConfig = {
key: "root",
storage: AsyncStorage,
};
・key
このキーは永続化ストレージ内での保存領域を指定します。"root" として指定されています。
・storage
Redux Persistが使用する永続化ストレージを指定します。このコードでは AsyncStorage が指定されています。AsyncStorage はReact Native環境で使用される、非同期にデータを永続化するためのストレージです。
persistedReducer
const persistedReducer = persistReducer(persistConfig, rootReducer);
・persistReducer
Redux Persistが提供する関数で、指定された構成に基づいてルートリデューサー(rootReducer)を変更し、永続化機能を持たせた新しいリデューサーを作成します。これにより、アプリケーションの状態がストレージに永続的に保存されるようになります。
ReduxのconfigureStore関数:
export const store = configureStore({
reducer: persistedReducer,
});
・configureStore
Redux Toolkitが提供する関数で、Reduxストアを構成します。このコードでは reducer プロパティに persistedReducer を指定しています。これにより、永続化機能が組み込まれたReduxストアが作成されます。
Redux PersistのpersistStore関数
export const persistor = persistStore(store);
・persistStore
Redux Persistが提供する関数で、与えられたReduxストアを永続化します。persistor は後で、Reactコンポーネントで PersistGate コンポーネントに渡すことができ、アプリケーションの描画が永続化されたデータを読み込むのを待つようになります。
最後に
redux-persistは簡単にデータの永続化ができるので、便利だなと思いました。
Discussion