在前端开发领域，React 技术的出现，为我们提供了更好的组件化开发方式，并且擅长处理大规模数据渲染，但是根据不同业务特性，我们也需要针对性地进行组织和管理。而 React-Redux 框架则提供了一种比较好的解决方案，但是在一定程度上增加了代码的复杂度和可读性。因此，我们需要使用一种 boilerplate 包将这些技术组合在一起，以简化开发过程并提高代码质量。
本文介绍的 npm 包 react-redux-universal-boilerplate 正是如此，它是一个没有开发过程的即装即用的全能商用级别的框架，它涵盖了应用程序包括服务器端渲染在内的各个方面，并提供了最好的性能，质量和稳定性。
安装
首先需要确保安装了 Node.js 及 npm，然后执行以下命令进行安装：
npm install react-redux-universal-boilerplate --save
安装成功后，你需要在你的项目中使用该框架，你可以选择手动集成或使用提供的命令行工具。
手动集成
在您的项目中手动集成 react-redux-universal-boilerplate，按照以下步骤完成：
- 在需要使用这个框架的文件中引入该库：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ ----------- ---- -------------
------ --- ---- -------------------
----- ----- - -------------------------
-------
--------- --------------
---- --
------------
-------------------------------
--- 在
src目录下创建一个server.js文件并输入以下内容：
-- -------------------- ---- -------
------ ------- ---- ----------
------ ----- ---- --------
------ ------- ---- ----------
------ -------------------- ---- -------------------------
------ -------------------- ---- -------------------------
------ ------ ---- -------------------
------ --- ---- -----------------------
----- -------- - ----------------
----- --- - ----------
-------------------------------------- - ------- ----- ----------- ------------------------ ----
----------------------------------------
------------ ----- ---- -- -
----------
--------- -----
------
------
----- --------------- ---------------------------------------------
----- ----------------
------------ ----- --------- -------------------
-------
------
---- ------------------------------------- ----------
------- --------------------------
-------
-------
---
---
---------------- ---------- -
------------------- -- --------- -- ------------------------
---- 创建一个
webpack.config.js文件并输入以下内容：
-- -------------------- ---- -------
--- ------- - -------------------
--- ---- - ----------------
-------------- - -
-------- ----------------------- ---------
------ -
-----------------
------------
--
------- -
----- ----------------------- -----------
--------- ------------
----------- ---
--
------- -
------ -
-
----- --------------
-------- -----------------
---- -
-
------- ---------------
-------- -
-------- ------- --------
-
--
-
-
-
--
-------- -
--- ------------------------------------
--
---------- -
------------ --------
---- ----
-
--- 运行项目：
npm run start
使用命令行工具
使用命令行工具安装并初始化，执行以下命令：
npm install -g react-redux-universal-boilerplate boiler init my-app cd my-app npm run start
你将获得一个新的项目，其中包括以下文件：
-- -------------------- ---- -------
-------
-- ------------
-- ----
-- --------
-- -----------
-- ------
-- ---------
-- --------
-- --------------
-- -----------------
-- ---------
-- --------
-- ---------使用指南
react-redux-universal-boilerplate 是一个使用 React + Redux 技术栈开发 Web 应用程序所需的 boilerplate，可以让用户快速构建可扩展，可重用的应用。
文件结构
该框架启动后文件结构如下：
-- -------------------- ---- ------- ---------------------------------- -- ------- - -- ---------------------- - -- --------------------- - -- ---------------------- -- ---- - -- ------- - - -- -------- - - -- ---------- - -- ------- - - -- -------- - - -- ------------- - -- ------- - - -- ----------- - - -- ---------- - - -- --------- - - -- ------- -- ------------ -- ------
其中：
config/目录：包含 webpack 配置文件，可对该框架的构建行为进行微调。src/client/目录：包含前端应用代码和模板。src/server/目录：包含应用程序入口文件和服务器端渲染中间件。src/shared/目录：包含前后端通用的应用代码，如 reducers、routes 和 components。
自定义路由
该框架在服务器端采用了 express-router 进行路由配置，可通过修改 server/middleware.js 文件来添加或编辑路由：
-- -------------------- ---- -------
------ ------- ---- ----------
------ - --------- - ---- -------------------
------ - ----------- - ---- --------
------ ----------- ---- ---------------------
------ - ------------ - ---- ----------------------------
------ ---- ---- ----------------------------
------ --- ---- ---------------------------
------ ------ ---- -------------------
----- ------ - -----------------
----- ------------ - ----- ---- -- -
----- ----- - -------------------------
----- -------- - ------------------- ------ -- -
-- ------------------- ------ -- --------------- -- -------------------------- -
-----------------------------------------------------------------------
-
------ ----
-- ----
------ ----------------------------- -- -
----- ------ - ---------------
--------- --------------
------------- ------------------ -------------
---- --
---------------
-----------
--
----- ---- - -------------------------- --------------- ------------- ----
------------------------------- -----------------
---
--
---------------------------------------------- ----------------
-------------------------- ----- ---- -- -
---------- ------ ------------------------------ ---
---
--------------- --------------
------ ------- -------其中：
routes由src/shared/routes.jsx来提供，路由格式如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- -------------------
------ --- ---- -------------------
------ -------- ---- ------------------------
------ ------- -
------ ----------------
------ -------- -------------------- --
--------
--- 在服务器端使用 Express 的路由配置，请求到达任意路径都将使用
handleRender函数进行处理。 - 根据路由渲染组件，
Acc用于收集符合条件的路由，然后进行批量处理。 - 获取组件数据的方法是
fetchData，这个将在快速开始教程中实现。
自定义 reducer
框架采用 ducks 模式 来组织 reducer，例如它将 src/shared/reducers/counter.js 文件中的计数器 reducer 写成如下几部分：
-- -------------------- ---- -------
----- ----------------- - --------------------
------ -------- ----------- -
------ -
----- -----------------
--
-
------ ------- -------- ------------- - - ------ - -- ------ - --- -
------ ------------- -
---- ------------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-其中：
INCREMENT_COUNTER定义了增加计数器的 action 类型。increment导出了一个 action creator。counter为纯函数，接收 action 和 state，返回新的 state。
将 reducer 进行合并，最终可将处理逻辑与 actions 结合在一起：
import { combineReducers } from 'redux';
import counter from './counter';
export default combineReducers({
counter
});实现异步数据获取
在服务器端，通过标记 route 提供的组件以及它的一个静态方法 fetchData，我们可以轻松地实现数据预加载（想了解良好的 SEO：优化 SEO React）。
例如，以下是 HomePage 组件，它请求计数器 API 并使用 increment 的自增器：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ---------- ------------ - ---- ---------------------
----- -------- ------- --------------- -
-------------------- -
-- ----------------- --- ---------- -
-------------------------
-
-
------------- -
------------------------------
-
-------- -
------ -
-----
-------------
--------- ----------------- -- --------------
------- ----------- -- --------------------------------------
------
--
-
-
----- --------------- - ----- -- --
------ -------------------
---
----- ------------------ - -
----------------- ----------
------------ ------------
--
------ ------- ------------------------ ------------------------------
------------------ - -- -------- -- -- -------------------------针对以上代码段的解释：
fetchData是一个静态方法，接收一个{ dispatch }对象并返回派发 action 的 promise。componentWillMount是 React 生命周期函数，在第一次渲染前下发对 API 的请求。mapStateToProps将仓库中的 state 映射到 props。mapDispatchToProps链接 action creator 并将它们映射到 props。
使用命令行工具
该框架使用脚手架模式，使得创建新应用变得容易。你可以使用 boiler 命令创建新的应用程序：
boiler init my-app cd my-app npm start
你也可以使用 boiler build 命令将应用打包到硬盘上：
npm run build
结言
在本文中，我们讨论了如何使用 react-redux-universal-boilerplate 提高 Web 应用代码的可读性、可维护性和代码重用性。同时，我们通过自定义路由，自定义 reducer 和处理异步 action 练习了相关的知识点，并在命令行工具中了解到了如何使用脚手架模式快速创建新的项目。
这些技术和模型应该帮助前端开发人员更好地全面运用 React + Redux 技术栈来搭建高质量的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79952