保留 Redux 状态

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中文网其他相关文章！