Reactjs 在 react redux 中处理 fetch 错误的最佳方法是什么

如果你想了解"全局错误"的概念，你可以创建一个errors减速机，它可以监听加法器、removeError等等...行动.然后，您可以在state.errors处连接到Redux状态树，并在适当的地方显示它们.

有很多方法可以做到这一点，但总的 idea 是，全局错误/消息应该与<Clients />/<AppToolbar />完全分离.当然，如果这些组件中的任何一个需要访问errors，您可以在需要时将errors作为props 传递给它们.

Update: Code Example

下面是一个例子，说明如果将"全局错误"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);

就动作创建者而言，它会根据响应发送(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;
  }
}