reduxsaga无法使用具有多个saga的reduxToolkit

Question

嗨，我正试图用新的redux工具包实现传奇，但不幸的是，当我启用新的切片还原器传奇时，它并没有触发传奇。

rootSag.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((时，它也起作用。但像这样的多重传奇并不奏效。

我知道将多个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可以完美地相互配合。如果你面临这样的错误，试着彻底调试你的传奇故事。如果它有任何错误，它将停止传奇的执行。也感谢@Håken Lidu可以使用产卵功能来查找任何错误。

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