我有下面的史诗文件,这是有以下功能,

我需要从onUndo调用action,但是正如看到的,action. showwarnToast已经被分派,因为另一个action没有分派

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

推荐答案

史诗没有免费访问store 的调度功能,因为这是successActionCreatorfailureActionCreator处理程序在引擎盖下做的,但我建议创建一个thunk.新的Thunk将分派showWarnToastMessage动作来启动 cogo toast ,并且可以将undo撤消动作包装在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动作,传递适当的props .

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

Javascript相关问答推荐

深嵌套的ng-container元素仍然可以在Angular 布局组件中正确渲染内容吗?

如何在RTK上设置轮询,每24小时

如何解决CORS政策的问题

useNavigation更改URL,但不呈现或显示组件

拖放仅通过 Select 上传

如何解决chrome—extension代码中的错误,它会实时覆盖google—meet的面部图像?'

未捕获错误:在注销后重定向到/login页面时找不到匹配的路由

PrivateRoute不是路由组件错误

单击ImageListItemBar的IconButton后,在Material—UI对话框中显示图像

处理时间和字符串时MySQL表中显示的日期无效

你怎么看啦啦队的回应?

无法从NextJS组件传递函数作为参数'

JS,当你点击卡片下方的绿色空间,而它是在它的背后转动时,

使用Promise.All并发解决时,每个promise 的线性时间增加?

无法避免UV:flat的插值:非法使用保留字"

判断函数参数的类型

Clip-Path在网页浏览器(Mozilla、Edge、Chrome)上不能正常工作,但在预览版Visual Code Studio HTML、CSS、JS上却能很好地工作

使用API调用的VUE 3键盘输入同步问题

当S点击按钮时,我如何才能改变它的样式?

将Windows XP转换为原始数据以在html前端中显示