NGXS updateItem 状态操作符

Question

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

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

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

为了更改其中一只 Pandas 的名称，它使用 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 }))
    })
  );
}