NGXS updateItem 状态算子

Posted 2023-02-19

【中文标题】NGXS updateItem 状态算子

【英文标题】：NGXS updateItem state operator

【发布时间】：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 找到正确的动物，然后更新名称？

【参考方案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 ))
    )
  );