Redux 状態を維持する

Persist Redux 状態とは何を意味しますか?

React アプリケーションにおける一般的な課題の 1 つは、ページのリロード後またはユーザー セッション間に Redux 状態をリハイドレートすることです。一般的な回避策は、API 呼び出しを介してデータを再フェッチし、Redux 状態に保存することです。ただし、Persisted Redux State と呼ばれる手法を使用すると、追加の API 呼び出しを行わずに Redux 状態をリハイドレートできるようになりました。

redux-persist パッケージ

このパッケージと一般的な Redux パッケージ @reduxjs/toolkit および React-redux を使用して、ブラウザでのページのリロードまたはユーザー セッション全体で持続できる Redux 状態を作成できます。

前提条件

• React アプリケーションが実行されています。

インスタレーション

このコマンドを使用して、永続的な redux 状態を設定するために必要なパッケージをすべてインストールします。

npm i --save @reduxjs/toolkit react-redux redux-persist

永続的な Redux 状態のセットアップ

1.Redux ストア [store.js] を設定します。

import { combineReducers, configureStore } from "@reduxjs/toolkit";
import sampleSlice from "./sampleSlice";
import storageSession from "redux-persist/lib/storage/session"; // session storage
import { FLUSH, PAUSE, PERSIST, persistReducer, persistStore, PURGE, REGISTER, REHYDRATE } from 'redux-persist';

const rootReducer = combineReducers({
     sample : sampleSlice.reducer;
})
const persistConfig = {
     key:'root',
     storage: storageSession,
}
const persistedReducer = persistReducer(persistConfig, rootReducer)
const store = configureStore({
     reducer: persistedReducer,
     middleware: (getDefaultMiddleware) => 
               getDefaultMiddleware({
                   serializableCheck: {
                         ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
           },
     }) 
})
const persister = persistStore(store);
export default store

注: redux をリロード間だけでなく、ブラウザーでのユーザーセッション間でも持続させたい場合は、
を置き換えます。

import storageSession from "redux-persist/lib/storage/session"; // session storage

でインポート

import storageSession from "redux-persist/lib/storage"; // local storage

2.ルートコンポーネント [index.js] をラップします。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { BrowserRouter } from 'react-router-dom';
import store, { persistor } from './store';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(<BrowserRouter>
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <App />
        </PersistGate>
    </Provider>
</BrowserRouter>);

これで完了です!永続的な redux 状態の準備ができました。

以上がRedux 状態を維持するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。