Redux Toolkit 状态持久化

问题： 项目使用 Redux Toolkit刷新页面 状态丢失

解决思路： 需要使其状态持久化， 搭配Redux Persist

步骤：

1、 安装 redux-persist：$ npm i redux-persist

2、 找到 src/redux/store.js 文件，具体位置看项目

3、 使用 redux-persist

import { combineReducers, configureStore } from '@reduxjs/toolkit';
import { TypedUseSelectorHook, useSelector, useDispatch } from 'react-redux';
import thunk from 'redux-thunk';

import { persistStore, persistReducer } from 'redux-persist';
// 这个是将状态存储在本地
import storage from 'redux-persist/es/storage';

import global from './global';
import user from './user';

const persistConfig = {
  key: 'root',
  storage,
};

const reducer = combineReducers({
  global,
  user,
});

/**
 * 解决数据状态不持久化
 */
const persistedReducer = persistReducer(persistConfig, reducer);
export const store = configureStore({
  reducer: persistedReducer,
  middleware: [thunk],
});

export const persistor = persistStore(store);

/** */
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export const useAppDispatch = () => useDispatch<any>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

4、入口文件配置， 根据需要修改

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { HashRouter } from 'react-router-dom';
import { persistor, store } from 'modules/store';
import { PersistGate } from 'redux-persist/integration/react';
import App from 'layouts/index';

import 'tdesign-react/es/style/index.css';

import './styles/index.less';

const renderApp = () => {
  ReactDOM.render(
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <HashRouter>
          <App />
        </HashRouter>
      </PersistGate>
    </Provider>,
    document.getElementById('app'),
  );
};

renderApp();

可将userReducer 的状态持久化到本地存储。除了本地存储，我们还可以使用其他存储引擎，如 [sessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)和Redux Persist Cookie存储适配器。

参考文档： 在React中使Redux工具箱保持持久化状态