0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

[redux]redux-persistの使い方

Posted at

はじめに

redux-persistの使い方について簡単に書いていきます。

redux-persistとは

redux-persistは、storeに保存したデータを永続化してくれるライブラリです。

使用方法

使い方の説明をしていきます。

インストール

まずはインストールです。

npm
npm install redux-persist
yarn
yarn add redux-persist

実装コード

コードを書いていきます。
まずは、ルートファイルに以下のコードを書きます。

index.tsx
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に関係のないコードは省いています。

/store/store.js
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 オブジェクト

/store/store.js
const persistConfig = {
  key: "root",
  storage: AsyncStorage,
};

・key
このキーは永続化ストレージ内での保存領域を指定します。"root" として指定されています。
・storage
Redux Persistが使用する永続化ストレージを指定します。このコードでは AsyncStorage が指定されています。AsyncStorage はReact Native環境で使用される、非同期にデータを永続化するためのストレージです。

persistedReducer

/store/store.js
const persistedReducer = persistReducer(persistConfig, rootReducer);

・persistReducer
Redux Persistが提供する関数で、指定された構成に基づいてルートリデューサー(rootReducer)を変更し、永続化機能を持たせた新しいリデューサーを作成します。これにより、アプリケーションの状態がストレージに永続的に保存されるようになります。

ReduxのconfigureStore関数:

/store/store.js
export const store = configureStore({
  reducer: persistedReducer,
});

・configureStore
Redux Toolkitが提供する関数で、Reduxストアを構成します。このコードでは reducer プロパティに persistedReducer を指定しています。これにより、永続化機能が組み込まれたReduxストアが作成されます。

Redux PersistのpersistStore関数

/store/store.js
export const persistor = persistStore(store);

・persistStore
Redux Persistが提供する関数で、与えられたReduxストアを永続化します。persistor は後で、Reactコンポーネントで PersistGate コンポーネントに渡すことができ、アプリケーションの描画が永続化されたデータを読み込むのを待つようになります。

最後に

redux-persistは簡単にデータの永続化ができるので、便利だなと思いました。
他にも色々な記事を書いているので、よければ読んでいってください、、、

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?