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

Question

在过去的几个月里,我一直在学习React和Flux,而我还没有处理过的一件事就是向用户显示错误信息.具体而言,在flux action creator方法中由于ajax http请求而发生的错误消息.

一个简单的例子是用户登录 - 如果由于密码错误导致ajax请求中的登录失败,则服务器会以失败进行响应.那时,在我的flux动作创建器方法中,我唯一的选择是调度包含错误信息的动作,对吧？

我可以发送错误信息并将该错误保存在商店中.不过,我不确定将某些错误绑定到某些组件的最佳方法是什么.假设我的react组件树正在呈现多个错误感知组件,但在服务器端用户身份验证尝试期间发生错误,并且需要在该登录表单中显示.

是否有良好的模式或惯例来存储错误并知道它们适用于哪个组件？是否有一种编程方式来确定这一点,而不是将一些标识符传递给每个动作创建者函数,该函数标识动作创建者被称为它的组件等？

Answer 1

由于您使用Redux标记标记了问题,我假设您使用Redux.
如果是这样,这个真实世界的例子显示了错误处理.

有一个能够反应与任何行动减速器error领域:

// 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中间件将任何错误消息放入操作的error字段中:

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

最后,组件从Redux存储中读取错误消息:

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

如您所见,这与处理显示提取数据的方式没有任何不同.