如何处理Flux&amp ;;中的非视图改变操作React.js

时间:2015-06-25 18:05:53

标签: javascript scroll reactjs action reactjs-flux

在Flux中,每个动作都应由调度员处理。

如何不改变视图或标记的操作,例如"滚动此元素进入视图"?什么是" Flux-way"处理这种情况?绕过调度员?或者在调度员处理它而不涉及商店或组件?

2 个答案:

答案 0 :(得分:3)

如果您的应用不需要了解滚动(看起来很少见),则无需触发操作。由于Flux确实可以处理数据流(以及基于该数据流的后续更改),因此不需要了解发生的每个操作。

答案 1 :(得分:3)

Flux实际上更多的是关于应用程序状态管理,而不是关于在视图中呈现哪些组件的细节。那是React的领域。 Flux只是假设您有某种反应性视图层 - 通常是“反应”。

应用程序状态与组件状态不同。应用程序状态是需要在多个组件中知道的。对于组件状态,React的this.state是完全足够的。输入组件是可能需要它的一个很好的例子。

因此,在您的情况下,如果只有一个组件需要知道滚动位置,则可能没有将该状态移动到Flux Store的好例子。但是,只要需要在多个组件中知道 - 尤其是树的不同分支中的组件 - 您可能希望在存储中管理该状态。

您的问题提出的另一个问题是Flux Actions的作用。 Flux应用程序始终使用Actions作为数据流的来源。这样做有很多很好的理由:稳定的应用程序状态,保持应用程序对新功能的弹性,使其易于推理,撤消历史记录,重构应用程序状态,无状态视图组件等。

有时人们希望编写尽可能少的代码,并且他们使用组件之间传递的回调来更改父组件中的this.state,而不是调度新操作来完成Flux数据流。我发现这是混合应用程序的视图和状态管理层,虽然权宜之计,但这可能会导致很多麻烦。从长远来看,它不是非常灵活,因为现在状态与这几个组件耦合。从长远来看,从一开始就建立一个Flux数据流要简单得多,而且对新功能更具弹性。也就是说,它还需要更多的代码投资。