redux 持久化

解决页面刷新之后redux 数据无法持久化的问题

1. 引入redux-persist 库来处理
2. redux-persisit 接受一个在store 中持久话导出的persister

• index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Routes, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import { store, history, persistor } from './store';
import './style/common.less';
import Tabs from './components/Tabs';
// 绑定redux 和router
import { HistoryRouter } from 'redux-first-history/rr6';
import { Spin } from 'antd';
// 数据持久化
import { PersistGate } from 'redux-persist/integration/react';
//动态引入
const Home = React.lazy(() => import('./routes/Home'));
const Cart = React.lazy(() => import('./routes/Cart'));
ReactDOM.render(
    <Provider store={store}>
        <PersistGate loading={<Spin />} persistor={persistor}>
            <HistoryRouter history={history}>
                <main className='main-container'>
                    <React.Suspense fallback={<Spin />}>
                        <Routes>
                            <Route path="/" element={<Home />} />
                            <Route path="/cart" element={<Cart />} />
                        </Routes>
                    </React.Suspense>
                </main>
                <Tabs />
            </HistoryRouter>
        </PersistGate>
    </Provider>
    , document.getElementById('root'));

• store.js

import { applyMiddleware, createStore } from 'redux';
import combinedReducer from './reducers';
import logger from 'redux-logger';
import thunk from 'redux-thunk';
import promise from 'redux-promise';
import { createReduxHistory, routerMiddleware } from '@/history';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
//默认存储引擎是localStorage
const persistConfig = {
    key: 'root',//向local里存的时候需要一个key
    storage,//存储引擎
    whitelist: ['cart']//白名单
}
const persistedReducer = persistReducer(persistConfig, combinedReducer);
// 导出仓库
export const store = applyMiddleware(routerMiddleware, thunk, promise, logger)(createStore)(persistedReducer);
// 导出持久化处理的仓库
export const persistor = persistStore(store);
// 导出接合的history
export const history = createReduxHistory(store);

• combinedReducer 合并的

import { routerReducer } from '@/history';
import home, { HomeState } from './home';
import cart from './cart';
import { CartState } from '@/typings/cart';
import profile, { ProfileState } from './profile';
// 绑定redux 和router
import { RouterState } from 'redux-first-history';
// 数据不可变
import { combineReducers } from 'redux-immer';
import produce from 'immer';
let reducers = {
    router: routerReducer,
    home,
    cart,
    profile
}
export type CombinedState = {
    router: RouterState,
    home: HomeState,
    cart: CartState,
    profile: ProfileState
}
let combinedReducer = combineReducers(produce, reducers);
export default combinedReducer;

• histroy js

import { createBrowserHistory } from 'history';
import { createReduxHistoryContext } from 'redux-first-history';
const {
    routerMiddleware,
    routerReducer,
    createReduxHistory
} = createReduxHistoryContext({ history: createBrowserHistory() });
export {
    routerMiddleware,
    routerReducer,
    createReduxHistory
}