更新数组内对象的 NGXS 状态

Question

我将 NGXS 状态定义为数组。

interface Sample {
 name: string;
 age: number;
}

@State<Sample[]>({
  name: 'samples',
  defaults: [] as Sample[]
})
@Injectable()
export class SampleState {
}

现在假设我的现有状态为 [{name:'abc', age: 1}, {name: 'def', age:2}]

我如何添加一个操作来根据名称修改样本的年龄并更新状态。如果它是一个对象，我可以使用简单的 patchState，但这里的状态是一个数组，所以我不确定。

  @Action(SampleActions.UpdateAge)
  updateAge(context: StateContext<Sample[]>, action: SampleActions.UpdateAge): void {    
  }

这是我在 SampleActions 中定义的动作

  export class UpdateAge{
    static readonly type = '[Sample] Update Age';
    constructor(public name: string, public age: number) {}
  }

谢谢。

Answer 1

NGXS 中最简单的方法是使用 State Operators - 在本例中，使用提供的 updateItem 运算符。

例如稍微重构一下状态模型

interface SamplesStateModel { 
  samples: Sample[];
}

@State<SamplesStateModel>({
   name: 'samples' 
  }
)
export class SamplesState {

   @Action(SampleActions.UpdateAge)
   updateAge(context: StateContext<Sample[]>, action: SampleActions.UpdateAge): void { 
     const updatedSample: Sample = { name: action.name, age: action.age };
     ctx.setState(
        patch({
          samples: updateItem<Sample>(sample => sample.name === action.name, updateSample)
        })
     );
   }
}

更新数组内对象的 NGXS 状态

Update NGXS state for an object inside array

ngxs