Обновить свойство объекта хранилища NGRX / Redux - PullRequest
Новая
       23

Обновить свойство объекта хранилища NGRX / Redux

0 голосов
/ 14 мая 2018

Сценарий в моем приложении Angular: пользователь нажимает на «ShowDetails», на котором должна отображаться форма с подробной информацией о выбранном элементе, который я уже загрузил при запуске, но не с деталями, и я не хочу загружать всеподробнее OnInit.

Я могу успешно отправить действие, но я хочу получить эффект, который должен получить идентификатор (я полагаю, из магазина), сделать http-вызов, получить сведения об этом элементе и добавить его.в качестве свойства для основного элемента, чтобы последующие вызовы больше не переходили в службу.Я могу сделать все это.

Мой вопрос заключается в том, что я не уверен, как обновить свойство главного объекта в хранилище, не изменяя исходный объект в хранилище (что, как я знаю, не следует), поэтому последующеезвонки не звоните в службу снова.Или как мне обновить свойство в Effect, прежде чем оно попадет в Reducer для окончательной обработки?В идеале я хотел бы показать пустую страницу формы со значком загрузки, прежде чем данные вернутся.

1 Ответ

0 голосов
/ 14 мая 2018

Ваш эффект должен выбрать, находится ли запрашиваемые данные уже в хранилище, и только если это не так, он должен инициировать запрос AJAX для их извлечения.И в обоих случаях, когда данные готовы, отправьте действие «готовность данных».

Вот как я делал это в прошлом: 

export class MyEffects {
  constructor(private store$: Store<fromStore.AppState>,
    private action$: Actions,
    private backend: MyService,
  ) { }

  @Effect()
  fetchData$ = this.action$.ofType<fromActions.FetchDataAction>(fromActions.FETCHDATA).pipe(
    withLatestFrom(this.store$.select(x => x.main.cacheMap)),
    switchMap(([action, cacheMap]) => this.fetchData(action.id, cacheMap)),
    map(r => r new fromActions.DataReadyAction(r)),
  );

  fetchData(id: string, cacheMap: { [key: string]: Item }): Observable<Item> {
    if (!cacheMap[id]) {
      return this.backend.getData(id);
    } else {
      return of({ ...cacheMap[id] });
    }
  }
}

Обратите внимание на несколько вещей:

  • В конструктор класса эффектов вставлено хранилище.
  • Сам эффект использует withLatestFrom для получения последней копии состояния.
  • Функция fetchData выбирает функциюотправлять ли запрос AJAX или немедленно возвращаться на основе наличия запрошенного ключа в переменной cacheMap, которая является частью хранилища.

Когда действие DataReady сокращено, новоеэлемент помещается в кеш-карту состояния, чтобы последующие действия FetchData не запрашивали его повторно.

...