javascript - 处理 react redux 中的获取错误的最佳方法是什么？

Question

我有一个 reducer 用于客户端，另一个用于 AppToolbar 和其他一些...

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

但是客户端和 AppToolbar reducer 不共享相同的状态部分，我无法在 reducer 中创建新的操作。

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

更新 1:

我忘了说我用的是 este开发栈

更新 2:我将埃里克的答案标记为正确，但我不得不说我在埃斯特使用的解决方案更像是埃里克和丹的答案的结合......您只需要在您的代码中找到最适合您的内容...

Answer 1

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

有很多方法可以解决这个问题，但一般的想法是全局错误/消息值得他们自己的 reducer 与 <Clients /> 完全分开。/<AppToolbar /> .当然，如果这些组件中的任何一个需要访问 errors你可以通过 errors在需要时将它们作为 Prop 。

更新:代码示例

这是一个示例，说明如果您要传递“全局错误”errors，它可能会是什么样子进入你的顶层<App />并有条件地渲染它(如果存在错误)。使用react-redux's connect 连接你的 <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);

就 Action 创建者而言，它会根据响应分派(dispatch) ( 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;
  }
}