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

时间:2018-07-20 20:38:10

标签: javascript reactjs redux architecture react-redux

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

现在,我仍然对React还是一个陌生的人,可以想象以 2种方式做到这一点:

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

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

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

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

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

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


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

1 个答案:

答案 0 :(得分:0)

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

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