如何协调Flux和React之间的服务器错误消息？ [英] How to coordinate server error messages between Flux and React?

问题描述

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

I've been learning React and Flux over the past few months, and one thing I've not yet dealt with is displaying error messages to users. Specifically, error messages that occur as a result of an ajax http request within a flux action creator method.

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

A simple example is user sign in - if the sign in ajax request fails due to a bad password, the server responds with the failure. At that moment, within my flux action creator method, my only option is to dispatch an action containing the error information, right?

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

I can dispatch the error information and keep that error in a store. I'm not sure what the best way to tie certain errors to certain components is, though. Lets say my react component tree is rendering multiple error-aware components, but an error occurs during server-side user auth attempt and needs to be displayed on that sign in form.

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

Is there good pattern or convention for storing errors and knowing which component they're for? Is there a programmatic way of determining this, instead of passing in some identifier to every action creator function that identifies the component the action creator is called it, etc?

推荐答案

由于您使用Redux标记标记了问题，我假设您使用Redux。

如果是这样，这个真实示例显示错误处理。

Since you marked the question with Redux tag, I'm assuming you use Redux.
If so, this real-world example shows error handling.

有一个< a href =https://github.com/reactjs/redux/blob/ecb1bb453a60408543f5760bba0aa4c767650ba2/examples/real-world/reducers/index.js#L15-L26\"rel =nofollow noreferrer>减速器，对任何动作做出反应错误字段：

// 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中间件将任何错误消息放入错误字段关于行动：

The custom API middleware 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'
    }))
  );

最后，组件从Redux商店读取错误消息：

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

正如您所看到的，这与您的处理方式没有任何不同显示提取的数据。

As you can see, this is not any different from how you'd handle displaying fetched data.

这篇关于如何协调Flux和React之间的服务器错误消息？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！