前言
在前端开发中，状态管理一直是一个比较棘手的问题。随着单页应用的普及，状态管理的重要性愈发凸显。Redux 作为一种轻量、可预测、易于测试的状态管理库，受到了广泛的关注和应用。
为了更好地演示 Redux 在实际项目中的应用，开发者们设计了各种各样的 Redux demo。其中，redux-demo-coolshare 是一款非常优秀的 React Redux 全家桶开发的仿豆瓣分享网站 demo，相信它会给 Redux 初学者们带来无限的启示。
本篇文章将详细介绍如何安装、使用、定制和拓展 redux-demo-coolshare。
安装与使用
首先，需要在本地安装 Node.js 和 npm。
然后，通过下面命令安装 redux-demo-coolshare：
npm install redux-demo-coolshare
在工程中引入 redux-demo-coolshare：
-- -------------------- ---- ------- -- ---- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - -------- - ---- -------------- ------ - ------------ --------------- - ---- -------- ------ ---------- ---- -------------- -- ------ ------ --- ---- ------------------- ------ -------- ---- ------------- -- -- ----- ----- ----- ----- - --------------------- --- ----------------------------- -- ----- ---------------- --------- -------------- ---- -- ------------ ------------------------------- --运行项目：
npm start
然后打开
http://localhost:3000查看效果。
深入介绍
文件结构
redux-demo-coolshare 项目的文件结构如下：
-- -------------------- ---- ------- ---------------- ---------- ------- ----------- -------------- ------------- ------------ ---------- ---------- --------- ----------- ------------- -------------------- --------------- ------------ ------------
其中，src 目录下的结构如下：
-- -------------------- ---- ------- ----------- ---------- ---------- ------------- ---------- -------------- --------- ------------------- --------------- ------------ ----------- ---------- ------------- ------------ ------------- ----------------- ------------ ---------- ---------- ------------- ---------- ----------- ---------- ----------- ---------- ----------- -------------- ----------------- --------- ----------- -----------
功能介绍
redux-demo-coolshare 具有以下功能：
注册、登录功能；
图书及评论操作，包括增、删、改、查等功能；
给图书点赞和取消点赞功能；
分页功能。
关键技术
本节将围绕 redux-demo-coolshare 的关键技术做详细介绍。
React Router
React Router 是 React.js 官方实现的路由器，它是一个声明式路由库，将 URL 和组件映射（映射方式有很多，包括嵌套路由、动态路由等）起来。
在 redux-demo-coolshare 项目中，路由是通过 React Router 实现的。src/routes 文件夹下的 index.js 文件包含整个应用的路由结构：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ---------- - ---- ---------------
------ --- ---- --------------------
------ ---- ---- ---------------------
------ --------- ---- --------------------------
------ ------- ---- ------------------------
------ ------------- ---- ------------------------------
------ ----------- ---- -----------------------
------ ------- -
------ -------- ----------------
----------- ---------------- --
------ ---------------- ---------------------------------- --
------ -------------- -------------------------------- --
------ ------------ -------------------------------------- --
--------
--IndexRoute表示默认子路由；Route path表示具体路由路径；component指定加载的组件。
在上面代码中，通过自定义 RequireAuth 组件实现了登录校验。
Redux
redux-demo-coolshare 使用了 Redux 来进行状态管理。在 src/reducers 文件夹中分别编写了 auth.js、book.js、comment.js 和 like.js 四个 reducer，最终将它们合并成了一个 reducer。
以 book.js 为例，该 reducer 是实现图书管理的关键：
-- -------------------- ---- -------
------ ------ ---- --------------
------ -
--------------------
-------------------
---------------------
---------------------
---------------------
--------------
--------------
--------------
--------------
----------
- ---- ---------------------------
----- ------------- - -
---- ---
----- -----
----------- ------
----------- ------
----------- ------
----------- -----
--
------ ------- -------------- - -------------- ------- -
------------------- -
---- --------------------
------ - --------- ---- -------------- --
-- ----- --------
--------
------ ------
-
-- 常量
ActionTypes.js中存放所有 action type 的名称； INITIAL_STATE为 reducer 的初始化状态；...state用于展开对象，以保证状态的不可变性；switch语句根据 action 的类型返回不同的状态。
在 src/actions 文件夹中存放了所有异步 / 同步 action，下面是一个异步 action 的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -
--------------------
-------------
- ---- ---------------------------
------ - ------- - ---- ----------------------
------ ----- ---------- - -- -- ---------- -- -
---------- ----- ------------- ---
------ ----------------------------- - -------- - -------------- -------------------------------- - --
---------------- -- -
----------
----- --------------------
-------- ------------------
---
---
--- 函数返回一个回调函数，该回调函数接受
dispatch参数； dispatch方法将 action 的结果发送给 reducer；Axios是一个基于 Promise 的 HTTP 客户端库。
Redux Thunk
redux-demo-coolshare 采用了 Redux Thunk 中间件来支持异步 action。Thunk 是指将一个表达式封装成一个闭包，并提供额外的环境变量（比如 dispatch 或者 getState）用于该表达式的求值。
常规情况下
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ --------------- ---- --------------
------ ------- ---- -------------------
----- ----- - ------------
--------
----------------
---------------
-
--Redux DevTools 情况下
-- -------------------- ---- ------- ------ - ------------ ---------------- ------- - ---- -------- ------ --------------- ---- -------------- ------ ------- ---- ------------------- ----- -------- - -------- --------------------------------- ------------------------------------ -- -------------------------------------- -- ---- -- -- -- ----- ----- - -------------------- --- ----------
CSS Modules
redux-demo-coolshare 项目中使用了 CSS Modules 来对样式进行模块化管理。在 src/styles 文件夹下分别编写了 app.scss、common.scss 和 dashboard.scss 三个样式，其中 dashboard.scss 包含了针对特定组件的样式。
CSS Modules 具有如下优点：
- 防止全局样式污染；
- 方便优化 CSS 样式；
- 可以在类似 React 这样的组件库中非常方便地实现组件样式的重用。
定制和拓展
界面定制
redux-demo-coolshare 项目的 UI 层面代码在 src/components 文件夹下，可以通过修改组件 CSS 的方式来定制和美化界面。
功能拓展
除了上述介绍的基础功能之外，开发人员还可以根据实际项目需求进行功能拓展，比如：
- 对评论的点赞 / 取消点赞支持回调函数；
- 从后端获取数据时增加 Loading 效果；
- 对状态管理库进行深度优化，比如使用 Immutable.js 等。
示例代码
完整的 redux-demo-coolshare 项目代码可以在以下链接中找到：
https://github.com/EdwardChou/redux-demo-coolshare
总结
redux-demo-coolshare 是一款 React Redux 全家桶开发的仿豆瓣分享网站 demo，其源码清晰简洁，具有很好的学习和借鉴意义。本文通过介绍其安装、使用、定制和拓展等方面的内容，希望能帮助读者更深入地理解和应用 Redux，推动其在实际项目中的广泛应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558d381e8991b448d6231