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

server/2024/10/19 0:21:20/
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 } }));

http://www.ppmy.cn/server/132899.html

相关文章

Nginx配置全解析

一、前言 Nginx是一款轻量级的高性能Web服务器、反向代理服务器以及电子邮件(IMAP/POP3)代理服务器。它在处理高并发连接方面表现出色,被广泛应用于各种互联网服务的部署中。了解Nginx的配置对于优化网站性能、保障服务稳定运行至关重要。 …

C#配置文件怎么自动更新到运行目录下

C# 编程学习 WEB API 编程系列11、编写配置文件,如appsettings.json2、项目文件中增加更新策略3、总结 WEB API 编程系列1 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章&#xff…

log file sync 内部执行过程

通常oracle的log file sync执行大致印象是等待cpu、log file parallel write、等待cpu,遇到问题主要考虑lgwr自适应模式参数要关闭、io性能、cpu瓶颈、归档数量和大小等,但是内部执行内容其实很多,尤其是有ADG了以后。 log file sync主要执行…

SQL NULL 值

SQL NULL 值 概述 在SQL(Structured Query Language)中,NULL值是一个特殊的标记,用于表示缺失或未知的值。理解NULL值的概念对于数据库设计和查询非常重要,因为它们可以影响查询的结果和性能。本文将详细介绍SQL中NU…

用 Git Stash 临时保存修改,轻松切换任务!

在开发过程中,我们经常会遇到这样的情况:正在写代码,突然领导或同事让你赶紧处理一个紧急 bug,但你当前的代码还没写完,不能提交,这时候该怎么办呢?别慌,Git 的 stash 命令正好能帮上…

CSS3 分页

CSS3 分页 分页是网页设计中常见的一种用户界面元素,它允许用户浏览多个页面内容,而无需一次性加载所有内容。在网页设计中,分页不仅有助于改善用户体验,还可以提高网页的加载速度和性能。随着CSS3的推出,设计师们可以…

vue中为什么data属性在实例中可以定义成对象,而在组件中定义成对象会抛出错误

在vue组件中将data属性定义成对象会报错 为什么data属性在实例中可以定义成对象,而在组件中定义成对象则会抛出错误? Vue 实例中的 data 属性: 当 data 被定义在一个单一的 Vue 实例中时,这个实例通常是全局唯一的&#xff0c…

Qt学习系列之设计模式的小记录

Qt学习系列之设计模式的小记录 前言Qt中的设计模式使用情况数据模型视图组建代理 小tips虚函数:基类的不同具体使用界面设计后台显示 报错解决 总结 前言 在软件设计师中的设计模式有提到设计模式有三种类型: 创建型:工厂方法模式、抽象工厂…