如何协调 Flux 和 React 之间的服务器错误消息？

Question

过去几个月我一直在学习 React 和 Flux，还有一件事我还没有处理好，那就是向用户显示错误消息。具体而言，由于 flux 操作创建者方法中的 ajax http 请求而出现的错误消息。

一个简单的例子是用户登录 - 如果登录 ajax 请求由于密码错误而失败，服务器将以失败作为响应。在那一刻，在我的 flux action creator 方法中，我唯一的选择是发送一个包含错误信息的动作，对吧？

我可以分派错误信息并将该错误保存在存储区中。不过，我不确定将某些错误与某些组件联系起来的最佳方法是什么。假设我的 React 组件树正在呈现多个错误感知组件，但在服务器端用户身份验证尝试期间发生错误，需要在该登录表单上显示。

是否有良好的模式或约定来存储错误并知道它们针对哪个组件？是否有一种编程方式来确定这一点，而不是将一些标识符传递给每个动作创建者函数，以标识动作创建者调用它的组件等？

Answer 1

您将错误信息保存在商店中的想法很好（可能是 ErrorStore）。但是商店不需要知道对特定错误感兴趣的组件。相反，ErrorStore 需要发出一个 CHANGE 事件。发出该事件时，您可以添加一个额外的参数，即错误类型（商店可能从动作创建者那里获得）。

现在，任何组件都可以侦听 ErrorStore 并检查错误类型（它将作为参数获取）。然后组件可以知道生成了哪种错误，并决定它们是否对此感兴趣。

Answer 2

既然你用 Redux 标签标记了问题，我假设你使用的是 Redux。
如果是这样，此 real-world example 显示错误处理。

有个reducer that reacts to any action with error field:

// 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 action.error;
  }

  return state;
}

自定义API中间件puts any error message into error field on the action:

  return callApi(endpoint, schema).then(
    response => next(actionWith({
      response,
      type: successType
    })),
    error => next(actionWith({
      type: failureType,
      error: error.message || 'Something bad happened'
    }))
  );

最后，组件 reads the error message from Redux store:

function mapStateToProps(state) {
  return {
    errorMessage: state.errorMessage
  };
}

如您所见，这与您处理显示获取的数据的方式没有任何不同。

如何协调 Flux 和 React 之间的服务器错误消息？

How to coordinate server error messages between Flux and React?

javascript

reactjs

flux

redux