如何在 NGXS 中使用 patchState 与 setState？

Posted 2023-02-19

【中文标题】如何在 NGXS 中使用 patchState 与 setState？

【英文标题】：How to use patchState vs setState in NGXS?

【发布时间】：2018-10-31 22:38:49

【问题描述】：

我正在学习 ngxs，但我不明白什么时候应该使用 patchState 和 setState？有什么区别？

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

对比

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

【参考方案1】：

它不能正常工作

const state = context.getState();
state.permissions = action.payload;
context.setState(state);

---

它工作正常

const state = context.getState();
state.permissions = action.payload;
context.setState( ...state );

---

它工作正常

const state = context.getState();
state.permissions = action.payload;
context.patchState(state);

---

所有的例子都更新了状态...但是第一个例子并没有激活 observable 来改变状态，因为状态是不可变的，这意味着你不能简单地编辑它并保存它，它不可编辑，您始终必须克隆旧状态，编辑新副本并保存此新状态。 patchState 只为你做。

【讨论】：

天哪！我已经在第一个问题上苦苦挣扎了一个小时。希望我能给你 10 票来指出这一点。它是一个错误还是它应该如何工作？

由于某种原因这不起作用：context.setState(...state, someProp: action.payload)。你能解释一下为什么吗？文档上就是这样

...state, ...someProp: action.payload 试试这个

@dasfdsa 是的，它应该是这样工作的。 NGXS 检测状态对象身份的变化。当分配给state 的对象更改时，标识会更改。因此，如果我执行state.property = 'some new value;，那么即使state 已被修改，它仍然是同一个变量。如果我执行state = 并将其传递给setState()，那么它将注册为更改。

【参考方案2】：

这两段代码是等价的。 patchState 只是 setState(...state, ... 代码的简写版本。

在未来，patchState 很可能会演变为一个更有用的不变性助手，包括相等测试（即，只有在补丁实际更改任何值时才会更改状态）和补丁运算符（这仍在讨论中）。

我建议使用 patchState 以保持整洁并利用即将推出的功能。

【讨论】：

感谢您的回复！但是在源代码 [link] (github.com/ngxs/store/blob/…) patchState 中克隆对象。性能怎么样？

阅读关于性能不变性的好处。与在每个更改检测周期中遍历变异对象以检查更改相比，克隆对象并不昂贵。在 YouTube 上查找 Performance Tuning Angular，那里有很多很棒的视频（我推荐 Minko Gechev 的视频）