У меня есть следующий эпический файл, который имеет следующую функцию:
Мне нужно вызвать действие из onUndo, но, как видно, action.showwarnToast уже отправлен, из-за чего другое действие не отправляется.
export const makeXDiningReservation = createDataEpic({
name: "makeXDiningReservation",
apiPath: (action, state) =>
generatePath("pathToApi", {
}),
apiOptions: (action, state) => {
return {
headers: {
"Client-Id": "ship",
"Content-Type": "application/json",
},
body: JSON.stringify(data),
};
},
successActionCreator: (
response,
state,
action,
{ getIntl, ...rest },
...params
) => {
if (isDailyPlannerEnabled && eventOverlap) {
return [
Actions.throttledScheduleRefresh({ force: true }),
Actions.diningReservationSuccessOnShip({
...action,
reservationID: response.bookingId,
}),
Actions.navigateReplace({
pathname: generatePath("path", {
restaurantKey: action.restaurantKey,
}),
state: {
action,
response: { ...response, reservationID: response.bookingId },
},
}),
Actions.showWarnToastMessage(
getIntl(state).formatMessage(
strings.activityOverlapsWithAnotherActivity,
),
{
color: "warning",
variant: "standard",
showUndo: true,
undoData: response,
onUndo: (data) => {
return [
Actions.navigatePush({
pathname: generatePath("/dailyPlanner"),
}),
modalActivityActionDrawerActions.setModalState(true),
];
},
},
),
];
} else {
return [
Actions.diningReservationSuccessOnShip({
...action,
reservationID: response.bookingId,
}),
Actions.navigateReplace({
pathname: generatePath("/dining/:restaurantKey/confirm", {
restaurantKey: action.restaurantKey,
}),
state: {
action,
response: { ...response, reservationID: response.bookingId },
},
}),
];
}
},
failureActionCreator: (error, state, action) => [
Actions.epicError(makeXDiningReservation.name, error),
stopSubmit(action.form, { _error: error }),
],
triggeringActions: [START_DINING_RESERVATION],
type: REQUEST_TYPE.POST_JSON,
waitingIdentifier: "DINING_RESERVATION",
});
Я пытался отправить вот так, но это не сработало. Помогите мне это исправить, так как я не уверен, как это будет работать, в конечном итоге я хочу, чтобы это было сделано с эпической стороны.
onUndo: (data) => {
return [
Actions.navigatePush({ pathname: generatePath("/dailyPlanner") }),
modalActivityActionDrawerActions.setModalState(true),
];
};
🤔 А знаете ли вы, что...
JavaScript позволяет создавать мобильные приложения для iOS и Android с использованием фреймворков, таких как React Native и NativeScript.
У эпиков нет свободного доступа к функции отправки хранилища, поскольку именно это делают обработчики successActionCreator и failureActionCreator под капотом, но я бы предложил создать thunk, который это делает. Новый Thunk будет отправлять действие showWarnToastMessage, чтобы инициировать всплывающее уведомление, и может обернуть действия отмены в вызов thunkApi.dispatch.
Пример:
import { createAsyncThunk } from '@reduxjs/toolkit';
export const warnUndoToast = createAsyncThunk(
"toasts/warnUndoToast",
({ message, undoData, undoActions = [] }, { dispatch }) => {
dispatch(Actions.showWarnToastMessage(
message,
{
color: "warning",
variant: "standard",
showUndo: true,
undoData,
onUndo: (data) => {
undoActions.forEach(dispatch);
},
},
));
}
);
Теперь вместо того, чтобы напрямую отправлять действие Actions.showWarnToastMessage, вы будете отправлять это новое действие toastWarnUndo в эпике, передавая соответствующие реквизиты.
export const makeXDiningReservation = createDataEpic({
....
successActionCreator: (
response,
state,
action,
{ getIntl, ...rest },
...params
) => {
...
if (isDailyPlannerEnabled && eventOverlap) {
return [
...,
warnUndoToast({
message: getIntl(state).formatMessage(
strings.activityOverlapsWithAnotherActivity,
),
undoData: response,
undoActions: [
Actions.navigatePush("/dailyPlanner"),
modalActivityActionDrawerActions.setModalState(true),
],
}),
];
} else {
return [
...
];
}
},
...,
});