NGXS updateItem 状态算子答案

【问题标题】：NGXS updateItem state operatorNGXS updateItem 状态算子
【发布时间】：2019-08-02 04:49:54
【问题描述】：

我正在尝试在我的应用程序中使用 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 找到正确的动物，然后更新名称？

【问题讨论】：

标签： ngxs

【解决方案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 }))
    })
  );
}

【讨论】：