Flux：不应该“转储”***视图（不要从商店获取数据）

Posted 2023-02-22

【中文标题】Flux：不应该“转储”***视图（不要从商店获取数据）

【英文标题】：Flux: should not-top-level views be "dump" (do not fetch data from stores)

【发布时间】：2016-03-28 22:37:03

【问题描述】：

也许在flux官方网站上我看到一个视频是导师说的：

只有*** React 视图应该知道商店。都不是***的 应转储视图并将所有信息作为属性接收。

问题： 对吗？你的论据，请

但是，假设您有一些小的 React 视图 Button.react 可以在多个页面上重复使用。假设Button.react 必须知道一些商店数据。如果我们不直接从Button.react 获取所有数据，我们会在每个顶层组件中获得重复使用Button.react 的代码。 你可以吗？

【参考方案1】：

希望我能理解你的问题。

React 的一个特点是它的单向数据流。每个组件都可以被另一个组件使用，就像一个函数可以调用另一个函数一样。就像函数一样，React 组件通常应该能够从传递给它的参数中获取它工作（渲染自身）所需的所有信息。这是 React 中props 的功能。使用 Flux 时，有时 React 组件（通常位于视图层次结构的顶部附近）实际上从存储中获取数据以向下传递到应用程序，称为 Controller-Views。

不是每个组件都不会成为控制器视图，直接从商店获取自己的状态，这不是一个强制规则，但这是有充分理由的普遍做法。考虑两个函数：

function renderToggleButton( isSelected )
  //... render the button

对

function renderToggleButton()
  var isSelected = StateStore.getButtonSelectedState( id );
  //... render the button

我想你会同意第二个函数更复杂，更难测试。它必须知道它从哪里得到它的初始条件。它还必须知道如何在应用程序的上下文中识别自己。这是函数应该不必知道的两件事。

现在想象一个充满这样功能的应用程序。如果一个函数行为不端，跟踪它的输入就变得非常困难；在受控条件下对其进行测试。我希望澄清通过应用程序传递数据的指导，props。