一、Flux
Redux是Flux思想的另一種實(shí)現(xiàn)方式，F(xiàn)lux一族框架（包括Redux）貫徹的最重要的觀點(diǎn)是單向數(shù)據(jù)流；
1.MVC框架的缺陷
MVC是業(yè)界廣泛接受的一種前端應(yīng)用框架類(lèi)型，這種框架把應(yīng)用分為3個(gè)部分：
但是，在實(shí)際框架實(shí)現(xiàn)中，總是可以允許View和Model直接通信，因此會(huì)變得非?；靵y！
2.Flux
2.1 Flux包含4個(gè)部分：
2.2 Flux的優(yōu)勢(shì)與不足
（1）優(yōu)勢(shì)：?jiǎn)蜗驍?shù)據(jù)流。在Flux的理念里，如果想改變界面，就必須改變store中的狀態(tài)，如果要改變store中的狀態(tài)，必須派發(fā)一個(gè)action對(duì)象。
（2）不足：store之間依賴(lài)關(guān)系（如果兩個(gè)store之間有依賴(lài)關(guān)系，就必須用上Dispatcher的waitFor函數(shù)）；難以進(jìn)行服務(wù)器端渲染；store混雜了邏輯和狀態(tài)。
二、Redux
1.Redux的基本原則：
1.1 唯一數(shù)據(jù)源：
指應(yīng)用的狀態(tài)數(shù)據(jù)應(yīng)該只存儲(chǔ)在唯一的一個(gè)store上，所有組件的數(shù)據(jù)源就是這個(gè)store上的狀態(tài)。store是一個(gè)樹(shù)形的對(duì)象，每個(gè)組件往往只是用樹(shù)形對(duì)象上的一部分?jǐn)?shù)據(jù)。要驅(qū)動(dòng)用戶界面渲染，就要改變應(yīng)用的狀態(tài)，但是改變狀態(tài)的方法不是去修改狀態(tài)上的值，而是創(chuàng)建一個(gè)新的狀態(tài)對(duì)象返回給Redux，由Redux完成新的狀態(tài)的組裝。
1.2 數(shù)據(jù)改變只能通過(guò)純函數(shù)完成：
這個(gè)純函數(shù)就是Reducer，在Redux中，每個(gè)reducer的函數(shù)簽名如下：
reducer（state，action）
第一個(gè)參數(shù)state是當(dāng)前的狀態(tài)，第二個(gè)參數(shù)action是接收到的action對(duì)象，而reducer要做的事情，就是根據(jù)state和action的值產(chǎn)生一個(gè)新的對(duì)象返回。reducer只負(fù)責(zé)計(jì)算狀態(tài)，不負(fù)責(zé)存儲(chǔ)狀態(tài)。因?yàn)閞educer是純函數(shù)，函數(shù)的返回結(jié)果必須由參數(shù)state和action決定，而且不產(chǎn)生任何副作用，也不能修改參數(shù)state和action對(duì)象。
容器組件和傻瓜組件
（1）容器組件：和Redux Store打交道，讀取Store的狀態(tài)，用于初始化組件的狀態(tài)，同時(shí)還要監(jiān)聽(tīng)Store的狀態(tài)改變；當(dāng)Store狀態(tài)發(fā)生變化時(shí)，需要更新組件狀態(tài)，從而驅(qū)動(dòng)組件重新渲染；當(dāng)需要更新Store狀態(tài)時(shí)，就要派發(fā)action對(duì)象。
（2）傻瓜組件：根據(jù)當(dāng)前props和state，渲染出用戶界面。這是一個(gè)純函數(shù)，根據(jù)props產(chǎn)生結(jié)果。
3.1 connect：
export default connect（mapStateToProps，mapDispatchToProps）（Counter）
connect是React-Redux提供的一個(gè)方法，它接收兩個(gè)參數(shù)mapStateToProps和mapDispatch-ToProps，執(zhí)行結(jié)果依然是一個(gè)函數(shù)，所以才在后面又加一個(gè)圓括號(hào)，把connect函數(shù)執(zhí)行的結(jié)果立刻執(zhí)行，這一次參數(shù)是Counter這個(gè)傻瓜組件。這里有兩個(gè)函數(shù)執(zhí)行，第一次是connect函數(shù)的執(zhí)行，第二次是把connect函數(shù)返回的函數(shù)再次執(zhí)行，最后產(chǎn)生的就是容器組件。
connect函數(shù)作為容器組件，做的事情無(wú)外乎兩件事：
（1）把store上的狀態(tài)轉(zhuǎn)換為內(nèi)層傻瓜組件的prop；
（2）把內(nèi)層傻瓜組件中的用戶動(dòng)作轉(zhuǎn)化為派送給Store的動(dòng)作，即把內(nèi)層傻瓜組件暴露出來(lái)的函數(shù)類(lèi)型的prop關(guān)聯(lián)上dispatch函數(shù)的調(diào)用，每個(gè)prop代表的回調(diào)函數(shù)的主要區(qū)別就是dispatch函數(shù)的參數(shù)不同，這就是mapDispatchToProps函數(shù)做的事情。
3.2 Provider
React-Redux幾乎就是provider。
React-Redux要求store是包含以下3個(gè)函數(shù)的object：
另外，React-Redux定義了provider的componentWillReceiveProps函數(shù)，React-Redux在componentWillReceiveProps函數(shù)中會(huì)檢查這一次渲染時(shí)代表store的prop和上次的是否一樣。如果不一樣，就會(huì)告警，這樣做是為了避免多次渲染用了不同的Redux store，每個(gè)Redux應(yīng)用只能有一個(gè)Redux store，在整個(gè)Redux的生命周期中都應(yīng)該保持Store的唯一性。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
重慶分公司
重慶分公司
