NGXS оператор обновления состояния элемента - PullRequest
Новая
       8

NGXS оператор обновления состояния элемента

0 голосов
/ 11 марта 2019

Я пытаюсь использовать операторы состояния NGXS внутри моего приложения, но у меня возникают проблемы с поиском хороших примеров того, как использовать их для чуть более сложных обновлений.

Например, документация NGXS показывает пример обновления этого состояния: 

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

Чтобы изменить имена одной из панд, он использует оператор состояния "updateItem" NGXS, например: 

@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, чтобы найти правильное животное, используя идентификатор, а затем обновить имя?

1 Ответ

0 голосов
/ 12 марта 2019

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

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