NGXS中patchState与setState的用法区别及适用场景

作为NGXS里常用的状态更新方法，这俩的核心差异其实就是全量替换 vs 部分合并，我给你拆解清楚：

1. 核心行为区别 #

• setState: 是对当前状态的完全替换。你必须传入一个完整的状态对象，哪怕只改一个属性，也要手动保留其他所有状态字段（比如用扩展运算符...state），否则未被包含的属性会直接从状态中消失。
• patchState: 是对当前状态的部分更新。你只需要传入要修改的属性键值对，NGXS会自动把这些新值合并到现有状态里，其他未提及的属性会原封不动保留。

2. 适用场景 #

• 用setState的情况:
  • 当你需要一次性修改多个状态属性，且需要对状态做复杂的重组（比如过滤数组、修改嵌套对象的多个层级）；
  • 当你需要完全控制最终的状态结构，确保没有遗漏任何字段的时候。
• 用patchState的情况:
  • 当你只需要更新单个或少数几个状态属性，逻辑简单；
  • 想写更简洁的代码，避免手动解构状态导致的误删属性风险。

代码对比示例 #

setState写法 #

const state = ctx.getState(); 
let data = this.service.list(); 
ctx.setState({ ...state, feedAnimals: data });

这里必须先获取当前状态，通过...state保留原有所有属性，再替换feedAnimals——如果忘了写...state，状态就只剩feedAnimals了，其他属性会被清空，这是新手很容易踩的坑。

patchState写法 #

let data = this.service.list(); 
ctx.patchState({ feedAnimals: data });

不需要手动获取和解构状态，NGXS自动帮你合并新值到现有状态，代码更简洁，也规避了误删属性的风险。

额外提一句：如果要更新深层嵌套的状态属性，patchState的浅合并就不够用了，这时候可以用setState配合扩展运算符做深层解构，或者结合NGXS的Immer插件来更优雅地处理嵌套更新。

内容的提问来源于stack exchange，提问作者Александр Шатилов