Angular：改变 NGXS 选择器数据是在没有动作的情况下修改状态

编程问答 2022-05-22

问题描述

我使用 NGXS 作为我的状态管理库。我有一个用户状态和一个选择器来获取用户列表。我还有一个要更新用户名的组件。我想要这样做的方法是复制我从选择器 observable 中获得的用户列表，并将 ngModel 与输入一起使用。

这是一个 example of what I am trying to achieve。

还有我的状态选择器的一个片段

@Selector()
static getAll(state: User[]) {
   return [...state];
}

问题是修改从选择器接收到的数据，即使没有分派 Action，也会修改实际状态。我理解它是因为我正在改变我直接从状态中获得的对象，但选择器不应该是只读的吗？

所以我的问题是

  1. 我认为选择器应该是只读的，不能以任何方式修改状态。不是吗？
  2. 即使将选择器更改为 return state.map(user=>Object.assign({},user)) 也不起作用。是定义选择器的正确方法吗？
  3. 还是我完全遗漏了有关如何使用选择器的内容？

解决方法

回答您的问题：

  1. 我认为选择器应该是只读的，不能以任何方式修改状态。不是吗？

选择器应该保持不变，但 NGXS 中没有任何东西实际强制执行这一点。所以，不，他们不是。如果您选择这样做，则由您来保持不变。

  1. 即使将选择器更改为返回 state.map(user=>Object.assign({},user)) 也不起作用。是定义选择器的正确方法吗？

什么不起作用？

  1. 还是我完全遗漏了有关如何使用选择器的内容？

可能不会。

您似乎认为从选择器返回的任何内容都是只读的……事实并非如此。在开发模式下，它会抱怨并说它是只读的，但在生产中，它会让你随心所欲地改变。我怀疑您正在改变选择器在组件中返回的内容，或者只是“上游”（甚至在另一个选择器中）。

所以，我只是在 stackblitz 中查看了您的示例。您确实在使用双向数据绑定进行变异：[(ngModel)]="user.name"。你需要解决这个问题。

angularangularangular-state-managmementjavascriptngxs