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 } }));