在Flux中处理ajax请求的最佳方法是什么？

Question

我正在考虑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有更好的方法吗？感谢。

Answer 1

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

在您的图表中，您有条件“成功？”，它可以调度成功或失败操作，商店可以保存请求成功的事实（您可能希望有某种非阻塞UI成功时会消失。

由于模型验证错误而不仅仅是网络故障，请求可能会失败。在这种情况下，将这些错误存储到商店中是值得的，这对它没有任何害处。

Flux架构的一个好处是存在单个定义的数据流，但是在图中，数据流是有条件的，具体取决于ajax请求的成功。如果您在商店中保留请求状态（通过调度发送），那么您将保留该单个数据流。