前言

在使用redux的时候我们发现state中的数据一旦刷新页面就还原成了初始化的状态，如果我们学过vue的话，应该到都知道vue中的vuex也是如此，无法持久保存vuex中state数据的状态，那么我们该怎么解决这个问题呢？

我们一般都是采用的数据持久化插件，vuex中我们一般采用的是vuex-persist持久化插件，redux中我们可以使用网上提供的redux-persist插件来实现redux数据的持久化。

好的，闲言碎语不用讲，我们看一下如何使用

redux-persist安装

首选我们需要在react项目中安装redux-persist

//安装命令，安装后自行查看package.json是否安装上
cnpm i redux-persist --save

开始配置

1. 找到配置redux的store/index.js文件

在文件中我们需要导入 redux-persist的两个依赖包，persistReducer, persistStore，分别用来配置保存的数据源和保存数据的方法

import { createStore,combineReducers } from "redux";
//配置数据的持久化效果
import {persistStore,persistReducer} from "redux-persist"
//导入需要配置的数据源，可以选择，storage，cookie,session等
import storage from "redux-persist/lib/storage";

...  //重复代码省略
//可以合并多个模块
const Reducer = combineReducers({
    ....
})

//定义配置的信息
const persitConfig = {
    key:"root",
    storage:storage,
   // 如果不想将部分state持久化，可以将其放入黑名单(blacklist)中.黑名单是设置
  blacklist: ['不想缓存的状态的名字']
}
//创建持久化的配置persist的信息
const persist_reducers = persistReducer(persitConfig,Reducer);
//创建存储对象并且抛出对象
const store = createStore(persist_reducers);
const persistor =  persistStore(store);//使用persistStore包裹一下
//抛出store和持久化工具两个对象信息
export {store,persistor};

2. index.js入口文件中配置

在入口文件中使用 PersistGate 包裹根组件。这将延迟渲染app 视图直到持久化状态取回并保存到redux中
导入对应抛出的store对象和persistor对象直接使用配置即可

import { store, persistor } from "./store";//redux中的数据获取对象信息
//如果使用React,则使用 PersistGate 包裹根组建
import { PersistGate } from 'redux-persist/lib/integration/react';
//导入react-redux对象
import { Provider } from "react-redux"

root.render(
    <Provider store={store}>
        {/* // loading 和 persistor是2个必需属性 */}
        {/* // loading={null} || loading={<LoadingView />} LoadingView为React组件 */}
        {/* // 最好将loading={null}，写成loading={<LoadingView />} 报错，原因暂不明 */}
        <PersistGate loading={null} persistor={persistor}>
            <Routes />
        </PersistGate>
    </Provider>
)

3. 最后看看效果

image.png