React 是目前最流行的前端框架之一，通常搭配 Redux 进行状态管理。在开发大型复杂的应用程序时，我们需要一个有组织的结构项目来维护业务逻辑的复杂性。本篇文章将为大家介绍如何构建一个基于 React 和 Redux 的结构项目，通过详细深入的指导和实际代码示例，帮助大家掌握如何构建优秀的前端应用结构。
项目结构
良好的项目结构是整个前端项目开发流程中必不可少的。一个优秀的前端项目结构需要明确的目录结构、规范的文件命名方式以及适当的模块化架构，以便于代码的管理维护。下面是一个基于 React + Redux 结构的示例项目结构：
-------- --- ------------- --- ------- - --- ---------- - --- ----------- --- ---- - --- -------- - - --- --------- - - --- -------------- - --- ----------- - - --- ------ - - --- --------- - - --- --- - --- ---------- - - --- --------- - - --- --- - --- ----------- - - --- ----------- - - --- -------- - - --- --- - --- --------- - - --- -------- - - --- ---------- - --- -------- - --- -------- - --- ------- - --- ---------- - --- --- --- ----------------- --- ------------ --- ---------
项目结构需要遵循一定的规则，这个示例项目结构可以帮助我们建立一个简单的 React + Redux 项目结构模板。下面对上述目录结构进行详细的解释。
node_modules/: 存放当前项目安装的所有依赖模块。public/: 存放项目公共资源，包括 HTML 文件、图标以及字体文件等。src/: 存放项目源代码。actions/: 存放所有的 action creator，即可调用的函数，用于触发 reducer 修改 state。components/: 存放所有的 React 组件，组件需要被应当组合构建成一个应用。constants/: 存放常量，以便于跨越整个应用中重复使用。containers/: 存放所有的 app 容器，它们将包含 connect() 方法，并将组件作为子组件嵌套其中。reducers/: 存放 reducer 以及 combineReducer 函数，用于统一管理所有 reducer。index.js: 项目入口文件，这是整个应用的起点。store.js: 存放 store 的唯一配置，用于存储整个应用的状态。styles/: 存放所有全局样式。
代码示例
示例项目结构已经给出了大量的目录结构信息，并给出了哪些文件需要创见。现在，我们将进一步深入，为你提供一个具体的代码示例。
actionTypes.js
------ ----- ----------- - -------------- ------ ----- ------------------ - --------------------- ------ ----- ------------------ - --------------------- ------ ----- ------------------ - --------------------- ---
actionTypes.js 存放所有的 action 类型字符串常量。将所有应用中使用到的 action type 存放在一个文件中是很有必要的。它可以避免在应用程序的不同部分重复使用 action type 名称，从而导致难以维护的问题。
action.js
------ - -- ----------- ---- ----------------
------ -------- ------------ -
------ -
----- -----------------------
--
-
------ -------- ------------------ -
------ -
----- ------------------------------
--
-
------ -------- ----------------------- -
------ -
----- -------------------------------
-----
--
-
------ -------- ---------------------- -
------ -
----- -------------------------------
----
--
-
---action.js 包含所有 action creator，用于在应用中触发 state 的修改。通过调用 dispatch() 方法，可以将 action 对象传入 store，然后 store 将根据 action.type 执行相应的 reducer(s) 函数。
reducers/reducer.js
------ - -- ----------- ---- -------------------------
----- ------------ - -
---------- ------
----------- ------
----- ---
------ ----
--
------ ------- -------- ------------- - ------------- ------- -
------------------- -
---- ------------------------
------ -
---------
----------- -----------------
--
---- -------------------------------
------ -
---------
---------- -----
----- ---
------ ----
--
---- -------------------------------
------ -
---------
---------- ------
------ ------------
--
---- -------------------------------
------ -
---------
---------- ------
----- ------------
------ ----
--
---
--------
------ ------
-
--reducer.js 包含了所有的 reducer 函数。这些函数是派遣给 reducer 的 action 的响应。在 reducer 中处理 application 的 state 变化，并准备将新 state 传递给 store 中。
每个 reducer 函数都应该类似于纯函数，它的输出仅受到它的输入影响，因此它们应该尽量避免产生副作用。
reducers/index.js
------ - --------------- - ---- -------- ------ ------- ---- ------------ ----- ----------- - ----------------- ------- --- ------ ------- ------------
index.js 文件的内容比较简单，它将 action 的 reducer 方法的组合转到一个大的 reducer 中，并将其提交到 store 中。做到了单一的原则，每个 reducer 都维护其自己的状态部分，只需要担任整个应用程序各个部分之间的协调器的角色。
store.js
------ - ------------ --------------- - ---- --------
------ --------------- ---- --------------
------ - ------------ - ---- ---------------
------ ----------- ---- -------------
----- ---------------- - ---------------
----- ----- - ------------
------------
----------------
----------------
----------------
-
--
------ ------- ------store.js 文件存放应用程序唯一的 store 的配置。它为整个应用程序存储和管理应用程序的状态。在示例中，我们添加了一个中间件 redux-thunk，它能够使返回一个函数的 action 从而扩展 redux 的功能。在调用 dispatch() 方法时，Redux 使用 store 和 action 来计算新的应用程序状态。这个新的状态是在 store 中被存储的。
containers/HomePage.js
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ------------------ - ---- --------
------ - --------- - ---- -------------------------
----- -------- ------- --------- -
------------------- -
-----------------------
-
-------- -
----- - ------ ---------- ---- - - -----------
--------- -
------ -
------------------
--
-
------ -
-----
---------- - --------------------- - -
----
-
------------------ ------ -- -
--- --------------------------------
--
-
-----
--
------
--
-
-
-------- ---------------------- -
------ -
------ -----------------
---------- ---------------------
----- ---------------
--
-
-------- ---------------------------- -
------ --------------------
---------
-- ----------
-
------ ------- ------------------------ ------------------------------
HomePage.js 文件是典型的 container 容器组件，将自己的 state 通过 connect() 方法与 Redux 相关联。相比组件本身而言，container 容器组件是更加拥有 state 的组件，由于它们需要传递 state 给它们包装的子组件，因此它们需要更多的知识才能正确地进行状态管理。在这个示例中，HomePage 组件容器是与 Redux 相关联的，通过 dispatch() 方法将导致 state 的改变。它还使用了 mapStateToProps 函数将组件的 state 映射到 Redux state 中。在 mapDispatchToProps 中，fetchNews action 被转换为一个 prop，并传递给组件。
总结
在这篇文章中，我们详细介绍了如何构建一个基于 React + Redux 结构项目。我们从项目目录结构，到单一职责原则的是实现，到实际的代码示例中逐步揭示了优秀的前端应用结构的设计方法。希望这篇文章能帮助大家设计出高效可靠的前端项目。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64acd17848841e98948dc739