【发布时间】：2018-05-01 09:00:43
【问题描述】：
我已经阅读了多个教程如何使用 Redux bot 在 React 中进行 CRUD没有作者解释了为什么他们使用 Redux。 （好像他们只是为了花哨而使用它，或者因为所有其他人都在使用它。）
引用here:
人们经常在需要之前选择 Redux。
通过进一步研究，我了解到 Redux 适用于：
- 在组件之间共享状态
- 让一些数据在整个应用程序中都可以访问
不存在错误或正确。但只有做有意义的事。
我的用例
我有一个使用共享组件的组件：
¦-- domains/FooManagement/Components/Editor.jsx <-- Most-parent of the editor
¦-- domains/FooManagement/Components/..the children of Editor.jsx
¦-- shared/Components/Tabs/Tabs.jsx <-- Most-parent of the tabs
¦-- shared/Components/Tabs/..the children of Tabs.jsx
Tabs.jsx 用于Editor.jsx。
哪种方法是正确的？
方法 1：React 状态（我认为它是正确的）
- 每个可能发生的动态渲染都存储在
Editor.jsx的状态中。 - onClick 选项卡（嵌套共享组件）调用用
Editor.jsx编写的回调，更新Editor.jsx中的状态。然后，此状态更改会重新呈现新的活动标签 - 这意味着在使用相同嵌套
Tabs.jsx的每个其他组件（如Editor.jsx）上，必须在编辑器中处理选项卡的更改。
代码示例：
/**
* domains/FooManagement/Components/Editor.jsx
* or
* domains/BarManagement/Components/Editor.jsx
*/
onTabChange(activeTab) {
this.state.activeTab = activeTab;
this.setState(this.state);
}
我认为这是正确的方法，因为：
- 我不需要整个应用程序中的编辑器或选项卡组件的状态。但仅在这种观点上一次。喜欢short term duration definition。
方法 2：Redux 状态
-
Editor.jsx有自己的状态 -
Tabs.jsx有自己的状态 - 状态存储在 Redux 中
-
Editor.jsx不要将数据向下传递给Tabs.jsx，因为Tabs.jsx从 Redux 存储中获取数据
好处：
- 上面的代码示例不能在
Editor.jsx中，因为选项卡组件的行为方式不是编辑器的兴趣所在。 （或者编辑应该感兴趣？）
我认为这很糟糕，因为
- 这里太魔幻了。想象一下，编辑器中有更多组件，如可排序、表格等。在
Editor.jsx中，您将看不到可以呈现视图的内容。它隐藏在其他组件中。
但是，如果它全部在 Editor.jsx 中处理，您可以概览和控制所有必须在任何更改时呈现的内容。
哪种方法适合您？
【问题讨论】：
-
有 3 个组件：Sales.js、Totals.js 和 Payment.js，每个状态都存储在自己的组件中：您如何访问在 Sales 中选择了多少产品进行销售.js 显示 Totals.js 中的总金额以及 Payment.js 中的处理付款？
-
您仍然可以使用方法 1 解决此问题。当所有状态都存储在您的最父组件中时，您可以从那里访问它。见Lifting State Up 和Thinking in React。