当前位置: 首页 > news >正文

react 不可变数据更新(Immutable Update)合并对象 类似与Java 的BeanUtils.copyProperties‌

{ ...state,                       // 保留原有的 state 的其他部分data: { ...state.data,                // 保留 state.data 中的其他字段...action.payload             // 使用 action.payload 覆盖 state.data 中需要更新的字段}
}

这段代码是 Redux 中常见的一种状态更新方式,用于不可变数据更新(Immutable Update)。
它的作用是通过合并对象的方法,更新嵌套状态中的某些字段,同时保持其他字段不变。

作用:
…state:
保留当前状态对象的所有属性。
…state.data:
保留 state.data 对象的所有属性。
…action.payload:
用 action.payload 中的属性更新(或添加到) state.data 对象。

示例 1:Redux 状态更新
假设 Redux 状态如下:

const initialState = {data: {name: "Alice",age: 25,location: "New York"},isLoading: false,
};

如果 action.payload 是:

{ age: 26, location: "Los Angeles" }

Reducer 中使用这段代码:

function reducer(state = initialState, action) {switch (action.type) {case "UPDATE_USER":return { ...state, data: { ...state.data, ...action.payload } };default:return state;}
}

结果:

{data: {name: "Alice",age: 26,location: "Los Angeles"},isLoading: false
}

示例 2:仅更新部分嵌套字段
如果只需要更新嵌套字段的一部分,比如 data.location,你可以像这样构造 action.payload:

dispatch({type: "UPDATE_USER",payload: { location: "San Francisco" },
});

Reducer 会合并更新 data 中的 location 字段,其余字段保持不变。

结果:

{data: {name: "Alice",age: 25,location: "San Francisco"},isLoading: false
}

为什么这样写?
Redux 状态管理要求 状态是不可变的(Immutable),即不能直接修改现有状态,而需要返回一个新的状态对象。这 种写法利用对象解构(spread syntax)来实现:

创建一个包含旧状态的浅拷贝(…state)。
更新状态中嵌套的某些字段(通过 …state.data 和 …action.payload 合并)。
返回一个全新的状态对象。

注意事项
深层嵌套结构: 如果状态嵌套层级较深,这种方法可能变得冗长。可以考虑使用工具库如 immer 简化嵌套状态的更新。

import produce from "immer";const newState = produce(state, draft => {draft.data.age = 26;draft.data.location = "Los Angeles";
});

覆盖与合并:

如果 action.payload 中的字段与 state.data 中的字段重名,则会覆盖。
如果 action.payload 包含新字段,则会添加到 state.data 中。
性能:

解构操作创建了浅拷贝,对于大对象或深层结构可能会带来性能开销。
如果性能是关键问题,需谨慎处理状态更新。

总结
这段代码是 Redux 中的一种标准做法,用于更新嵌套的状态数据,同时确保状态的不可变性。这种方式简单且直观,但在深层嵌套状态场景中需要额外的工具支持(如 Immer)以提升可维护性和可读性。

相关文章:

react 不可变数据更新(Immutable Update)合并对象 类似与Java 的BeanUtils.copyProperties‌

{ ...state, // 保留原有的 state 的其他部分data: { ...state.data, // 保留 state.data 中的其他字段...action.payload // 使用 action.payload 覆盖 state.data 中需要更新的字段} }这段代码是 Redux 中常见的一种状态更…...

Linux GCC基础用法⑦

在 CentOS 7 系统中使用 GCC 与编写 99 乘法表 一、GCC 简介 GCC(GNU Compiler Collection)是一套功能强大的编程语言编译器,在 CentOS 7 系统中广泛用于编译 C、C等多种编程语言的程序。它能够将源代码转换为可执行文件,让计算…...

PyTorch 切片运算 (Slice Operator)

PyTorch 切片运算 {Slice Operator} 1. [:, -1, :]2. [:, [-1], :]References 1. [:, -1, :] https://github.com/karpathy/llama2.c/blob/master/model.py import torchlogits torch.arange(1, 16) print("logits.shape:", logits.shape) print("logits:\n&…...

SpringSecurity Oauth2 -账号密码实现多因子身份认证

1. 密码策略问题 CREATE TABLE t_storage (id bigint(20) NOT NULL AUTO_INCREMENT COMMENT 自增主键,nameSpace varchar(64) NOT NULL COMMENT 隔离字段,groupId varchar(128) NOT NULL COMMENT 分组,比如不同app,dataId varchar(64) NOT NULL COMMENT 数据存储id…...

【CSS in Depth 2 精译_071】11.4 思考字体颜色的对比效果 + 11.5 本章小结

当前内容所在位置(可进入专栏查看其他译好的章节内容) 第四部分 视觉增强技术 ✔️【第 11 章 颜色与对比】 ✔️ 11.1 通过对比进行交流 11.1.1 模式的建立11.1.2 还原设计稿 11.2 颜色的定义 11.2.1 色域与色彩空间11.2.2 CSS 颜色表示法 11.2.2.1 RGB…...

Y3编辑器文档4:触发器1(对话、装备、特效、行为树、排行榜、不同步问题)

文章目录 一、触发器简介1.1 触发器界面1.2 ECA语句编辑及快捷键1.3 参数设置1.4 变量设置1.5 实体触发器1.6 函数库与触发器复用 二、触发器的多层结构2.1 子触发器(在游戏内对新的事件进行注册)2.2 触发器变量作用域2.3 复合条件2.4 循环2.5 计时器2.6…...

趣味编程:猜拳小游戏

1.简介 这个系列的第一篇以猜拳小游戏开始,这是源于我们生活的灵感,在忙碌的时代中,我们每个人都在为自己的生活各自忙碌着,奔赴着自己所走向的那条路上,即使遍体鳞伤。 但是,生活虽然很苦,也不…...

软件工程 概述

软件 不仅仅是一个程序代码。程序是一个可执行的代码,它提供了一些计算的目的。 软件被认为是集合可执行的程序代码,相关库和文档的软件。当满足一个特定的要求,就被称为软件产品。 工程 是所有有关开发的产品,使用良好定义的&…...

CountDownLatch阻塞后countDown未执行会如何?

背景 某项目封装了 Kafka 消费者 API,根据传递的消费者线程数,创建 N 个消费者线程同时消费对应 topic 的数据,并在线程启动后收集到全局列表中,方便在程序调用 stop 流程时逐个停止。 主控类在创建 Kafka 消费线程时使用了 Cou…...

k8s,operator

相对更加灵活和编程友好的管理“有状态应用”的解决方案,它就是:Operator 会议一下有状态应用: 比如数据库集群,数据挂载需要有顺序维护拓扑关系的应用 使用statefulSet这个对象来描述。 CRD又是什么? Operator的工作…...

使用 pyperclip 进行跨平台剪贴板操作

简介:pyperclip 是一个轻量级的 Python 库,支持在不同操作系统(Windows、macOS、Linux)中进行剪贴板的复制和粘贴。这个库的设计简单易用,非常适合需要频繁进行文本复制粘贴操作的场景。 历史攻略: 使用f…...

20 设计模式之职责链模式(问题处理案例)

一、什么是职责链模式 职责链模式是一种行为型设计模式,它允许将请求沿着处理者的链进行传递,直到有一个处理者能够处理它为止。换句话说,它将请求的发送者和接收者解耦,使得多个对象都有机会处理这个请求,从而避免了将…...

SpringBoot3集成MybatisPlus3和knife4j(swagger3兼容增强版)

针对Swagger2规范和OpenAPI3规范的说明: 在Spring Boot框架中,Knife4j对于服务端将Spring的开放接口解析成Swagger2或者OpenAPI3规范的框架,也是依赖的第三方框架组件。说明如下: Swagger2规范:依赖Springfox项目,该项目目前几乎处于停更状态,但很多老项目依然使用的是该…...

【MIT-OS6.S081作业1.3】Lab1-utilities primes

本文记录MIT-OS6.S081 Lab1 utilities 的primes函数的实现过程 文章目录 1. 作业要求primes (moderate)/(hard) 2. 实现过程2.1 代码实现 1. 作业要求 primes (moderate)/(hard) Write a concurrent version of prime sieve using pipes. This idea is due to Doug McIlroy, in…...

游戏引擎学习第35天

开场介绍 今天的任务是继续改进一个虚拟的瓦片地图系统,使其适合处理更大的世界。我们希望这个系统能管理大范围的游戏世界,其中包含按需存储的小区域。昨天,我们介绍了“内存区域”的概念,用于管理持久性存储。我们计划今天继续…...

learn-(Uni-app)输入框u-search父子组件与input输入框(防抖与搜索触发)

1.父子组件u-search &#xff08;1&#xff09;父组件 <!-- 父组件 --> <template> <div><searchBar change"change" search"search"></searchBar> </div> </template> <script> // 子组件搜索 import…...

设置IMX6ULL开发板的网卡IP的两种方法(临时生效和永久有效两种方法)

设置开发板网卡的IP&#xff0c;有两种方法。 方法一&#xff1a;临时生效 第一种方式是临时设置&#xff0c;只有本次有效&#xff0c;重启后又要重新设&#xff0c;命令为&#xff1a; ifconfig eth0 192.168.5.9设置成功后可以使用ifconfig命令来查看已设置的 IP 地址。 …...

流量转发利器之Burpsuite概述(1)

目录 一、Burpsuite Burp Suite Spider 的主要特点&#xff1a; 在 Burp Suite 中使用 Spider&#xff1a; Spider 的用例&#xff1a; 限制&#xff1a; 声明&#xff1a;学习视频来自b站up主 泷羽sec&#xff0c;如涉及侵权马上删除文章 声明&#xff1a;本文主要用作技…...

Transformer入门(6)Transformer编码器的前馈网络、加法和归一化模块

文章目录 7.前馈网络8.加法和归一化组件9.组合所有编码器组件构成完整编码器 7.前馈网络 编码器块中的前馈网络子层如下图所示&#xff1a; 图1.32 – 编码器块 前馈网络由两个带有ReLU激活函数的全连接层组成。全连接层&#xff08;Fully Connected Layer&#xff09;有时也…...

element-plus中的resetFields()方法

resetFields&#xff08;&#xff09;确实是Element Plus中的方法&#xff0c;该方法主要用于重置表单&#xff0c;将其值重置为初始值&#xff0c;并移除校验结果。以下是对该方法的详细解释&#xff1a; 一、resetFields方法的作用 在Vue3结合Element Plus开发时&#xff0…...

从安防摄像头到直播:手把手教你用ZLMediaKit搭建GB28181视频监控平台

从安防摄像头到直播&#xff1a;手把手教你用ZLMediaKit搭建GB28181视频监控平台 在智能安防和物联网快速发展的今天&#xff0c;视频监控系统的网络化和智能化已成为行业标配。GB28181作为国内视频监控领域的国家标准协议&#xff0c;实现了不同厂商设备间的互联互通。而ZLMed…...

让你的调试日志五彩斑斓:J-Link RTT高级封装技巧(支持中文、浮点数、十六进制)

让你的调试日志五彩斑斓&#xff1a;J-Link RTT高级封装技巧&#xff08;支持中文、浮点数、十六进制&#xff09; 调试是嵌入式开发中不可或缺的一环&#xff0c;而高效的调试工具能显著提升开发效率。J-Link RTT&#xff08;Real Time Transfer&#xff09;作为一种无需额外硬…...

FreeRTOS数据通信避坑指南:为什么我的MessageBuffer总是接收失败?

FreeRTOS消息缓冲区实战&#xff1a;从接收失败到高效通信的深度解析 第一次在FreeRTOS项目中使用MessageBuffer时&#xff0c;我遇到了一个令人抓狂的问题——明明发送端显示消息已成功写入&#xff0c;接收端却总是返回0字节。调试器显示缓冲区非空&#xff0c;但xMessageBuf…...

Java泛型中的List

本文将详细回答java泛型中的listt extends base>使用问题。 在java中&#xff0c;泛型提供了强大的类型安全机制&#xff0c;但其一些特点也容易引起混淆&#xff0c;如listt extends base>开发者经常感到困难。假设sub是base的子类&#xff1a;public class base { }pub…...

STM32F767串口接收不定长数据实战:超时中断与空闲中断的配置与性能对比

1. STM32F767串口接收不定长数据的痛点与解决方案 在嵌入式开发中&#xff0c;处理串口不定长数据就像在餐厅等一份不知道有多少道菜的套餐——你永远不知道下一口是什么&#xff0c;也不知道什么时候结束。STM32F767作为高性能MCU&#xff0c;面对RS485、Modbus等协议时&#…...

uniapp 雪花算法封装类

1. uniapp 雪花算法封装类 雪花算法(SnowFlake)生成64位整数ID,具有全局唯一、趋势递增、高性能等特点,适合分布式系统。 1.1. 解决分布式全局唯一ID的方法 1.1.1. UUID UUID做全局ID的弊端:UUID是由数字加字母的形式组成,无法保持递增,它使得聚簇索引(主键值和行数据…...

DanKoe 视频笔记:每日60分钟改变生活:引言与概述

在本教程中&#xff0c;我们将学习如何通过每天投入60分钟来系统地改变生活。我们将探讨常规的重要性&#xff0c;并介绍三个核心习惯&#xff0c;帮助你重新掌控精力、提升财务状况、改善健康以及获得内心的清晰。 每日60分钟改变生活&#xff1a;2&#xff1a;常规的必要性 …...

WAN2.2文生视频效果实测对比:不同SDXL风格对动态连贯性的影响分析

WAN2.2文生视频效果实测对比&#xff1a;不同SDXL风格对动态连贯性的影响分析 最近在玩WAN2.2文生视频模型时&#xff0c;我发现一个挺有意思的现象&#xff1a;虽然模型本身很强大&#xff0c;但生成的视频效果好不好&#xff0c;很大程度上取决于你选的“风格”。WAN2.2集成…...

基于STM32的智能药箱系统开发实战:从硬件搭建到云端互联

1. 为什么需要智能药箱 记得去年我奶奶因为忘记吃药导致血压飙升住院&#xff0c;当时我就在想&#xff0c;如果能有个自动提醒吃药的装置该多好。后来发现这个问题其实困扰着很多家庭——据统计&#xff0c;65岁以上老年人中&#xff0c;有超过60%存在漏服、错服药物的情况。这…...

mxbai-embed-large-v1 应用开发:从零构建智能文档检索系统

mxbai-embed-large-v1 应用开发&#xff1a;从零构建智能文档检索系统 1. 项目概述与核心价值 mxbai-embed-large-v1 是由 mixedbread-ai 开发的高性能文本嵌入模型&#xff0c;在 MTEB 基准测试中超越了 OpenAI text-embedding-3-large 等商业模型。该模型能够将文本转换为高…...