Блог

Я пытаюсь использовать операторы состояния 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 использует лямбда-выражение в своем первом параметре для поиска правильного объекта в массиве и заменяет его на с объектом во втором параметре.

Как бы вы сделали это с массивом, содержащим сложные объекты, из которых вы хотели изменить значение только одного свойства? Например, что, если бы мое состояние было таким:

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

Как бы я использовал функцию updateItem, чтобы найти правильное животное по идентификатору, а затем обновить имя?

Приведенный вами пример состояния по умолчанию имеет недопустимый синтаксис, но я думаю, что я понял, что вы намеревались предоставить. Что-то вроде этого:

 @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 }))
    })
  );
}