Question

我已经阅读了多篇教程，如何使用Redux bot在React中制作CRUD none 作者解释为什么他们正在使用Redux。（就像他们只是为了花哨而使用它或因为其他所有人都在使用它。）

来自here的Citate：

人们经常在需要之前选择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：反应状态（我认为是正确的）

可能发生的每个动态渲染都以Editor.jsx。
onClick on一个选项卡（嵌套共享组件）调用Editor.jsx中编写的回调，用于更新Editor.jsx中的状态。然后，此状态更改将重新呈现新的活动选项卡
这意味着在Editor.jsx等使用相同嵌套Tabs.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中，因为编辑器组件的行为不是编辑器的兴趣所在。（或编辑是否应该感兴趣？）

我认为这很糟糕，因为

这里太神奇了。 Immagine在编辑器中出现了更多组件，如sortables，tables等。在Editor.jsx中，您将看不到可以呈现视图的内容。它隐藏在其他组件中。

但是如果它全部在Editor.jsx中处理，那么你就可以对任何变化必须呈现的所有内容进行概述和控制。

适合您的方法是什么？

Answer 1

说到真正的用例，我正在开发一个日常发展的项目，起初，纯粹的React状态管理似乎是一种非常方便的开发方式，当组件结构仍然以某种方式扁平化时它工作得很好，但随着我们的进展，项目变得更加复杂，复杂的意思是，更多的组件变得嵌套，并且一个父组件有一系列嵌套子组件，所以我们必须将道具从父级传递到最远的孩子，每当我们需要重新抚养父母时，所有孩子都必须经历这个循环，就你的情况而言，如果你知道你的项目不会变得更复杂，Tabs.jsx赢了＆可能有类似form的内容，其中包含可能包含subForm的进一步嵌套Grid，你肯定不需要使用Redux复杂化你的生活，但就像我一样前面已经说过，对于我们来说，我们开始注意到在这个阶段，整合Redux将是相当可观的

React状态与Redux状态（真实用例）

我的用例

哪种方法正确？

1 个答案: