Слушайте отправленные действия в Redux
Мне интересно, есть ли способ прослушать действие, которое было успешно отправлено в редуксе?
В библиотеке управления состоянием 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 ответ
Решение
Оказывается 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}`));