Слушайте отправленные действия в Redux - PullRequest
Новая
       36

Слушайте отправленные действия в Redux

0 голосов
/ 15 ноября 2018

Мне интересно, есть ли способ прослушать действие, которое было успешно отправлено в избыточном количестве?

В библиотеке управления состоянием ngxs для Angular я могу сделать следующее: 

ngOnInit() {
  this.actions$
    .pipe(
      ofActionSuccessful(AddedThingToDo),
      map((event: AddedThingToDo) => event.thingToDo),
      tap(thingToDo => console.log('Action was successfully dispatched'))
    )
   .subscribe();
}

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

Я использую ng-redux для Angular 1.x, однако я думаю, что принцип должен оставаться таким же, как и для реагирующего редукса.

Единственный способ, которым я мог обойти это, - это обратный вызов в моих действиях, но это выглядит очень неправильно: 

export const addThingToDo = (model: IThingToDo, onSuccess?: (model: IThingToDo) => void) =>
  async (dispatch: Dispatch) => {
    dispatch(addingThingToDo());
    try {
      const createdItem = await api.post<IThingToDo>(url, model);
      dispatch(addedThingToDo(createdItem));
      if (onSuccess) {
        onSuccess(createdItem);
      }
    }
    catch (ex) {
      dispatch(addThingToDoFailure(ex));
    }
  };

1 Ответ

0 голосов
/ 19 ноября 2018

Оказывается, redux-thunk поддерживает возврат обещаний, поэтому я могу просто вернуть обещание, а не использовать метод обратного вызова. 

export const addThingToDo = (model: IThingToDo) =>
  async (dispatch: Dispatch): Promise<IThingToDo> =>
    await new Promise<IThingToDo>(async (resolve, reject) => {
      dispatch(addingThingToDo());
      try {
        const newItem = await api.post<IThingToDo>(url, model);
        dispatch(addedThingToDo(newItem));
        resolve(newItem);
      } catch (ex) {
        dispatch(addThingToDoFailure(ex));
        reject(ex);
      }
    });


this.addThingToDo(thingToDo)
  .then(t => navigateTo(`/things-to-do/${t.id}`));
...