如何和何时最佳地模块化带/不带Redux的组件？

Question

假设我想为我的软件创建一个小的编辑器，以帮助我组织公司中的人员。 我将使用React＆Redux。 编辑器是一个React组件（或者可能是容器？），它一次只显示一个人。 我可以编辑有关此人的内容，删除字段等，当我准备就绪时，我可以单击一个按钮，该按钮将给我下一个要编辑的人。

现在，我对React还是一个陌生的人，可以想象通过两种方式做到这一点：

解决方案1：解耦编辑器组件

创建一个Editor组件，该组件将由公司中的所有人员组成。 我确实已将这些人保存在我的应用程序的Redux状态中，但是编辑器组件将无法在我的Redux状态下工作，但会首先在其内部状态中进行所有更改，并且只有单击“保存”后，编辑器组件才会将这些更改提交到我的Redux状态。 这可能是个问题，如果有人不保存所做的修改，更改可能会丢失。

这样做的好处是，我的Editor与应用程序的其余部分解耦了，并且Editor的逻辑将保留在该组件中。

解决方案2：将编辑器组件连接到Redux

在这里，我将编辑器组件连接到Redux。 因此，我不会给我的组件添加人员数组，而是通过选择器直接访问我的Redux存储（例如）。 我也没有在组件内部使用deletePerson()函数，而是将其作为prop传递到组件中（大概是Redux动作）。 这样，我的组件将直接在状态上工作，我认为这是有优势的。

但是，将其从该应用程序中删除并在其他地方重用将变得越来越困难，因为我的组件变得越来越复杂。

---

请记住，我是一个初学者，这两个解决方案是我针对自己的应用程序中遇到的问题而提出的。 但是，如果您能在这里为我提供帮助，并向我解释如何应对此类问题，我将不胜感激。 我可能没有提到第三种解决方案吗？ 还是我误解了一个概念？ 就个人而言，我倾向于采用解决方案1，但我也知道Redux的整个想法是将状态保持在一个地方。 您有什么建议？ 一种解决方案是否存在性能差异/优势？

Answer 1

您的第一个解决方案很好，但是为什么不使用提供的服务呢？

您应该尝试混合使用Redux React的功能。 首先，将您的外观组件和容器组件分开，并在其中一个容器组件中将道具直接通过点击等方式传递到redux存储。 然后使用redux操作访问商店，如删除等。 提供一个使用React表示性组件的UI进行数据输入，并将此数据传递到redux存储。 当您认为redux动作很有用且不会破坏应用程序的结构时，请使用它们。 请访问https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 ，以获取有关如何连接演示组件和容器组件的更多详细信息。