在现代 web 开发中，单页应用（SPA）已经成为主流，而 React 和 Redux 也成为了构建 SPA 的主要技术栈。随着应用复杂度的增加，需要更加高效和可维护的开发方式。Rekit 是一个可以帮助开发者更加轻松地构建 React+Redux 应用的工具，它基于 Webpack 和 React 种种优势，提供了一种全新的方式来构建一个完整的 React+Redux 应用。本文将针对 Rekit 进行介绍和使用指导，以使用 Rekit 构建 React+Redux SPA 应用为例。
什么是 Rekit
Rekit 是一个开源工具，具备可扩展性的 CLI（命令行界面），它允许开发者通过不同的命令构建、调试和测试应用，且没有任何侵入性的修改。Rekit 相比原始开发方式的优点如下：
可扩展和可维护性高：大部分项目的代码结构、文件名和组件等都是由开发人员自行约定的，这导致了团队间代码规范和习惯的不同。Rekit 的结构是根据最佳实践的标准化结构来组织的，一旦一个团队熟悉了这种结构，无论团队大小或新的成员加入，都可以轻松构建应用。
较少的出错概率：因为约定、而非配置的方式，因此开发者不需要编写大量的配置文件，也因此减少了由于人为失误导致的错误。
更快的构建速度：维持一致的项目结构极大地提高了开发者效率，同时因为很多通用视图组件得到提前封装，大大节省了重复劳动，保持开发速度。
使用 Rekit 构建 React+Redux SPA 应用
在使用 Rekit 构建 React+Redux SPA 应用之前，需要通过以下命令安装 Rekit：
npm i -g rekit
在安装完毕后，使用以下命令构建一个基本的 React+Redux SPA 应用：
rekit create my-app
在此我们以构建 my-app 为例，构建完成后的目录结构如下：
-- -------------------- ---- ------- ------- --- ------ --- ----- --- ---- --- ------------ --- ------ --- --- --- ----- --- ----- --- --------- --- ------------
Rekit 提供了很多工具以及命令行，在构建一个 React+Redux SPA 应用的时候，比较常见的几个命令行包括：
rekit add feature xxx
用于给项目添加新的功能，其中 xxx 为新增功能的名称，添加新的功能会新增一些文件和文件夹。
rekit list feature
用于查看项目中所有的功能模块。
rekit remove feature xxx
用于删除项目中的某个功能模块。
rekit test
用于启动测试所有单元测试文件。
rekit build
用于构建项目打包。构建完成后，打包文件夹将会存放在 dist 目录中。
rekit clean
用于清理项目的缓存数据。
可见使用 Rekit 主要关注的是对应 4 个文件夹，分别是 actions、components、constants 和 containers 文件夹。下面会分别说明这 4 个文件夹的作用。
没错，我们的主要工作将会在这个文件夹内进行。
1. components
定义 ReactUI 组件，每个组件的主要工作是提供独立功能，将状态从父组件中抽离出来。
2. containers
这里的容器组件和组件组件区分开来，它负责把组件组织到页面中去。容器组件是一种特殊的 React 组件，它将组件需要的状态和方法以属性的方式传递给它们，在下一节状态管理中，我们把整个应用所有的状态都放在“窝”里，然后通过容器组件将状态映射到各个组件中去。
3. actions
一个动作就是一个 JavaScript 对象，它描述了用在应用中的动态数据。React 应用本质是一组动态数据与用户交互的过程，而 actions 的作用是将这些数据打包成一个写操作的对象，然后它们传递给 view，从而更新数据展示。在 Redux 中，action 又进一步细分为：action 类型（type）和 action 创建器（creator）。
4. reducers
一个 reducer 就是一个 JavaScript 函数，用于在整个应用的多个组件之间共享某些状态。reducer 是一个纯函数，它根据前一个状态和动作对象，计算并返回新的状态。Redux 的状态就是一个纯 JavaScript 对象，由多个 reducer 协作完成，每个 reducer 负责管理某个子部分的状态，它们从父组件中抽离出来的状态是传递给容器组件的。
示例代码
下面是一个使用 Rekit 构建 React+Redux SPA 应用的示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ---------- - ---- ------------
------ ---- ---- -------------
------ ------------
----- --- ------- --------- -
------------------ -
-------------
------------ - ------------------------
-
--------- -
----------------------------- ---------
-
-------- -
------ -
---- ----------------
------- -----------------------
---- ---------- -------------------- ---------- --
--- --------------------------------------------
---------
-- ----------------------
-- --- -------- ---- ----------------------- --- ---- -- -------
----
------- --------------------------- ---------------
------
--
-
-
-------- ---------------------- -
------ -
----- ----------------
--
-
-------- ---------------------------- -
------ -
----------- ---- -- ---------------------------
--
-
------ ------- ------------------------ -------------------------上述代码为 React 程序的入口，使用 connect 函数对组件进行处理，其中 mapStateToProps 函数可以将 Redux store 中的 state 映射到组件中的 props，而 mapDispatchToProps 函数可以将 store 中的 dispatch 函数传递到 props 中。最后，我们可以将一个 React 组件绑定到某个容器中。
总结
使用 Rekit 作为构建工具，可以极大地提高我们构建 React+Redux SPA 应用的效率，大大减少了项目开发的时间和精力。在此，希望大家能够使用 Rekit 更加愉快地构建我们的 React+Redux SPA 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b3b86648841e9894ff5003