如何处理 redux saga 的错误

Question

我尝试使用 redux saga 进行错误处理。到目前为止，当我更改 api url 时，它总是返回 404 错误。我组织了我的 reducer 和 redux saga。但我拿不到东西这是我的 Reducer

const homeReducer = (state : Object = initialState, action : Object) => {

  switch (action.type) {
    case HOME.GET_MOVIES_START:
      return {
        ...state,
        ProgramsLoading: true,
        fetching: true
      };

    case HOME.GET_MOVIES_FINISH:
      return {
        ...state,
        ProgramsLoading: false,
        programs: action.programs,
        fetching: true
      };
    case HOME.GET_MOVIES_REJECTED:
      return {
        ...state,
        ProgramsLoading: false,
        fetching: false
      };
    default:
      return state;
  }

};

这是我的 Redux Saga。使用 axios 调用 api。并在那里操作数据

function* getPrograms() {
  const { data } = yield call(axios.get, "http://localhost:3000/entries");
  const fetching = false;
  const defaultValue = {
    SeriesFilteredData: [],
    MoviesFilteredData: []
  };
  const reducerFunction = (accumulator, currentValue) => {

    if (currentValue.releaseYear < 2010) {
      return accumulator;
    }
    if (currentValue.programType === "series") {
      accumulator.SeriesFilteredData.push(currentValue);
    }
    else if (currentValue.programType === "movie") {
      accumulator.MoviesFilteredData.push(currentValue);
    }
    return accumulator;
  };
  const results = data.reduce(reducerFunction, defaultValue);

  if (results) {
    yield put(homeActions.getProgramsFinish(results));
  }
  else {
    yield put(homeActions.getProgramsRejected({ ProgramsLoading: false }));
  }

}
function* homeFlow() {
  console.log(getPrograms, "getPrograms");
  yield call(delay, 2000);
  yield call(getPrograms);
}

export default function* homeSaga() {
  yield takeEvery(HOME.GET_MOVIES_START, homeFlow);
}

我该如何处理任何错误？

Answer 1

将所有 getPrograms 函数放在 try catch 中，并在 catch 块中触发（放置）homeActions.getProgramsRejected({ ProgramsLoading: false }) 操作

function* getPrograms() {
    try {
        const { data } = yield call(axios.get, "http://localhost:3000/entries");

        // ... the rest of your code

        if (results) {
          yield put(homeActions.getProgramsFinish(results));
        }
        else {
          yield put(homeActions.getProgramsRejected({ ProgramsLoading: false }));
        }
    }
    catch(error) {
        yield put(homeActions.getProgramsRejected({ ProgramsLoading: false }));
    }
}

然后你可以改进它避免编写两个相同的 yield put(homeActions.getProgramsRejected({ ProgramsLoading: false })); 调用。看看

function* getPrograms() {
    try {
        const { data } = yield call(axios.get, "http://localhost:3000/entries");

        // ... the rest of your code

        if (results) {
          yield put(homeActions.getProgramsFinish(results));
        }
        else {
            throw new Error('No results');
        }
    }
    catch(error) {
        yield put(homeActions.getProgramsRejected({ ProgramsLoading: false }));
    }
}

如果 axios 调用失败，catch 块将执行 homeActions.getProgramsRejected 操作
如果它没有失败但没有结果（您的初始管理）它会抛出一个新错误并且 catch 块再次放置 homeActions.getProgramsRejected 操作

如果对你有帮助请告诉我

如何处理 redux saga 的错误

How to handle erros with redux saga

reactjs

redux

redux-thunk

redux-saga