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

Posted 2023-02-22

【中文标题】如何协调 Flux 和 React 之间的服务器错误消息？

【英文标题】：How to coordinate server error messages between Flux and React?

【发布时间】：2015-10-27 15:36:48

【问题描述】：

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

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

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

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

【参考方案1】：

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

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

【讨论】：

想象一个电子表格类型的应用程序，其中每个单元格都通过 ajax onblur 保存。如果保存失败，用户应该会在保存失败的单元格中看到一条错误消息。现在，您可能会收到每个单元格的错误消息。您是否将所有这些错误保存在商店本身中？您如何将错误映射到单元格？感谢您的任何建议。

假设单元格有某种类型的 ID（它们无论如何都需要用作 key 以进行高效渲染），请将 errorsByID: id -> error 映射保留在商店中。

感谢您的回复。我在使用此解决方案时遇到的问题是我的密钥不是全局唯一的，而是仅在其兄弟姐妹中唯一（这是允许的）。在“行”中，键只是列索引。这意味着列中的每个单元格都会显示错误。我可以使用“rowId + colIndex”作为errorsById 中的“id”，但即使 that 也会中断，例如，如果我想在页面上呈现同一网格的两个副本。所以这里的“身份”成为一个不平凡的问题。将回调传递给直接设置组件状态的 onError 的 ajax 函数是一种糟糕的做法吗？

没什么可怕的，你不必必须通过 Flux 路由任何东西。问题是关于 Flux 的，但这并不意味着你必须为此使用它。 :-)

【参考方案2】：

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

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

【讨论】：

这就是我要去的路线。我认为就 Flux-ish 模式而言，这是最直接的。