代码之家  ›  专栏  ›  技术社区  ›  R. Kohlisch

如何以及何时最好地模块化有和没有redux的组件?

  •  1
  • R. Kohlisch  · 技术社区  · 7 年前

    假设我想为我的软件创建一个小编辑器,帮助我组织公司的人员我将使用react&redux。编辑器是一个react组件(或者可能是容器?),它每次显示一个人我可以编辑有关此人的内容,删除字段等。当我准备好时,我可以单击一个按钮,然后给我下一个要编辑的人。

    现在,我还没来得及做出反应,可以想象在 两种方式:

    解决方案1:分离编辑器组件

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

    我的优势是 编辑 与我的应用程序的其余部分分离,并且 编辑 将保留在该组件中。

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

    在这里,我将把编辑器组件连接到redux。所以我不会给我的组件people数组,而是通过选择器直接访问我的Redux商店(例如)我也不会有 deletePerson() 函数在我的组件内部,但将其作为道具传递到我的组件中(这可能是一个Redux操作)这样,我的组件就可以直接在state上工作,我可以看到它有优势。

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


    请记住,我是一个初学者,这两个解决方案是我在自己的应用程序中遇到的问题的回应。不过,如果你能在这里帮我,并向我解释我该如何看待这样的问题,我将不胜感激。有没有第三种解决方案我没有提到?还是我误解了一个概念? 就我个人而言,我倾向于采用第一种解决方案,但我也知道redux的整个理念是将状态保持在一个地方。你有什么建议?一个解决方案是否有性能差异/优势?

    1 回复  |  直到 7 年前
        1
  •  0
  •   Bilal Kazmi    7 年前

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

    您应该尝试混合redux react的特性。首先,分离表示组件和容器组件,在其中一个容器组件中,单击时将道具直接传递给redux store,等等。然后使用redux操作访问存储,如删除等。提供一个使用react表示组件进行数据输入的ui,并将此数据传递给redux store。当你认为redux操作有用而不是破坏你的应用程序时,就使用它们。 去 https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 有关如何连接表示组件和容器组件的详细信息。