在React中使用Redux

这是Webpack+React系列配置过程记录的第六篇。其他内容请参考：

第一篇：使用webpack、babel、react、antdesign配置单页面应用开发环境

第二篇：使用react-router实现单页面应用路由

第三篇：优化单页面开发环境：webpack与react的运行时打包与热更新

第四篇：React配合Webpack实现代码分割与异步加载

第五篇：分离Webpack开发环境与生产环境的配置

第六篇：在React中使用Redux

这篇文章的主要内容包括： 1. 修改一下之前存在的问题；
2. 在框架中引入redux，使用一个例子简单介绍redux的使用方法；
3. 其他redux辅助库。

修复遗留问题

webpack.prod.config.js中缺少了对path库的引用，执行构建

npm run build:prod

的时候失败。在文件开始的地方引入node.js的path库就可以了。

package.json里面定义了一个build:dev的脚本，这个脚本其实有点多余，不过有时候需要打包测试版本的文件，所以还是需要存在。主要有个问题是webpack.dev.config.js中output节点下错误定义了path的值为根目录'/'，这在使用

npm start

命令启动运行时打包的时候看不出问题，但是在使用

npm run build:dev

时会出现无法写文件到根目录的权限错误。只要把path的值改掉就可以。

path: config.publicPath

改成

path: config.staticPath,publicPath: config.publicPath

。

css-loader和less-loader导出的样式类名太长，还是把localIdentName中的path部分去掉比较好看。

redux

安装redux
安装依赖的命令如下：

npm install --save redux react-redux redux-thunk
npm install --save-dev redux-logger

redux不用说了，我是把它当成一个本地数据库使用，react-redux帮助你完成数据订阅，redux-thunk可以放你实现异步action，redux-logger是redux的日志中间件。

关于redux与代码布局
在开始介绍之前我想先就redux的使用发表一些自己的看法：

前文说了我把redux当成一个本地数据库，因此我倾向于把redux封装类似于mvc中的Model的角色，独立为一层。这与另一种观点——我在公司的项目更倾向于把每个页面当成一个独立模块，每个模块维护自己的reducer和action的观点，有所出入。

我的做法可以更好地实现reducer的复用。而对我自己来说更重要的好处是集中修改。更适合小项目或者独自开发一个项目的场景。

我公司的项目的做法对多人协同开发更有利，毕竟每个人维护好自己的代码就可以了。公司项目的这种方法有几个问题让我比较难以接受：

第一个是模块越多reducer和action的定义越多，很多时候这些代码都是差不多的。

更重要的是第二个问题：模块数据在store里面的存储是直接在根state下面排列下来的，根state的数据格式样式有点像这样：

{
aModuleData:{...},
bModuleData:{...},
cModuleData:{...},
dModuleData:{...},
...
}

项目的原意是希望每个模块的保持独立，但实际上使用的时候却是有极大的可能出现aModule同时使用aModuleData和bModuleData的情况。这跟每个人维护自己的代码的初衷有悖，也没有发挥好redux的真正能力。

还有一个小问题是reducer的组织通常影响着应用数据state的样式，把reducer分散到每个模块之后，state的形式在代码上很难直管地反映出来，特别是当模块是动态加载的时候更甚。不过借助logger等工具可以解决。

关于这块的争议Redux的教程中有提及。

使用redux
无论代码怎么布局，使用redux的方法主要还是三步曲：创建store、创建action、创建reducer。而在这之后才是与业务或者组件相关的数据处理和展示。

先看一下我的做法的代码布局：



创建store的代码集中在model/index.js中，model/actions/.js和model/reducer/.js里面分别是写action创建函数和reducer函数的地方，根据模块可以自己DIY。

model/index.js的代码如下：



model/actions/index.js的代码如下：



这里定义了一个名叫login的异步actionCreator以及三个普通的actionCreator。

actionCreator被某个组件调用后会向store发送action，然后被reducer处理，reducer定义在model/reducers/index.js中，代码如下：



这就完成了三步曲了。上面的代码简单地模拟了登录的动作。登录页面用到的数据存放在loginPageData中，登陆后获取到的当前登录用户数据存储在实体数据entities中。

接下来要把redux和react联系起来，也就是把redux的store中的数据交给react的组件使用。

第一步需要挂载redux的store到react，为react提供数据支持。最简单的做法是找到应用的根组件（我这里是BasicExample.js），然后在它的render函数中最外层添加Providor标签。代码片段如下：



红线部分画出了改动点，从model/index.js中导出了store对象，通过react-redux提供的Providor标签挂载到react中，为react提供数据支持。

看最后的红线中，我们在Home组件里面添加了这次的测试例子ReduxDemo。它的代码如下：



代码的重点在connect函数。这个函数也是由react-redux提供的。使用它可以包装普通的展示组件（这里是ReduxDemo——只负责展示数据），然后返回一个容器组件。connect函数通过第一个参数让展示组件订阅了来自store的数据；通过第二个参数让展示组件默认可以dispatch各种action。

这个例子在ReduxDemo挂载完成后调用login接口模拟登陆。返回结果被塞到store中（数据格式由先前写好的reducers的组织方式决定）。页面根据store中的数据展示内容。由于login发出的远程请求是假的，所以这里总是失败，因此会显示失败的内容。

关于redux的使用介绍到此结束。

redux辅助库

其实在上面的代码中我已经悄悄地提及了两个辅助库，也是我想在这里推荐的两个库：

开发工具redux-devtools：结合各种其他库可以实现可视化的调试界面。

数据规范化工具normalizr：规范化组织数据。经过三个项目的体验后，个人非常推荐使用这个库，可以让应用的数据组织更清晰、减少冗余数据、减少因数据刷新导致的性能影响。

暂时不在这里展开介绍，有兴趣的可以到github上查一下文档。

源码下载地址：https://pan.baidu.com/s/1dENYfuh