当前位置: 首页 > 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)以提升可维护性和可读性。

http://www.lryc.cn/news/502159.html

相关文章:

  • Linux GCC基础用法⑦
  • PyTorch 切片运算 (Slice Operator)
  • SpringSecurity Oauth2 -账号密码实现多因子身份认证
  • 【CSS in Depth 2 精译_071】11.4 思考字体颜色的对比效果 + 11.5 本章小结
  • Y3编辑器文档4:触发器1(对话、装备、特效、行为树、排行榜、不同步问题)
  • 趣味编程:猜拳小游戏
  • 软件工程 概述
  • CountDownLatch阻塞后countDown未执行会如何?
  • k8s,operator
  • 使用 pyperclip 进行跨平台剪贴板操作
  • 20 设计模式之职责链模式(问题处理案例)
  • SpringBoot3集成MybatisPlus3和knife4j(swagger3兼容增强版)
  • 【MIT-OS6.S081作业1.3】Lab1-utilities primes
  • 游戏引擎学习第35天
  • learn-(Uni-app)输入框u-search父子组件与input输入框(防抖与搜索触发)
  • 设置IMX6ULL开发板的网卡IP的两种方法(临时生效和永久有效两种方法)
  • 流量转发利器之Burpsuite概述(1)
  • Transformer入门(6)Transformer编码器的前馈网络、加法和归一化模块
  • element-plus中的resetFields()方法
  • 【过滤器】.NET开源 ORM 框架 SqlSugar 系列
  • Jmeter Address already in use: connect 解决
  • C#常见错误—空对象错误
  • Leetcode数学部分笔记
  • 微信小程序web-view 嵌套h5界面 实现文件预览效果
  • 【汽车】-- 燃油发动机3缸和4缸
  • 轻量级的 HTML 模板引擎
  • Mysql | 尚硅谷 | 第02章_MySQL环境搭建
  • Maven学习(传统Jar包管理、Maven依赖管理(导入坐标)、快速下载指定jar包)
  • CTF: 在本地虚拟机内部署CTF题目docker
  • 视频推拉流EasyDSS无人机直播技术巡查焚烧、烟火情况