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 调试工具(结合中间件)
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
项目入口文件 (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")
)
创建修改主题色组件
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 全局数据状态管理(持久化)