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

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

https://github.com/rt2zz/redux-persist

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

## インストール
まずはインストールです。
![img](/mosaic-code.jpg)

![img](/mosaic-code.jpg)

## 実装コード
コードを書いていきます。
まずは、ルートファイルに以下のコードを書きます。
![img](/mosaic-code.jpg)
これは、redux-persistを使う際に、storeの情報をPersistGateを使って、永続的に管理できるようにするためのコードです。

次に、store.jsファイルで以下のように書いていきます。
※redux-persistに関係のないコードは省いています。
![img](/mosaic-code.jpg)
各コードについて解説します。

#### persistConfig オブジェクト
![img](/mosaic-code.jpg)
**・key**
このキーは永続化ストレージ内での保存領域を指定します。"root" として指定されています。
**・storage**
Redux Persistが使用する永続化ストレージを指定します。このコードでは AsyncStorage が指定されています。AsyncStorage はReact Native環境で使用される、非同期にデータを永続化するためのストレージです。

#### persistedReducer

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

#### ReduxのconfigureStore関数:
![img](/mosaic-code.jpg)
**・configureStore**
Redux Toolkitが提供する関数で、Reduxストアを構成します。このコードでは reducer プロパティに persistedReducer を指定しています。これにより、永続化機能が組み込まれたReduxストアが作成されます。

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

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

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/265c676d17fe21e75242

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]

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

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

https://github.com/rt2zz/redux-persist

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

## インストール
まずはインストールです。
```: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は簡単にデータの永続化ができるので、便利だなと思いました。
他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/265c676d17fe21e75242

https://qiita.com/hukuryo/items/ebeb26823f944f143b11


はじめに

redux-persistとは

使用方法

インストール

続きを読むには単価診断を受けてください（30秒）