所以我对 React 还很陌生，我无法理解如何基于另一个组件重新渲染主要组件的概念。
假设我们有一个待办事项应用程序，一个待办事项可以有一个状态（新建、运行、关闭）。我们在列表中显示所有待办事项，我们可以根据它们的状态过滤这些项目。我们使用类似组件的引导下拉按钮来设置过滤器，它是一个 React 组件。现在，当我们更改过滤器时，我们显然想要刷新待办事项。
我的问题是，选择状态的逻辑是属于 Flux/Redux 还是过滤器组件只是对主组件说“刷新你的项目”？
【问题讨论】：
标签： reactjs flux reactjs-flux redux
当您在 React 应用程序中使用 Redux 时，请遵循一个简单规则 - 您的所有组件都是无状态（意味着，没有组件初始化其状态或在任何地方调用 .setState()） .
基于state container 的redux 设计方式，一个big 对象包含所有应用程序状态。作为 React 组件，作为 connected 到 Redux 存储，Redux 会将状态（或它的一部分）传递给该组件，作为 this.props.state 属性。
那个高阶组件（或智能组件）渲染其子组件（或哑组件）并处理来自它们的事件。
如果子组件需要更改，它会触发相应的处理程序（通常以props 传递）。改变状态的唯一方法是发送一个动作。该动作包含一个类型和一个有效负载，并根据该类型选择相应的 reducer。然后，reducer 根据之前的状态和操作负载生成一个新状态。
如果在 reducer 调用的结果中，状态发生了变化，Redux 将重新渲染高阶组件，并在属性中传递新的状态。所以，所有子组件都会相应更新。
检查此example 并跟踪AddTodo 组件如何调用.handleClick()，然后向上调用.onAddClick()，后者调度了一个动作。
【讨论】：
subscribed 到高阶组件，但我在其他教程或种子项目的任何地方都看不到它。 connect 会为我们神奇地做到这一点吗？如果是这样，是重新渲染的只是组件还是整个应用程序？
connect 实际上是订阅应用程序的 state 并在 redux 商店的 state 更改时强制更新，这也应该澄清我的后一个疑问。
如果您使用的是 redux，那么在您的下拉列表中，您应该有一个 onchange 处理程序，该处理程序在每次使用选定状态（新建、运行、关闭）更改值时调度一个操作。
Redux reducer 将通过相应地更改 store 中的某些状态来处理此操作，例如：display = 'completed'。除此之外，你的待办事项列表也应该存储在 store 中，它很可能是一个数组。
你的 react 组件应该收到一个 todo 数组并显示为 props，因此每次任何 prop（todo 数组或显示）更改时，都会触发重新渲染。
在这种情况下，您的组件应该只显示那些已完成的待办事项（即在渲染中检查每个待办事项的状态是否 === this.props.display。
所以回答你的问题：redux 保持下拉列表的状态，它被传递给你的主组件，然后你的主组件只呈现符合条件的待办事项。
【讨论】：
因此，您可以以一种非常简单的方式将一个函数向下传递给选择框，该选择框在顶级组件上调用setState。当该状态发生变化时，它将重新渲染其子组件。这种模式不能很好地扩展，并导致 React + Flux 试图让我们远离（无处不在的状态）。我想说的是，使用 Flux（或者更好的是 Redux），触发一个在你的商店中设置过滤器的操作，并使用基于过滤器状态的派生数据 + 你在待办事项列表中的待办事项列表。
【讨论】：