NGXS updateItem 状态操作符

Question

我正在尝试在我的应用程序中使用 NGXS 状态运算符，但是我无法找到有关如何将它们用于稍微复杂的更新的好的示例。

例如，NGXS 的文档显示了更新此状态的示例：

@State<AnimalsStateModel>({
  name: 'animals',
  defaults: {
    zebras: ['Jimmy', 'Jake', 'Alan'],
    pandas: ['Michael', 'John']
  }
})

为了更改其中一只熊猫的名称，它使用 NGXS 的“updateItem”状态运算符，如下所示：

@Action(ChangePandaName)
  changePandaName(ctx: StateContext<AnimalsStateModel>, { payload }: ChangePandaName) {
    ctx.setState(
      patch({
        pandas: updateItem(name => name === payload.name, payload.newName)
      })
    );
  }

在此示例中，updateItem 函数在其第一个参数中使用 lambda 表达式来查找数组中的正确对象，并将其替换为第二个参数中的对象。

您将如何使用包含您只想更改一个属性值的复杂对象的数组来执行此操作？例如，如果我的状态是这样的：

@State<AnimalsStateModel>({
      name: 'animals',
      defaults: {
        zebras: [{1, 'Jimmy'} , {2, 'Jake'}, {3, 'Alan'}],
        pandas: [{1, 'Michael'}, {2, 'John'}]
      }
    })

我将如何使用 updateItem 函数通过 ID 定位正确的动物，然后更新名称？

Answer 1

您提供的默认状态示例是无效语法，但我想我明白您打算提供的内容。像这样的东西：

@State<AnimalsStateModel>({
  name: 'animals',
  defaults: {
    zebras: [{id: 1, name: 'Jimmy'} , {id: 2, name: 'Jake'}, {id: 3, name: 'Alan'}],
    pandas: [{id: 1, name: 'Michael'}, {id: 2, name: 'John'}]
  }
})

updateItem还接受状态运算符作为第二个参数，因此您可以patch再次使用该运算符来修改项目。您的操作将如下所示：

@Action(ChangePandaName)
changePandaName(ctx: StateContext<AnimalsStateModel>, { payload }: ChangePandaName) {
  ctx.setState(
    patch({
      pandas: updateItem(item=> item.id === payload.id, patch({ name: payload.newName }))
    })
  );
}