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

Question

我有一个客户端减速器,另一个适用于AppToolbar和其他一些减速器......

现在让我说我创建了一个删除客户端的提取操作,如果它失败了我在Clients reducer中有代码可以做一些事情,但我也想在AppToolbar中显示一些全局错误.

但客户端和AppToolbar缩减器不共享状态的相同部分,我无法在reducer中创建新操作.

那我怎么想显示全局错误呢？谢谢

更新1:

我忘了提到我使用este devstack

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

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

Answer 2

Erik的答案是正确的,但我想补充一点,你不必为了添加错误而单独激活.另一种方法是使用减速器来处理带error字段的任何动作.这是个人选择和惯例的问题.

例如,来自具有错误处理的Redux real-world示例:

// Updates error message to notify about the failed fetches.
function errorMessage(state = null, action) {
  const { type, error } = action

  if (type === ActionTypes.RESET_ERROR_MESSAGE) {
    return null
  } else if (error) {
    return error
  }

  return state
}