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

【React】redux持久化之redux-persist

猜你喜欢