1.前言
其实在vuex-persist持久化,用的也是这个东西
这个东西 就是持久化,其实所谓的持久化,在前端而言,一般都是指存储到
localStorage里面,因为刷新也还在嘛,不像存在其他地方刷新就没了,这里不讨论存储到本地文件我们在
react再玩一遍,看看有啥不同,找点新鲜感
2. 环境配置
安装 默认就是生产安装
npm i redux-persist
3. 存储
持久化这个一般都是我们的数据,更具体来说,就是我们状态管理的数据状态进行持久化.所以,这里直接在store里面进行配置,当然你在入口index或者其他地方配置未尝不可
简要步骤
- 引入相关文件
// 持久化存储 state import { persistStore, persistReducer } from 'redux-persist' import storage from 'redux-persist/lib/storage'
2.相关配置 准备
例如黑白名单
const persistConfig = { key: 'root', storage, }
3.持久化根reducer
reducer 当然根据你自己的名字来改
// 持久化根reducers const persistedReducer = persistReducer(persistConfig, allReducers)
4.创建 持久化store对象
let store = createStore(persistedReducer )
5.持久化store对象
//最外层要导入 let persistor = persistStore(store);
6.导出 注意导出方式
export default store export {persistor};
7.查看效果 localStorage已经有了
1.png
8.额外配置:例如黑名单,白名单等
const persistConfig = { key: 'root', storage, // 黑名单 不缓存的 blacklist:['page404'] }
4. 附上完整代码
// 存储器：用来管理状态（获取状态 、修改状态） import { createStore } from 'redux' // 引入合并函数 import { combineReducers } from 'redux' import reducer404 from '../pages/404/store/reducer404' import reducerAd from '../pages/address/store/reducerAd' // 1. 引入相关文件 import { persistStore, persistReducer } from 'redux-persist' import storage from 'redux-persist/lib/storage' // 2. 配置 const persistConfig = { key: 'root', storage, //黑名单 不缓存 blacklist: ["page404"] } let allReducers = combineReducers({ // 通过page404 找404 模块的reducer page404: reducer404, pageAddress:reducerAd }) // 3. 持久化根reducer和配置,并返回所有 const persistedReducer = persistReducer(persistConfig, allReducers) // 4. 创建 持久化store对象 let store = createStore(persistedReducer) // 5. 持久化store对象 let persistor = persistStore(store) console.log("获取持久化存储信息:",persistor.getState()) // 6. 导出 注意导出方式 export default store export { persistor } // 7. 查看效果 localStorage已经有了 // 8. 额外配置 不想缓存某个模块 黑名单 // blacklist: ["page404"]
5. 持久化 到本地
1.默认会从 loaclStorage读取
2.可以避免多次请求
// redux存储器 react-redux 管理状态存储的容器 import store ,{persistor}from './store' //注入器 负责把我们的 store 注入到全局 ,这样哪个组件都能用 import { Provider } from 'react-redux' import { PersistGate } from 'redux-persist/integration/react' ReactDOM.render( <React.StrictMode> <Provider store={store}> <PersistGate loading={null} persistor={persistor}> <App /> </PersistGate> </Provider> </React.StrictMode>, document.getElementById('root') );
