首頁 > web前端 > js教程 > 主體

保留 Redux 狀態

WBOY
發布: 2024-08-21 06:00:37
原創
500 人瀏覽過

Persist Redux State

Persist Redux 狀態是什麼意思?

React 應用程式中的一個常見挑戰是在頁面重新載入後或在使用者會話之間重新水化 Redux 狀態。典型的解決方法是透過 API 呼叫重新取得資料並將其儲存在 Redux 狀態中。不過,您現在可以使用名為 Persisted Redux State 的技術來重新水合 Redux 狀態,而無需額外的 API 呼叫。

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中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板