ReactJS React+Redux+Router+antDesign通用高效率开发模板，夜间模式为例

工做比较忙，一直没有时间总结下最近学习的一些东西，为了方便前端开发，我使用React+Redux+Router+antDesign总结了一个通用的模板，这个技术栈在前端开发者中是很是常见的。

 

总的来讲，我这个工程十分便捷，对于初学者来讲，可能包含到如下的一些知识点：

1、React-Router的使用

Router是为了方便管理组件的路径，它使用比较简单，通常定义以下就行，须要注意的是，react-router的版本有1.0-3.0，各个版本对应的API大体类似，但也有不一样，我使用的是2.X的，API文档以下：

https://github.com/ReactTraining/react-router/blob/v2.8.1/docs/API.md

 

2、Redux和React-Redux的使用

我最初学的时候，看了网上不少Redux教程，简直是乱七八糟。为何？Redux的版本发展史真的比较长。加上后来出来的React-Redux，因此各类各样的教程都有。

我这里使用的是Redux 3.5和React-Redux 4.4。这个就不放API文档了，我以为个人demo里面写的很是清晰了。

下面以最简单的“人话”来讲明下Redux的核心工做原理。

使用Redux的缘由很简单，为了统一管理state。好比个人demo里的app夜间模式，可能这个参数多个component中都须要用到，因此相似这种咱们必须弄成全局的。

而众所周知，React是一个经过state来render界面的框架，这就遇到一个问题，好比我要设置夜间模式，我修改普通的全局参数，并不能在修改后触发从新render，因此咱们须要引入一个全局state。而Redux就是这样一个能够管理全局state的框架。

它的组成分为：

（1）store：存储全局state的对象

（2）action: 计算新state的函数（如点击开启夜间模式，darkMode参数变为true），并交给reducer

（3）reducer：根据action拿来的新参数，生成新的全局state

你确定会说，真他妈简单。简单那就对了。网上乱七八糟的东西太多，但愿我这几句话就让你明白其中的道理。

 

那具体如何使用Redux？

看demo就知道了，这里须要注意几点：

（1）在某个component内使用connet函数获取全局state和action中的部分，各取所需

（2）使用redux-thunk，能够进行action的同步/异步操做，由于我demo中默认使用thunk，反正异步是常常会出现的，好比咱们更新用户信息，可能请求服务器须要几秒后新的用户信息才会返回，因此这个action的dispatch须要几秒后异步去触发，而默认是不支持的。

（3）存储并在app启动时初始化，个人demo中的设置夜间模式，关闭网页从新打开依旧会维持，就是我在action触发的时候作了缓存，初始化store的时候，又先从缓存取再根据这些内容，初始化store的结果。

 

3、antDesign的使用

demo中演示了antDesign和antDesign-mobile的两种加载（须要修改.babel）。antDesign是一款自定义component库，相似的还有amazeui,materialUI等等。antDesign-mobile就不说了，懒得评价了，那高清模式的兼容性，就像读书的时候交课堂做业同样。蚂蚁金服做为大厂，我以为这样唐突的去发布这么一个东西实在是不合适。

antDesign相对来讲成熟一点，在使用上可能须要配置一些babel等东西，这些东西，配熟练了，也就懂了。

 

4、webpack-dev-server和webpack的配置

webpack配置，总的来讲有几块：

（1）webpack-dev-server是我推荐的一个热更新的调试组件，能够根据配置好的webpack来直接hot reload，不须要额外配其余参数。

（2）css-loadder：cssloader主要为了支持一些自定义的css写法：好比postcss,less等，demo中使用postcss去书写css，相对来讲这种树形结构的css是我比较喜欢的。

 

（3）babel：babel是为了支持不一样版本的JS语言，转换成浏览器能运行的JS。由于前端JS的版本太过零零碎碎，有时候为了支持一个小的功能，就给babel加一个小插件，以致于babel有各类乱七八糟的插件。但这种碎片化，也是JS这们开源语言可以热门、发展起来的缘由。

 

demo地址：https://github.com/rayshen/reactjs-universal-project