Redux Saga 在任何錯誤后都無法工作。 它完全停止工作，需要刷新頁面

Question

Redux Saga 在任何錯誤后都無法工作。 它完全停止工作，需要刷新頁面。 運行良好時不會產生任何錯誤。

我想如果再次單擊該進程並從 API 獲取數據，頁面是否應該運行，是否發生任何錯誤。

如果有人提出任何建議/解決方案，請。

我的 axios 調用如下，

export async function getWithPagination(pageNumber, pageSize, searchObject) {
  try {
    const response = await axios.get(
      uri.ApiBaseUrl + "Voucher/GetWithPagination",
      {
        params: {
          ...searchObject,
          pageNumber,
          pageSize,
        },
      }
    );
    return { response };
  } catch (error) {
    return { error };
  }
}

export async function createVoucher(voucher) {
  console.log("createVoucher service=> ", voucher);
  try {
    const response = await axios.post(uri.ApiBaseUrl + "Voucher", voucher, {});
    return { response };
  } catch (error) {
    return { error };
  }
}

減速器，動作，傳奇如下

import { put, takeLatest, call } from "redux-saga/effects";
import {
  getWithPagination,  
  createVoucher  
} from "../../services-crud/accounting/vouchersCrud";

export const reducer = (state = voucherState, action) => {
    case actionTypes.VoucherGetRequested: {
      return {
        ...state,
        voucherGridObj: {
          paging: {},
          links: {},
          lists: [],
        },
        isGridLoading: true,
      };
    }
    case actionTypes.VoucherGetSucceed: {
      return { ...state, voucherGridObj: action.data, isGridLoading: false };
    }
    case actionTypes.VoucherGetFailed: {
      return { ...state, isGridLoading: false };
    }
    case actionTypes.VoucherCreateRequested: {
      return { ...state };
    }
    case actionTypes.VoucherCreateSucceed: {
      return {
        ...state,
        voucherObj: { ...voucherInit },
        voucherDetailsList: [],
        voucherGridObj: {
          ...state.voucherGridObj,
          lists: [{ ...action.data.voucher }, ...state.voucherGridObj.lists],
        },
        isSuccess: false,
        isDataSyncNeeded: true,
      };
    }
    case actionTypes.VoucherCreateFailed: {
      return { ...state, isSuccess: false, isDataSyncNeeded: false };
    }
}

export const actions = {
     voucherGetRequested: (pageNumber, pageSize, searchObject) => ({
    type: actionTypes.VoucherGetRequested,
    pageNumber: pageNumber,
    pageSize: pageSize,
    searchObject: searchObject,
  }),
  voucherGetSucceed: (data) => ({
    type: actionTypes.VoucherGetSucceed,
    data: data,
  }),
  voucherGetFailed: () => ({ type: actionTypes.VoucherGetFailed }),

  voucherCreate: (voucherObj, voucherImage, gurdianImage) => ({
    type: actionTypes.VoucherCreate,
    voucherObj: voucherObj,
    voucherImage: voucherImage,
    gurdianImage: gurdianImage,
  }),
  voucherCreateRequested: () => ({
    type: actionTypes.VoucherCreateRequested,
  }),
  voucherCreateSucceed: (data) => ({
    type: actionTypes.VoucherCreateSucceed,
    data: data,
  }),
  voucherCreateFailed: () => ({
    type: actionTypes.VoucherCreateFailed,
  }),
};

export function* saga() {

    try {
    yield takeLatest(
      actionTypes.VoucherGetRequested,
      function* voucherRequested(action) {
        const { response, error } = yield call(() =>
          getWithPagination(
            action.pageNumber,
            action.pageSize,
            action.searchObject
          )
        );

        if (response) {
          yield put(actions.voucherGetSucceed(response.data));
        } else {
          NotificationMessage(errorResponseProcess(error.response));
          yield put(actions.voucherGetFailed(error));
        }
      }
    );
  } catch (error) {
    NotificationMessage(errorResponseProcess(error.response));
    yield put(actions.voucherGetFailed(error));
  }

   try {
    yield takeLatest(
      actionTypes.VoucherCreate,
      function* createsvoucher(action) {
        yield put(actions.voucherCreateRequested());
        const { response, error } = yield call(() =>
          createVoucher(
            action.voucherObj,
            action.voucherImage,
            action.gurdianImage
          )
        );
        if (response) {
          NotificationMessage(response.data.notification);

          yield put(actions.voucherCreateSucceed(response.data.data));
          yield put(actions.voucherResetFlag());
        } else {
          NotificationMessage(errorResponseProcess(error.response));
          yield put(actions.voucherCreateFailed(error));
        }
      }
    );
  } catch (error) {
    NotificationMessage(errorResponseProcess(error.response));
    yield put(actions.voucherCreateFailed(error));
  }

}

根減速器和存儲在下面

import { all } from "redux-saga/effects";
import createSagaMiddleware from "redux-saga";
import { combineReducers, applyMiddleware, createStore } from "redux";

import * as accountsReportCrud from "./accounts-chart-duck/accountsReportCrudDuck";
import * as vouchersCrud from "./voucher-duck/voucherCrudDuck";

export const rootReducer = combineReducers({

  accountsCrud: accountsCrud.reducer,
  accountsReportCrud: accountsReportCrud.reducer,

});

export function* rootSaga() {
  yield all([

  accountsCrud.saga(),
  accountsReportCrud.saga(),
   ...
  
  ]);
}

const sagaMiddleware = createSagaMiddleware();
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));

sagaMiddleware.run(rootSaga);

export default store;

Answer 1

在您的 root saga 中，您可以spawn任務而不是all / fork這樣一個 saga 的錯誤就不會導致所有的 saga 崩潰。

Redux-saga 文檔關於分離叉 (spawn) ：

來自衍生任務的未捕獲錯誤不會冒泡到父級。

Answer 2

我認為這種傳奇的形成可以解決問題

function* function_name({ payload }){
  //code here
}

export function* function_name_sagas() {
    yield takeEvery(action_type, function_name);
}

export default function* rootSaga() {
    yield all([
        fork(function_name_sagas),
    ]);
}