在React Redux中处理提取错误的最佳方法是什么？

小编典典

在React Redux中处理提取错误的最佳方法是什么？

reactjs

我有一个针对客户的减速器，另一个针对AppToolbar的减速器，还有一些其他的减速器…

现在让我们说我创建了一个删除客户端的提取操作，如果失败，我在Clients
reducer中会有代码，该代码应该做一些事情，但是我也想在AppToolbar中显示一些全局错误。

但是客户端和AppToolbar减速器不共享状态的同一部分，因此我无法在减速器中创建新的动作。

那么我应该如何显示全局错误？谢谢

更新1：

我忘了提到我使用este devstack

更新2：
我将Eric的答案标记为正确，但是我不得不说，我在este中使用的解决方案更像是Eric和Dan的答案的结合……您只需要找到最适合自己代码的方法即可。。

阅读 205

2020-07-22

共1个答案

小编典典

如果要使用“全局错误”的概念，则可以创建一个errorsreducer，它可以监听addError，removeError等操作。然后，您可以连接到Redux状态树，state.errors并在适当的地方显示它们。

您可以通过多种方法来解决此问题，但是总体思路是，全局错误/消息应利用自己的reducer与<Clients />/ 完全分开<AppToolbar />。当然，如果需要访问这些组件中的任何一个，则可以在需要时将其作为道具errors传递errors给他们。

更新：代码示例

这是一个示例，说明如果将“全局错误”传递errors到顶层<App />并有条件地呈现（如果存在错误），可能会看起来像。使用react-
reduxconnect将<App />组件连接到一些数据。

// App.js
// Display "global errors" when they are present
function App({errors}) {
  return (
    <div>
      {errors && 
        <UserErrors errors={errors} />
      }
      <AppToolbar />
      <Clients />
    </div>
  )
}

// Hook up App to be a container (react-redux)
export default connect(
  state => ({
    errors: state.errors,
  })
)(App);

就动作创建者而言，它将根据响应调度（redux-thunk）成功失败

export function fetchSomeResources() {
  return dispatch => {
    // Async action is starting...
    dispatch({type: FETCH_RESOURCES});

    someHttpClient.get('/resources')

      // Async action succeeded...
      .then(res => {
        dispatch({type: FETCH_RESOURCES_SUCCESS, data: res.body});
      })

      // Async action failed...
      .catch(err => {
        // Dispatch specific "some resources failed" if needed...
        dispatch({type: FETCH_RESOURCES_FAIL});

        // Dispatch the generic "global errors" action
        // This is what makes its way into state.errors
        dispatch({type: ADD_ERROR, error: err});
      });
  };
}

虽然reducer可以简单地管理一系列错误，但可以适当地添加/删除条目。

function errors(state = [], action) {
  switch (action.type) {

    case ADD_ERROR:
      return state.concat([action.error]);

    case REMOVE_ERROR:
      return state.filter((error, i) => i !== action.index);

    default:
      return state;
  }
}

2020-07-22