1.前言

其实在vuex-persist持久化,用的也是这个东西
这个东西 就是持久化,其实所谓的持久化,在前端而言,一般都是指存储到 localStorage里面,因为刷新也还在嘛,不像存在其他地方刷新就没了,这里不讨论存储到本地文件
我们在react再玩一遍,看看有啥不同,找点新鲜感

2. 环境配置

安装 默认就是生产安装

npm i redux-persist

3. 存储

持久化这个一般都是我们的数据,更具体来说,就是我们状态管理的数据状态进行持久化.所以,这里直接在store里面进行配置,当然你在入口index或者其他地方配置未尝不可

简要步骤

1. 引入相关文件

// 持久化存储 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')
);

参考资料

redux-persist

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉