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

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

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

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

import { configureStore, combineReducers } from "@reduxjs/toolkit";

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

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

// redux middleWares
const middleWares = [reduxThunk, reduxPromise];

// 创建 store
export const store = configureStore({
	reducer: persistReducerConfig,
	middleware: middleWares,
	devTools: true
});

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

二、创建模块

global 模块（redux/modules/global.js）

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

const globalSlice = createSlice({
    name: 'global',
    initialState: globalState,
    reducers: {
        setThemeConfig(state, {payload}) {
            state.themeConfig.isDark = payload;
        }
    }
});

export const { setThemeConfig } = globalSlice.actions;
export default globalSlice.reducer;

三、对 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 { useDispatch, useSelector } from "react-redux";
import { setThemeConfig } from "@/redux/modules/global";

const SwitchDark = () => {
    const themeConfig = useSelector(state => state.global.themeConfig);
    const dispatch = useDispatch();
    const onChange = () => {
        dispatch(setThemeConfig(!themeConfig.isDark))
    }
    return (
       <Switch
            className="dark"
            defaultChecked={themeConfig.isDark}
            checkedChildren={<>🌞</>}
            unCheckedChildren={<>🌜</>}
            onChange={onChange}
	   />
    )
}

总结

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