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