Как правильно запустить перезагрузку API из редуктора/действия?

У меня есть довольно сложное приложение, которое связывается с сервером через веб-сокет (для обновления объекта) и http (для получения исходного объекта).

Но я столкнулся со следующей ситуацией:

  1. Получить из сервиса все исходные объекты
  2. Веб-сокет просит обновить объект, которого нет в списке
  3. Сделайте еще один вызов службы, чтобы перезагрузить объекты.

Итак, в основном у меня есть это состояние:

export const initialState: IMatchStore = {
  loading: false,
  needReload: true,
  matches: [],
};

И несколько селекторов, например:

export const getAll = createSelector(
  matchSelector,
  ({ matches }: IMatchStore) => unflatMatches(matches),
);

export const isLoading = createSelector(
  matchSelector,
  ({ loading }: IMatchStore) => loading,
);

export const reload = createSelector(
  matchSelector,
  ({ needReload, loading }: IMatchStore) => !loading && needReload,
);

Так что в основном, когда needReload === true это означает, что мне нужно перезагрузить базу (это обнаруживается на редюсере, если match не существует в списке).

Мой вопрос: как правильно поступить в этой ситуации? В настоящее время я делаю на службе, например:

this.store.select(reload).pipe(filter(Boolean)).subscribe(() => this.load());

Но я чувствую, что его можно было бы улучшить и обернуть внутри какой-нибудь effect


Обновление:

Мне удалось создать эффект, наблюдая за ActionTypes.Update, но он все еще выглядит не так, как мне кажется :p

@Effect()
login$: Observable<Action> = this.actions$.pipe(
    ofType(ActionTypes.Update),
    withLatestFrom(this.store.select(reload)),
    filter(([, needRealod]) => needRealod),
    switchMapTo(
      forkJoin( /** HTTP stuff */ ).pipe(
        map(([a, b]) => new Init(a, b)),
      ),
    ),
  );

person Fabio Picheli    schedule 09.01.2019    source источник
comment
Просто для двойной проверки: вы используете switchMapTo, вы хотите вызывать HTTP только один раз, а затем возвращать одно и то же действие для всех дальнейших ActionTypes.Update   -  person Maksim Romanenko    schedule 10.01.2019


Ответы (1)


Обновленный ответ, который вы опубликовали, на мой взгляд, правильный путь.

  • Это держит ваше приложение в чистоте
  • Эффект можно легко проверить

Другой пример см. в разделе Начать использовать для этого ngrx/effects.

person timdeschryver    schedule 09.01.2019