什么时候使用Flux(等)与React?

时间:2016-05-27 07:57:16

标签: reactjs redux flux reactjs-flux react-redux

我一直在研究一个相当简单的React应用程序作为学习过程,并希望开始整合Flux(或者更有可能是Redux)来继续教育。

实现类似Flux的解决方案的代码似乎相当直截了当,但我有点不清楚何时适当以及应该如何以最佳实践意义安排事情。

在超级外行的情况下,我对一个常见用例的最佳猜测是,Flux允许组件相互通信而不会传递常见的道具,所以考虑到这一点,这里有一个我希望使用Flux的例子在我的应用程序中:

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

我如何列出我的行动,减少器以及未能实现的目标?

我不是在寻找任何人在这里为我编写代码,因为我肯定会通过这样做来更好地学习,但我非常感谢在这种情况下使用的方法的一些一般性建议。 / p>

非常感谢!

1 个答案:

答案 0 :(得分:4)

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

因此,对于你的ajax电话,你有3个动作。查看the Redux docs for creating async actions

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操作,并在用户界面中进行某种通知。您的isUserProfileLoading缩减器也会在监听GET_USER_PROFILE_ERROR,并且会在isUserProfileLoading看到它时将其设置回false

现在,您的应用中的任何组件,无论在页面上或组件层次结构中的哪个位置,都可以查看isUserProfileLoading,并在设置为true时呈现加载微调器

希望有所帮助。