Redux如何处理reducer中的错误-Java 学习之路

我不确定如何处理redux减速器中的错误 . 当我的API提取返回数据时，我需要转换其结构并检查已在结果数据上设置的各种属性 . 但是，我不能在reducer中抛出错误，因为redux至少要求返回先前的状态 . 我该怎么办呢？

注意：我正在使用react-redux-toastr来处理错误，并且可以访问组件和操作函数中的错误调度程序 .

减速器/对象search.js：

case "FETCH_OBJECTS_FULFILLED": {
  // munge data into expected format

  const _allObjects = [];
  const data = action.payload;

  // if can't find the surveys property
  if (!data.hasOwnProperty("surveys")) {

    // - - How do I handle this within the reducer? - - 

    // this.handleAlert("error", "ERROR", " Cannot find a list of surveys. Please contact support.");
    return {
      ...state,
      fetching: false
    }
  }

  // transform data (omitted for brevity's sake)

  return {
    ...state,
    fetching: false,
    fetched: true,
    options: _allObjects,
    surveys: data.surveys.map(survey => survey.name)
    // toastrs: [newToastr, ...state.toastrs]
  };

}

我在ObjectSearch组件中连接后尝试更新ObjectSearch reducer中toastr的商店切片：

减速器/ index.js：

const rootReducer = combineReducers({
    toastr: toastrReducer,
    ObjectSearch 
 });

组件/对象search.js

@connect(store => {
  return {
     fetching: store.ObjectSearch.fetching,
     fetched: store.ObjectSearch.fetched,
     ready: store.ObjectSearch.ready,
     surveys: store.ObjectSearch.surveys,
     toastrs: store.toastr.toastrs
   };
 })

但是，将以下内容添加到reducers / object-search.js：似乎更新了ObjectSearch.toastrs而不是toastr.toastrs :(

const toastrs = [...state.toastr];
  const newToastr = {
     id: guid(),
     type: 'light',
     title: 'OBJECT SEARCH ERROR',
     message: 'No Data. Please contact support.',
     options: {
       ...REDUX_TOASTR_OPTIONS,
       icon: icons.ERROR_ICON,
       status: 'error'
     }
   };
  toastrs.push(newToastr);

我是一个react / redux新手，所以对这里的应用程序结构的任何帮助将不胜感激！

1 回答

3
一般模式是返回指示发生错误的状态 . 例如，在TODO APP的上下文中，如果收到的操作不正确，那么您可以使用以下内容：
```
function reducer (state = { todos: [], error: null }, action) {

   switch (action.type) {

       case "ADD_TODO":
           if (typeof action.todo === "string") {

                return Object.assign({}, state, {
                    error: {
                        code: "INVALID TODO ACTION",
                        message: "The todo action received was empty, need a .text property",
                        action
                    }
                 });

           } else {

               return { todos: [action.text, ...state.todos], error: null }

           }

   }

}
```
然后，无论听到商店的哪个订阅者，在看到返回的新状态时都可以采取行动 .

我认为重要的是一切都是非常声明的，在reducer逻辑中你声明了状态相对于接收到的动作的行为 . 与外界/背景无关（该功能被认为是纯粹的） . 抛出一个错误，或者在外面调用一些东西会破坏模式 .

有趣的是，您可以让中间件监视具有非空错误键的状态，并对此采取措施 .

您可能会关注的另一件事是当您的操作中存在真正的错误时：对象的形状是意外的，或者您有字符串而不是错误等...在这种情况下，您可能会抛出意外错误 . 会发生什么？

您可以在source中看到redux没有做任何事情 . 它将简单地重置为notDispatching状态 . 因此，如果你 did not 变异状态一切都还可以（尽管它可以是任何东西） . 如果你这样做，那么你的手上就会有一种不稳定的状态......
回复于 2024-04-28T18:15:12+08:00

Redux如何处理reducer中的错误

1 回答

相关问题