React 持久化全局数据状态管理（reduxreact-reduxredux-persistimmer）

Posted 2023-02-26 усил

一、创建 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 全局数据状态管理（持久化）