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 storageimport { 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( );
完成！你的持久 redux 状态已经准备好了。
以上就是保留 Redux 状态的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1490650.html
微信扫一扫 
支付宝扫一扫 
