redux saga 不适用于具有多个 saga 的 redux-toolkit

Question

您好，我正在尝试使用新的 redux 工具包实现 saga，但不幸的是，当我启用新的 slice reducers saga 时，它并没有触发 saga。

rootSaga.ts

export function* rootSaga() {
  yield all([
    fork(userSaga),
    fork(vehicleSaga),
    fork(locationSaga),
    fork(departmentSaga),
    fork(vehicleTypeSaga),
    fork(authSaga),
    fork(materialSaga),  <---- others are normal old redux sagas.
    fork(workTypeSaga),  <----- Slice saga make with createSlice.
  ]);
}

当我从下面的代码中删除 workTypesaga 时，它可以正常工作。当将 workTypeSaga 直接传递给 sagaMiddleware.run() 时，它也可以工作。但是像这样的多个 sagas 是行不通的。

我知道组合多个 saga 并使用工具包运行存在问题。但是现在有什么解决办法吗？

编辑： 这是 workTypesaga.ts 文件。是的，很长。

import { put, takeLatest } from "redux-saga/effects";
// import {
//   getWorkTypesStart,
//   getWorkTypesSuccess,
//   getWorkTypesError,
//   createWorkTypeStart,
//   createWorkTypeSuccess,
//   createWorkTypeError,
// } from "@toilcrew/common/reducers/slices/workTypeSlice";
import * as WorkTypeSlice from "@toilcrew/common/reducers/slices/workTypeSlice";
import { routes } from "../config";
import apiService from "../services/common.services";
import commonServices from "../services/common.services";
import { selectWorkTypePageNo } from "../selectors/workType.selector";
import { useSelector } from "react-redux";

function* getMultipleWorkTypeSaga(action) {
  console.log("action", action);
  const params = {
    method: "get",
    // route: `${routes.workType}?order_by=v_id&${addQueries}`,
    route: routes.workType,
    data: action.payload,
  };

  try {
    const res = yield commonServices(params);
    yield put(WorkTypeSlice.getWorkTypesSuccess(res));
  } catch (error) {
    yield put(WorkTypeSlice.getWorkTypesError(error));
    console.log(error.response.data);
  }
}

function* createWorkTypeSaga(action) {
  console.log("action", action.payload);
  const params = {
    method: "post",
    // route: `${routes.workType}?order_by=v_id&${addQueries}`,
    route: routes.workTypeBulk,
    data: action.payload,
  };

  try {
    const res = yield apiService(params);
    yield put(WorkTypeSlice.createWorkTypeSuccess("message.vehicleCreated"));
    // const pageno = yield select(pagenoSelector);
    yield put(WorkTypeSlice.getWorkTypesStart(1));
  } catch (error) {
    console.log(error.response.data);
    yield put(WorkTypeSlice.createWorkTypeError(error));
  }
}

function* getSingleWorkTypeSaga({ payload }) {
  console.log("getWorkTypeSaga - payload: ", payload);

  const params = {
    method: "get",
    route: `${routes.workType}/${payload}`,
  };

  try {
    //@ts-ignore
    const workType = yield call(commonServices, params);
    console.log("from update sage", workType);
    yield put(WorkTypeSlice.getSingleWorkTypeSuccess(workType));
  } catch (error) {
    console.log(error?.response?.data);
    yield put(WorkTypeSlice.getSingleWorkTypeError(error?.response?.data));
  }
}

function* updateWorkTypeSaga({ payload }) {
  console.log("getWorkTypeSaga - payload: ", payload);

  const params = {
    method: "patch",
    route: routes.workType,
    data: payload,
  };

  try {
    //@ts-ignore
    const vehicle = yield call(vehicleServices, params);
    yield put(WorkTypeSlice.updateWorkTypeSuccess("message.updateSuccess"));
    const pageno = yield useSelector(selectWorkTypePageNo);
    yield put(WorkTypeSlice.updateWorkTypeError(pageno));
  } catch (error) {
    console.log(error?.response?.data);
    yield put(WorkTypeSlice.updateWorkTypeError("error.500Message1"));
  }
}

function* toggleSingleWorkTypeStatusSaga({ payload }) {
  console.log("toggleWorkTypeSaga - payload: ", payload);

  const params = {
    method: "patch",
    route: `${routes.workType}/${payload.wt_id}`,
    data: payload,
  };

  try {
    //@ts-ignore
    const vehicle = yield call(vehicleServices, params);
    yield put(WorkTypeSlice.updateWorkTypeSuccess("message.updateSuccess"));
    const pageno = yield useSelector(selectWorkTypePageNo);
    yield put(WorkTypeSlice.getWorkTypesStart(pageno));
  } catch (error) {
    console.log(error?.response?.data);
    yield put(WorkTypeSlice.updateWorkTypeError("error.500Message1"));
  }
}

function* deleteSingleWorkTypeSaga({ payload }) {
  console.log("deleteworkTypeSaga - payload: ", payload);

  const params = {
    method: "delete",
    route: `${routes.workType}/${payload}`,
    // data: payload,
  };
  console.log("delete url: ", params.route);
  try {
    //@ts-ignore
    const vehicle = yield call(commonServices, params);
    yield put(
      WorkTypeSlice.deleteSingleWorkTypeSuccess("message.deleteSuccess")
    );
    const pageno = yield useSelector(selectWorkTypePageNo);
    yield put(WorkTypeSlice.getWorkTypesStart(pageno));
  } catch (error) {
    console.log(error?.response?.data);
    yield put(WorkTypeSlice.deleteSingleWorkTypeError("error.500Message1"));
  }
}

function* workTypeSaga() {
  yield takeLatest(WorkTypeSlice.createWorkTypeStart.type, createWorkTypeSaga);
  yield takeLatest(
    WorkTypeSlice.getWorkTypesStart.type,
    getMultipleWorkTypeSaga
  );
  yield takeLatest(
    WorkTypeSlice.getSingleWorkTypeStart.type,
    getSingleWorkTypeSaga
  );
  yield takeLatest(WorkTypeSlice.updateWorkTypeStart.type, updateWorkTypeSaga);
  yield takeLatest(
    WorkTypeSlice.toggleSingWorkTypeStatusStart.type,
    toggleSingleWorkTypeStatusSaga
  );
  yield takeLatest(
    WorkTypeSlice.deleteSingleWorkTypeStart.type,
    deleteSingleWorkTypeSaga
  );
}

export default workTypeSaga;

Answer 1

那些面临同样问题的人，我可以确认 saga 和 toolkit 可以完美地相互配合。如果您遇到此类错误，请尝试彻底调试您的 saga。如果它有任何错误，它将停止 saga 的执行。还要感谢@Håken Lid，您可以使用 spawn 功能来查找任何错误。

我找到了解决方案。这是我的错 toggleSingWorkTypeStatusStart in WorkTypeSlice.toggleSingWorkTypeStatusStart.type 应该是 toggleSingleWorkTypeStatusStart. 我已经做到了，现在工作正常。