如何在 Flux 和 React.js 中处理非视图更改操作

IT技术 javascript scroll reactjs action reactjs-flux
2021-04-27 01:57:06

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

不改变视图或标记的操作如何,例如“将此元素滚动到视图中”?处理这种情况的“通量方式”是什么?绕过调度员?或者在不涉及商店或组件的情况下在调度程序中处理它?

2个回答

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

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

因此,在您的情况下,如果只有一个组件需要知道滚动位置,则可能不太适合将该状态移动到 Flux Store。但是一旦需要在多个组件中知道这一点——尤其是树的不同分支中的组件——您可能希望在 Store 中管理该状态。

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

有时,人们希望编写尽可能少的代码,他们使用组件之间传递的回调来更改this.state父组件,而不是分派新操作以通过 Flux 数据流。我发现这将应用程序的视图和状态管理层混合在一起,虽然方便,但这可能会导致很多麻烦。从长远来看,它不是很灵活,因为现在状态与这几个组件耦合。从长远来看,从一开始就构建 Flux 数据流要简单得多,并且对新功能的适应能力也更强。也就是说,它还需要对代码进行更多的前期投资。

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