处理react redux中的fetch错误的最佳方法是什么？ [英] What is the best way to deal with a fetch error in react redux?

问题描述

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

I have one reducer for Clients, one other for AppToolbar and some others...

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

Now lets say that I created a fetch action to delete client, and if it fails I have code in the Clients reducer which should do some stuff, but also I want to display some global error in AppToolbar.

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

But the Clients and the AppToolbar reducers do not share the same part of the state and I cannot create a new action in the reducer.

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

So how am I suppose to show global error? Thanks

更新1：

我忘记提及我使用 este devstack

I forget to mention that I use este devstack

更新2：
我将Eric的答案标记为正确，但我不得不说我在este中使用的解决方案更像是Eric和Dan的答案的组合...
你只需要找到适合你的东西代码中最好的...

UPDATE 2: I marked Eric's answer as correct, but I have to say that solution which I am using in este is more like combination of Eric and Dan's answer... You just have to find what fits you the best in your code...

推荐答案

如果你想要全局错误的概念，你可以创建一个 errors reducer，它可以侦听addError，removeError等操作。然后，您可以在 state.errors 中挂钩到Redux状态树，并在适当的位置显示它们。

If you want to have the concept of "global errors", you can create an errors reducer, which can listen for addError, removeError, etc... actions. Then, you can hook into your Redux state tree at state.errors and display them wherever appropriate.

您可以通过多种方式解决这个问题，但总体思路是全局错误/消息值得将自己的reducer与完全分开< Clients /> / < AppToolbar /> 。当然，如果这些组件中的任何一个需要访问错误，您可以将错误传递给他们作为支柱，无论何时需要。

There are a number of ways you could approach this, but the general idea is that global errors/messages would merit their own reducer to live completely separate from <Clients />/<AppToolbar />. Of course if either of these components needs access to errors you could pass errors down to them as a prop wherever needed.

更新：代码示例

这是一个可能看起来的例子就像你将全局错误错误传递到您的顶级< App /> 并有条件地渲染它（如果存在错误）。使用 react-redux的 connect 将您的< App /> 组件与某些数据相关联。

Here is one example of what it might look like if you were to pass the "global errors" errors into your top level <App /> and conditionally render it (if there are errors present). Using react-redux's connect to hook up your <App /> component to some data.

// 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 ）根据回复成功失败

And as far as the action creator is concerned, it would dispatch (redux-thunk) success failure according to the response

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可以简单地管理一系列错误，但适当地添加/删除条目。

While your reducer could simply manage an array of errors, adding/removing entries appropriately.

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;
  }
}

这篇关于处理react redux中的fetch错误的最佳方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！