浅析redux-persist

之前在项目中遇到redux的数据持久化问题，当页面刷新时，redux中存储的状态会重置，导致之前的操作无效，这要是用户手欠，不不不！是好奇，F5刷新下界面，问题可就大了，所以研究了一下redux数据持久化组件redux-persist，今天记录一下，方便以后查阅

image.png

先说一下我的项目目录，我主要吧redux相关的文件存放到了store文件夹中，因为根据我的理解，redux就好像一个数据库，他将app中所有组件中需要共用的状态存放起来，方便各个组件获取和修改，action就好像后台的接口名，不同的接口会执行不同的业务逻辑，而业务逻辑就存放到reducer中，reducer中会修改redux中存放的状态。而使用redux-persist主要关注的就是三个文件，app.js、store中的index.js和reducers中的index.js，废话不多说，直接上代码

App.js

import React from 'react';
import { Provider } from 'react-redux';
import { ConfigProvider } from 'antd';
import { PersistGate } from 'redux-persist/integration/react'
import zhCN from 'antd/es/locale/zh_CN';
import storeCallback from './store';
import PageRouter from './routers';
import 'antd/dist/antd.css';
import './static/iconfont/iconfont.css'
import './static/style/index.styl';
const { store, persistor } = storeCallback()

function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <ConfigProvider locale={zhCN}>
          <PageRouter/>
        </ConfigProvider>
      </PersistGate>
    </Provider>
  );
}
export default App;

这个文件是三个当中最简单的文件，引入PersistGate标签，把store中返回的store和persist分别传入Provider的store属性中和PersistGate的persistor属性中就可以了

store/index.js

import { createStore,applyMiddleware,compose } from 'redux';
import thunk from 'redux-thunk';
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage/session'
import immutableTransform from "redux-persist-transform-immutable";
import reducers from './reducers';
const persistConfig = {
    transforms: [immutableTransform()],
    key:"root",
    storage
}
const persistedReducer = persistReducer(persistConfig, reducers)
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const middlewares = applyMiddleware(thunk);

export default () => {
    let store = createStore(
        persistedReducer,
        composeEnhancers(middlewares)
    )
    let persistor = persistStore(store)
    return { store, persistor }
}

这个文件中主要关注三个方法和一个配置，persistConfig这个配置是告诉persist我的reducer数据中有immutable对象需要你注意一下。通过该配置和persistReducer方法生成一个新的reducer，然后用新的reducer去创建store，如果使用了中间件在加上类似于composeEnhancers(middlewares)的参数就好了，最后返回一个{ store, persistor }对象

store/reducers/index.js

import { combineReducers } from 'redux';
import headerReducer from './header-reducer';
import loginReducer from './login-reducer';
import screenReducer from './screen-reducer';
import settingReducer from './setting-reducer';
import screenListReducer from './screenList-reducer'
export default combineReducers({
    headerState:headerReducer,
    loginState:loginReducer,
    screenState:screenReducer,
    settingState:settingReducer,
    screenListState:screenListReducer
});

这个文件中需要注意的是不要在这里使用redux-immutable的combineReducers，因为redux-persist实现数据持久化依靠的还是html5的localstorage，如果在这里把数据转换成immutable对象它会报错，我猜测可能是immutable在字符串与对象之间转换会有问题，需要说明一下这里的headerReducer等都是immutable对象，以下是headerReducer的代码

import {
    show_layer
} from '../actions/header-actions';
import { fromJS } from 'immutable';

const initialState = fromJS({
    layerPanelShow:false,
    modulesPanelShow:false,
    settingPanelShow:true,
    autoUpdateTimers:[]
})

export default (state=initialState,action)=>{
    switch (action.type){
        case show_layer:{
            const result = state.set("layerPanelShow",action.data)
            return result
        }
        default:
            return state
    }
}

写完我发现文章从后往前读好像更好理解！

最后编辑于：2020.08.20 10:18:42