【React】redux持久化之redux-persist

redux-persist安装

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

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};

• 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>
)