什么时候将Flux（等）与React一起使用？

Question

我一直在研究一个相当简单的React应用作为学习过程，并希望开始结合Flux（或更可能是Redux）来继续学习。

该代码来实现流量酷似解决办法似乎很简单，但我在什么时候适合，事情应该如何安排在最佳实践意义有点不清楚。

用超外行的术语来说，我对一个常见用例的最佳猜测是Flux允许组件之间相互交谈而无需传递通用的道具，因此请记住，这是我希望在我的产品中使用Flux的示例应用程式：

假设我有一个用户配置文件组件，该组件通过ajax调用定期刷新。在此调用等待返回其数据时，正在页面上其他位置显示加载微调gif-不在触发ajax调用的组件的父级或子级中。在这种情况下，我将如何使用Flux提示微调器在适当的时间显示/隐藏（即，从发送请求开始，到收到响应时结束）？如果它的可见性是由配置文件组件的状态定义的，那很容易，但是显然我需要一个组件与我认为您可以称为远亲的表亲进行通信。

我将如何布置自己的行动，减速器以及如何实现这一目标？

我不是在这里寻找任何人为我编写代码，因为我一定会做得更好，但是我绝对希望在这种情况下使用一些方法学方面的一般建议。

非常感谢！

Answer 1

Redux 基本上为您提供了任何组件都可以挂钩的全局状态。

因此，对于您的 ajax 调用，您将有 3 个操作。查看Redux 文档以创建异步操作。

GET_USER_PROFILE_START
GET_USER_PROFILE_SUCCESS
GET_USER_PROFILE_ERROR

然后你会有减速器

userProfile
isUserProfileLoading

当您触发 ajax 请求时，您的异步操作将首先触发您的GET_USER_PROFILE_START操作，该操作将由您的isUserProfileLoading减速器获取并设置isUserProfileLoading为true.

然后当请求返回时，如果成功，它将GET_USER_PROFILE_SUCCESS以userProfile. 您的userProfile减速器将接收userProfile并将其设置为状态。

您的isUserProfileLoading减速器也将监听GET_USER_PROFILE_SUCCESS并在它看到该动作时isUserProfileLoading返回false。

如果您的请求失败，您会触发一个GET_USER_PROFILE_ERROR带有error有效负载的操作并在 UI 中执行某种通知。并且您的isUserProfileLoading减速器也将在侦听GET_USER_PROFILE_ERROR并在看到它时isUserProfileLoading返回false。

现在，您的应用程序中的任何组件，无论它在页面上或组件层次结构中的哪个位置，isUserProfileLoading如果设置为true.

希望有帮助。