我们如何从一个动作中派发动作

Question

我有以下史诗文件，它具有以下功能，

我需要从 onUndo 调用操作，但正如所见，action.showwarnToast 已经调度，因为另一个操作没有调度

export const makeXDiningReservation = createDataEpic({
  name: "makeXDiningReservation",
  apiPath: (action, state) =>
    generatePath("/dining/v2.0.0/reservation?fidelioId=:fidelioId", {
      fidelioId: userInfoPrincipal(state),
    }),
  apiOptions: (action, state) => {
    return {
      headers: {
        "Client-Id": "ship",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(getXDiningReservationBody(action, state)),
    };
  },
  options: {
    filter: (action, state) =>
      ["CAU", "HAL"].includes(process.env.REACT_APP_FLEET_CODE) &&
      network(state) === NETWORK_STATE.SHIP &&
      appFeatureFlags(state)?.[FEATURE_FLAGS.X_DINING],
  },
  successActionCreator: (
    response,
    state,
    action,
    { getIntl, ...rest },
    ...params
  ) => {
    let userEvents = userSchedule(state);
    const requestBody = getXDiningReservationBody(action, state);
    const isDailyPlannerEnabled =
      appFeatureFlags(state)[FEATURE_FLAGS.DAILY_PLANNER];
    const eventOverlap =
      true || isEventOverlapping(userEvents, requestBody.dateTime, 90);

   if (isDailyPlannerEnabled && eventOverlap) {
      return [
        Actions.throttledScheduleRefresh({ force: true }),
        Actions.diningReservationSuccessOnShip({
          ...action,
          reservationID: response.bookingId,
        }),
        Actions.navigateReplace({
          pathname: generatePath("/dining/:restaurantKey/confirm", {
            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),
  ];
};

Answer 1

史诗无法自由访问商店的调度功能，因为这是

successActionCreator

和

failureActionCreator

处理程序在幕后所做的事情，但我建议创建一个 thunk 来实现这一点。新的 Thunk 将调度

showWarnToastMessage

操作来启动 toast，并且可以将撤消操作包装在

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 [
        ...
      ];
    }
  },
  ...,
});