javascript - 如何以及何时最好地模块化有和没有 Redux 的组件？

Question

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

现在，我对 React 还是很陌生，可以想象有两种方式：

方案一：解耦编辑器组件

创建一个Editor组件，它包含我公司中所有人的数组。我确实在我的应用程序的 Redux 状态下保存了这些人，但是编辑器组件不会在我的 Redux 状态下工作，而是首先对其内部状态进行所有更改，并且只有单击保存后，编辑器组件才会将这些更改提交到我的 Redux 状态。这可能是个问题，如果有人不保存他们的编辑，更改可能会丢失。

这里的优点是我Editor与我的应用程序的其余部分解耦，并且逻辑Editor将保留在该组件中。

解决方案 2：将 Editor 组件连接到 Redux

在这里，我会将我的编辑器组件连接到 Redux。所以我不会给我的组件 people 数组，而是通过选择器（例如）直接访问我的 Redux 存储。我也不会deletePerson()在我的组件内部有一个函数，而是将它作为一个 prop 传递给我的组件（它可能是一个 Redux 操作）。这样我的组件将直接在状态上工作，我认为这是有优势的。

但是从这个应用程序中取出它并在其他地方重用它会变得越来越困难，我的组件变得越复杂。

---

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

标签： javascriptreactjsreduxarchitecturereact-redux

Answer 1

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

你应该尝试混合 Redux React 的特性。首先，将您的展示组件和容器组件分开，并在您的一个容器组件中将道具直接传递给单击时的 redux 存储等。然后使用 redux 操作访问存储，如删除等。提供一个使用 React 表示组件的 UI 用于数据输入，并将此数据传递给 redux 存储。当您认为它们有用且不会破坏您的应用程序时，请使用 redux 操作。转到https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0了解有关如何连接演示组件和容器组件的更多详细信息。