Redux 是一个流行的状态管理库，被广泛用于 React 应用程序中。虽然 Redux 提供了一种强大的方法来管理应用程序的状态，但是如何组织 Redux 组件和容器仍然是一个有挑战性的问题。在本文中，我们将介绍如何组织 Redux 组件和容器，并提供一些实用的指导原则。
Redux 组件和容器
在 Redux 中，组件和容器是两个不同的概念。组件是指负责渲染 UI 的 React 组件，而容器是指连接到 Redux store 并将状态传递给组件的 React 组件。
以下是 Redux 组件和容器的示例代码：
-- -------------------- ---- -------
-- ---- ----- --
------ ----- ---- --------
------ --------- ---- -------------
----- ------- - -- ------ ------------ ----------- -- -- -
-----
--------------------
------- --------------------------------
------- --------------------------------
------
--
----------------- - -
------ ----------------------------
------------ --------------------------
------------ -------------------------
--
------ ------- ---------- -------------------- ---- ------- -- ---- ----- -- ------ - ------- - ---- -------------- ------ ------- ---- ------------ ------ - ---------- --------- - ---- ------------- ----- --------------- - ----- -- -- ------ ------------- --- ----- ------------------ - - ------------ ---------- ------------ --------- -- ------ ------- -------- ---------------- ------------------ -----------
在上面的代码中，Counter 组件是一个简单的计数器 UI。CounterContainer 是一个连接到 Redux store 的容器组件，该组件将 Counter 组件用作其子组件，并将状态和操作映射到 Counter 组件的属性。
组织 Redux 组件和容器
下面是一些组织 Redux 组件和容器的最佳实践：
将相关的组件和容器放在一起
将相关的组件和容器放在一起可以更好地组织代码并提高可读性。例如，如果你有一个 TodoList 组件和一个 AddTodo 容器，你可以将它们放在同一个文件夹中，如下所示：
components/ TodoList.js AddTodo.js containers/ AddTodo.js
将容器与路由分离
通常情况下，我们会将容器组件与路由组件分离。这样做可以使路由更加清晰，并且可以更容易地测试容器组件。例如，你可能会有以下文件：
components/ TodoList.js AddTodo.js containers/ VisibleTodoList.js AddTodo.js routes/ index.js
其中，VisibleTodoList 是连接到 Redux store 的容器组件，而 TodoList 则是它的子组件。我们将它们放在 containers 文件夹中。另一方面，AddTodo 是一个简单的表单 UI，我们将它放在 components 文件夹中。最后，我们将路由组件放在 routes 文件夹中。
将 Action 和 Reducer 放在同一个文件中
虽然你可以将 action 和 reducer 分别放在不同的文件中，但是将它们放在同一个文件中可以更好地组织代码并提高可读性。例如，以下是一个典型的 action/reducer 文件：
-- -------------------- ---- -------
------ ----- --------- - -- -- --
----- -----------
---
------ ----- --------- - -- -- --
----- -----------
---
----- -------------- - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ ----- - --
---- ------------
------ ----- - --
--------
------ ------
-
--
------ ------- ---------------在上面的代码中，我们将 `increment
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25822