【ISSUE】[redux]redux-persistの使い方
2024年12月23日 8:40
redux-persistの使い方について簡単に書いていきます。
redux-persistは、storeに保存したデータを永続化してくれるライブラリです。
https://github.com/rt2zz/redux-persist
使い方の説明をしていきます。
まずはインストールです。
コードを書いていきます。
まずは、ルートファイルに以下のコードを書きます。
これは、redux-persistを使う際に、storeの情報をPersistGateを使って、永続的に管理できるようにするためのコードです。
次に、store.jsファイルで以下のように書いていきます。
※redux-persistに関係のないコードは省いています。
各コードについて解説します。
・key
このキーは永続化ストレージ内での保存領域を指定します。"root" として指定されています。
・storage
Redux Persistが使用する永続化ストレージを指定します。このコードでは AsyncStorage が指定されています。AsyncStorage はReact Native環境で使用される、非同期にデータを永続化するためのストレージです。
・persistReducer
Redux Persistが提供する関数で、指定された構成に基づいてルートリデューサー(rootReducer)を変更し、永続化機能を持たせた新しいリデューサーを作成します。これにより、アプリケーションの状態がストレージに永続的に保存されるようになります。
・configureStore
Redux Toolkitが提供する関数で、Reduxストアを構成します。このコードでは reducer プロパティに persistedReducer を指定しています。これにより、永続化機能が組み込まれたReduxストアが作成されます。
・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]
診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。