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

小编典典

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

reactjs

在过去的几个月中，我一直在学习React和Flux，而我尚未处理的一件事就是向用户显示错误消息。具体来说，在通量动作创建器方法中，由于ajax
http请求而出现的错误消息。

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

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

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

阅读 236

2020-07-22

共1个答案

小编典典

由于您使用Redux标签标记了问题，因此我假设您使用Redux。
如果是这样，此实际示例将显示错误处理。

有一个reducer对errorfield的任何动作做出反应：

// 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中间件会将任何错误消息放入erroraction的字段中：

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

如您所见，这与显示获取的数据的方式没有什么不同。

2020-07-22