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

ops/2024/10/20 22:36:51/
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/ops/127108.html

相关文章

学习笔记——交换——STP(生成树)工作原理

三、工作原理 STP的基本原理是在一个有二层环路的网络中,交换机通过运行STP,自动生成一个没有环路的网络拓扑。这个无环网络拓扑也叫做STP树(STP Tree),树节点为某些交换机,树枝为某些链路。当网络拓扑发生变化时,STP…

深入理解WPF中的数据绑定:完整指南

如果你曾经使用Windows Presentation Foundation (WPF)进行开发,你可能听说过“数据绑定”这个术语。数据绑定是WPF最强大的功能之一,它能够在用户界面和业务逻辑之间实现无缝的数据流,从而简化开发并保持代码整洁。在这篇文章中,…

three.js 实现模型模型 ,拆解,爆炸,还原的动画效果

three.js 实现模型模型 ,拆解,爆炸,还原的动画效果 在线链接:https://threehub.cn/#/codeMirror?navigationThreeJS&classifybasic&idmodelUnpack 国内站点预览:http://threehub.cn github地址: https://g…

7.计算机网络_IP包头

IP数据报的整体格式: 版本:IPv4、IPv6。下述包头是IPv4的包头,版本为4首部长度:占4个bit,首部大小 首部长度 * 4区分服务:一般不使用总长度:首部数据的长度,16字节最大为65535。长…

基于Android的小型冷库管理系统(论文+源码)-kaic

摘 要 如今科技发展,技术进步,信息化的普及为生活带来极大的便利。各行各业都在积极进行信息化以提高工作效率。而在餐饮行业中,使用信息化代替传统笔记的冷库管理方式,将大大精简操作流程并提升可靠度。 基于以上现况&#xff0…

ElasticSearch简称ES基础语法使用大全

目录 一、查1.匹配查询2. 精确匹配字符串3.匹配某字段为空 二、改1. 通过es_id修改内容2. 匹配修改内容 二、增1.添加单个文档 三、删1.通过_id删除2.匹配删除 一、查 1.匹配查询 注意:字符串搜索时,会对输入的查询字符串进行分析和分词,可能…

标题:中阳国际:智能化金融平台助力全球化投资

在当今的金融市场中,技术与投资的结合已成为必然趋势。中阳国际凭借其卓越的科技优势和全球化的投资视野,打造了一个智能化的投资平台,帮助投资者在瞬息万变的市场中轻松抓住机遇,稳健增值。通过运用先进的金融科技,中…

「OC」AFNetworking的简单使用

「OC」AFNetworking的简单使用 前言 在我们进行网络申请的时候,直接使用OC之中自带的NSURL、NSURLRequest、NSURLSession进行相关操作,还需要实现Task回调、调用resume。那对我们进行开发来说还是相对比较繁琐的,为了简化我们的网络请求&am…