React 持久化全局数据状态管理（redux、react-redux、redux-persist、immer）

一、创建 store 仓库（数据持久化）

store 入口文件（redux/index.js）

// 导入各个模块的 reducer
import global from './modules/global/reducer';
import auth from './modules/auth/reducer';

import { persistStore, persistReducer } from "redux-persist";
import storage from 'redux-persist/lib/storage';

import { 
    legacy_createStore as createStore
    combineReducers,
    applyMiddleware,
    compose
} from redux;

import reduxThunk from "redux-thunk";
import reduxPromise from "redux-promise";

// 创建 reducer （将各个模块的 reducer 进行整合）
const reducer = combineReducers({
    global, auth
});

// -- 配置 redux 持久化
const persistConfig = {
    key: 'redux-state',
    storage: storage
}
const persistReducerConfig = persistReducer(persistConfig, reducer);

// 创建 redux 中间件
const middleWares = applyMiddleware(reduxThunk, reduxPromise);
// 开启 redux-devtools
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

// 创建 store
const store = createStore(persistReducerConfig, composeEnhancers(middleWares));

// 创建持久化 store
const persistor = persistStore(store);

export { store, persistor };

上述代码实现了

• reducer 进行切片（分别引入 global 模块、auth 模块）
• redux 数据持久化 （结合 redux-persist）
• 开启 redux 调试工具（结合中间件）

---

二、创建模块的 reducer 和 action

global 模块下的 reducer（redux/modules/global/reducer）

import produce from "immer";
const globalState = {
    themeConfig: {
        // 默认 primary 主题颜色
        primary: "#1890ff",
        // 深色模式
        isDark: false,
        // 色弱模式(weak) || 灰色模式(gray)
        weakOrGray: "",
        // 面包屑导航
        breadcrumb: true,
        // 标签页
        tabs: true,
        // 页脚
        footer: true
    }
    // ....
}

// 创建 global 模块的 reducer
const global = (state = globalState, action) => {
    produce(state, draftState => {
        switch(action.type) {
            case 'SET_THEME_CONFIG':
                draftState.themeConfig = action.themeConfig
                break;
            // .....
            default:
			   return draftState;
        }
    })
}
export default global;

global 模块下的action （redux/modules/global/action）

export const setThemeConfig = (themeConfig: ThemeConfigProp) => ({
	type: types.SET_THEME_CONFIG,
	themeConfig
});

auth 同理（照猫画虎）

redux/modules/auth/reducer

redux/modules/auth/action

---

三、对 reudx 进行注册

项目入口文件 （main.jsx / main.tsx）

import ReactDOM from 'react-dom';
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { store, persistor } from "@/redux/index.js";
ReactDOM.render(
   <Provider store={store}>
        <PersistGate persistor={persistor}>
            <App />
        </PersistGate> 
   </Provider>,
   document.getElementById("root")
)

---

四、使用 redux

创建修改主题色组件

import { setThemeConfig } from "@/redux/modules/global/action";
import { connect } from "react-redux";

const SwitchDark = (props) => {
    const { setThemeConfig, themeConfig } = props;
    const onChange = (checked) => {
        // setThemeConfig 方法是来自 模块 global action 下的 setThemeConfig
        setThemeConfig({...themeConfig, isDark: checked})
    }
    return (
       <Switch
            className="dark"
            defaultChecked={themeConfig.isDark}
            checkedChildren={<>🌞</>}
            unCheckedChildren={<>🌜</>}
            onChange={onChange}
	   />
    )
} 
// 将 redux 中的 state 映射到 prop 中
const mapStatetoProps = (state) => state.global;
// 将 redux 中的 action 映射到 prop 中            
const mapDispatchProps = { setThemeConfig } 
export default connect(mapStatetoProps, mapDispatchToProps)(SwitchDark)

总结

上述例子主要是结合 redux 、react-redux、redux-persist、immer 实现的 react 全局数据状态管理（持久化）