javascript - Flux:顶级 View 不应为 "dump"(不从存储中获取数据)

Question

也许在flux官方网站上我看到一个视频，导师说了这样的话:

Only top-level React views should know about stores. All not top level views should be dump and receive all information as properties.

问题: 这样吗？请您论证

但是，假设您有一些在多个页面上重用的小型 React View Button.react。假设 Button.react 必须了解一些商店数据。如果我们不直接从 Button.react 获取所有数据，我们会在重用 Button.react 的每个顶级组件中获得重复的代码。 这对你来说没问题吗？

Answer 1

我希望我能理解你的问题。

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

每个组件都不会成为 Controller View ，直接从存储中获取自己的状态，这不是一个可执行的规则，但这是有充分理由的一般做法。考虑两个函数:

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

对比

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

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

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