Reduxの状態で永続的な状態を持続

我々はWebアプリでページを更新するときは、状態は常に電子商取引のようないくつかの大規模なWebアプリケーションを構築しようとすると良いことではない初期値に戻ります.
ネイティブのJavaScriptを使用して手動で永続的な状態にすることができますlocalStorage.setItem() しかし、正直に、我々は始めからすべてを書かなければなりません、そして、我々は州の構造を維持しなければなりません.
そこでここでReduxは、Reduxツールキットをサポートしています.

Reduxの主張
それは店に接続されているときにredux状態を持続するためのパッケージです.
それはすべてのパッケージのです.かなりきれい!
さらに話なしで、我々が実際に状態/店永続のためのReduxツールキットでそれをフックする方法に飛び込むことができます.我々は簡単に理解するためのカウンタアプリを使用します.

ステップ1
パッケージをインストールnpm or yarn (ここでNPMを使います).

npm i redux-persist

ステップ2
必要なインポートをReduxストアに追加します.

//store.js
import storage from 'redux-persist/lib/storage';
import { combineReducers } from 'redux';
import {
    persistReducer,
    FLUSH,
    REHYDRATE,
    PAUSE,
    PERSIST,
    PURGE,
    REGISTER,
} from 'redux-persist';

Redux Persistはローカルストレージ、セッションストレージ、またはAsyncストレージのようなデータを保持するために異なるストレージを提供します.ローカルストレージを使用します.
我々にはcombineReducers 関数はすべてのリダクションを1つにグループ化し、reduxの持続に渡すことができます.
Reduxはいくつかの機能を派遣し、公式Reduxツールキットガイドに従って、不要な警告やエラーを避けるために無視リストにそれらを追加する必要があります.

ステップ3
ストレージに保存されるPersistオブジェクトの設定を作成する必要があります.

//store.js
const persistConfig = {
    key: 'counter',
    storage,
};

キーは、PersistオブジェクトのIDを指定し、ストレージは使用されるストレージの種類を決定します.

ステップ4
還元剤を組み合わせる

//store.js
const reducers = combineReducers({ counter: counterSlice });

ステップ5
永続的な還元を作成します

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

ステップ6
ミドルウェア内の無視リストに対してPersistence Reducerを還元器とExclusiveディスパッチ関数に割り当てます.最後に、ストアは次のようになります.

//store.js
export default configureStore({
    reducer: persistedReducer,
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
            serializableCheck: {
                ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
            },
        }),
});

ステップ7
Rerexが我々に与える反応のようにProvider アプリケーション全体をラップするコンポーネントは、同様に我々は得るPersistGate Redux永続から.我々はそれを全体のアプリをラップする必要があります:

//index.js
import { persistStore } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';
//...
let persistor = persistStore(store);

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <PersistGate persistor={persistor}>
                <App />
            </PersistGate>
        </Provider>
    </React.StrictMode>,
    document.getElementById('root')
);

The persistStore storeオブジェクトは、PersistGate コンポーネント.

手順8 :
すべての接続を行うと、今あなたの反応アプリはときにページの変更やページを再読み込みを保持することができます.
redux loggerでチェックすると、最初にチェックしますPERSIST アクションとリストアストアREHYDRATE アクション.


ラッピング
Reduxの永続的な理由のための素晴らしいライブラリですが、それは古いと旧式の、最後の更新方法は、いくつかのPRと問題Githubで2019年であった.私は、彼らがプロジェクトを復活させて、必要な問題を解決することを望みます.一方、任意の選択肢を知っていればコメントでお知らせください.