redux持続(V 6)詳細(反応)

アプリケーションを再ロードするたびに、JavaScriptプロセスはメモリに何も持ちません.あなたは状態を再初期化しなければならなくて、多分、URL(あなたがブラウザーにいるならば)に基づく若干の基本的な状態をセットしなければなりません.通常、これはあなたが望むものですが、あなたのブラウザーウインドウを再ロードするときでも、あなたのRedux状態を持続させたいかもしれない多くのユースケースがあります.
グローバル状態管理のためのreduxを使用するWebアプリケーションでのリフレッシュの永続的な状態のこの考えは、redux-persist NPMパッケージを使用して達成することができます.
完全なRedux店またはそれのいくつかの特定の部分は、簡単にブラウザLocalStorageで持続されることができます!
2020年にreduxを実装するための非常に一般的な使用例は以下の通りです.

Offline First. Many users may not have stable internet connection. Persistence is the first step of offline support.

さて、それは導入のためのそれは今、私たちの反応reduxアプリケーションでreduxの持続を設定しましょう.
反応Reduxアプリをセットアップするためにチェックアウト
またはクローンthis

レポ ステップ1 -インストールredux

npm install redux-persist

or

yarn add redux-persist

ステップ2 -設定reduxストア

// store.js

import { createStore, applyMiddleware } from 'redux'
import { persistStore, persistReducer } from 'redux-persist' // imports from redux-persist
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web

import rootReducer from './reducers' // Root reducer

const persistConfig = { // configuration object for redux-persist
    key: 'root',
    storage, // define which storage to use
}

const persistedReducer = persistReducer(persistConfig, rootReducer) // create a persisted reducer

const store = createStore(
    persistReducer, // pass the persisted reducer instead of rootReducer to createStore
    applyMiddleware() // add any middlewares here
)

const  persistor = persistStore(store); // used to create the persisted store, persistor will be used in the next step

export {store, persistor}

PersistConfigオブジェクトにはキーとストレージが必須であるため、適切に動作する必要がありますが、よりカスタマイズするためにいくつかの他のキー値ペアを取ることもできます.

ブラックリスト

example:
// BLACKLIST
const persistConfig = {
  key: 'root',
  storage: storage,
  blacklist: ['navigation'] // navigation will not be persisted
};

ホワイトリスト:

example:
// WHITELIST
const persistConfig = {
  key: 'root',
  storage: storage,
  whitelist: ['navigation'] // only navigation will be persisted
};

Note: if you are using react native then your persistConfig will look like this (see docs):

import AsyncStorage from '@react-native-community/async-storage';

const persistConfig = {
    >       key: 'root',
    >       storage: AsyncStorage
    >}

ステップ3 -ルートコンポーネントをラップする

反応を使用している場合は、ルートコンポーネント(トップレベルコンポーネント)を永続ゲートでラップします.これはあなたの永続的な状態が取得されているとreduxに保存されるまで、あなたのアプリケーションのUIのレンダリングを遅延します.

NOTE the PersistGate's loading prop can alse be null, or any react instance, e.g. loading={<Loading />}
i.e it can be any react component, so you can add your custom loader as a component here.
If null is provided as a value then it simply loads nothing until persisted state is retrieved. (Don't worry if you don't have a custom loader yet, it hardly takes fraction of a second to retrieve a simple redux state)

import {store, persistor} from './redux/store'
import { PersistGate } from 'redux-persist/integration/react'

const App = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}> // null passed to loading, persistor is being used here
        <RootComponent />
      </PersistGate>
    </Provider>
  );
};

おめでとう!あなたは正常にReduxのあなたの反応アプリで永続的な設定を完了している!それはかなり簡単でしたか?あなたの考えを私に知らせてください

持続する 追加リソース

1. Check out this great article to know how you can do versioning in your persisted localstorage using redux-persist. This usually comes in handy when you make some big changes in your redux state and its not compatible with the previously saved localstorage in production, so redux-persist has this good to have feature for versioning built in.
   
   
   

2. Docs

3. API

4. How to setup Redux with React (2020)