react antd redux 全局状态管理 解决修改菜单状态 同步刷新左侧菜单

npm i react-redux

1.src新建两个文件 globalState.js 全局状态定义 store.js 全局存储定义

2.globalState.js

import { createSlice } from "@reduxjs/toolkit";export const globalState = createSlice({name: "globalState",initialState: { data: {} },reducers: {//定义的函数 方便操作data对象update: (state, action) => {state.data = action.payload;},},
});
// 每个 case reducer 函数会生成对应的 Action creators
export const { update } = globalState.actions;export default globalState.reducer;

3.store.js

import { configureStore } from '@reduxjs/toolkit'
import globalState from './globalState'export default configureStore({reducer: {globalState: globalState}
})

4.读取状态

import { useSelector, useDispatch } from "react-redux";
const state = useSelector((state) => state.globalState);
console.log(state)

5.存储状态

import { useDispatch } from "react-redux";
import { update } from "../../../../state/globalState";//调度 update函数  传入想要存储的数据对象
dispatch(update({ reloadMenu: { id: r.id, reload: c } }));