当前位置: 首页 > 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…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

LRU 缓存机制详解与实现(Java版) + 力扣解决

&#x1f4cc; LRU 缓存机制详解与实现&#xff08;Java版&#xff09; 一、&#x1f4d6; 问题背景 在日常开发中&#xff0c;我们经常会使用 缓存&#xff08;Cache&#xff09; 来提升性能。但由于内存有限&#xff0c;缓存不可能无限增长&#xff0c;于是需要策略决定&am…...

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...