在 Flux 中处理 ajax 请求的最佳方式？

Posted 2023-02-22

【中文标题】在 Flux 中处理 ajax 请求的最佳方式？

【英文标题】：Best way to handle ajax request in Flux?

【发布时间】：2015-12-20 06:04:38

【问题描述】：

我正在考虑 React 的 Flux 架构，我想确定处理 Ajax 请求的最佳方式。请参见下图中的评论框示例。

整体架构很清晰，我担心的是：我们真的需要一个单独的存储来保存视图的私有状态，例如 Ajax 请求失败吗？

为什么我们有商店是因为数据可以被不同的视图重用。但是除了视图发起请求之外，网络结果是否也应该被其他视图重用？

ajax请求成功还是失败也是setState(loading: true/false)等视图的状态。而这个状态与请求的数据结果无关。私有加载状态可能与post、refresh、delete等不同的网络请求有关。我知道有些人建议为这种情况提供一个ErrorStore。但如果我们不开发无状态组件，我看不出有任何理由只将网络状态保存在单独的存储中。

所以在我的项目中我使用 Promise：

actionCreators.postComment(...)
.then(res => this.setState(loading: false, error: null))
.catch(err => this.setState(loading: false, error: err));

以上代码对应图片红色部分。

所以我的问题是：这种方法合理吗？还是 Redux/Reflux 有更好的方法？谢谢。

【问题讨论】：

你可以看看这篇文章mjw56.github.io/handling-asynchronous-data-flow-in-flux/…

【参考方案1】：

我认为将 ajax 请求状态存储在您的商店中没有问题 - 您不需要单独的商店。您可以将状态保存在视图存储中。

在您的图表中，您有条件“成功？”，它可以发送成功或失败操作，并且存储可以保存请求成功的事实（您可能希望有某种非阻塞成功后 UI 消失）。

请求可能由于模型验证错误而失败，而不仅仅是网络故障。在这种情况下，将这些错误存储到存储中是值得的，这没有什么坏处。

Flux 架构的一个好处是有单一的、已定义的数据流，但在您的图表中，数据流是有条件的，具体取决于 ajax 请求的成功与否。如果您将请求状态保留在您的商店中，通过分派发送，那么您将保持单一数据流。