亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区

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 [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></app></persistgate></provider></browserrouter>);

登錄后復制

完成！你的持久 redux 狀態已經準備好了。