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

过去几个月里,我一直在学习React and Flux,有一件我还没有处理的问题是向用户显示错误信息.具体来说,作为通量动作创建者方法中的ajax http请求的结果而发生的错误消息.

一个简单的例子是用户登录 – 如果ajax请求的登录由于密码不正确而失败,则服务器会以失败方式进行响应.在那一刻,在我的助动作创建者方法中,我唯一的选择是发送一个包含错误信息的动作,对吧？

我可以发送错误信息并将该错误保存在商店中.我不知道把某些错误与某些组件绑在一起的最佳方法是.说我的反应组件树正在呈现多个错误感知组件,但在服务器端用户身份验证尝试期间发生错误,需要在该登录表单上显示.

有没有很好的模式或惯例存储错误,并知道他们是哪个组件？是否有一种程序化的方式来确定这一点,而不是将一些标识符传递给每个动作创建者功能,以识别动作创建者称之为组件等等？

解决方法

由于您使用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
  };
}

您可以看到,这与处理显示获取的数据的方式没有任何不同.