深刻了解React和Redux的差別

學會用自己的思想來了解React和Redux

不能光聽别人描述名詞，了解起來是很困難的。

從需求出發，看看使用React需要什麼：

1. React有props和state: props意味着父級分發下來的屬性，state意味着元件内部可以自行管理的狀态，并且整個React沒有資料向上回溯的能力，也就是說資料隻能單向向下分發，或者自行内部消化。
了解這個是了解React和Redux的前提。

2. 一般建構的React元件内部可能是一個完整的應用，它自己工作良好，你可以通過屬性作為API控制它。但是更多的時候發現React根本無法讓兩個元件互相交流，使用對方的資料。
然後這時候不通過DOM溝通（也就是React體制内）解決的唯一辦法就是提升state，将state放到共有的父元件中來管理，再作為props分發回子元件。

3. 子元件改變父元件state的辦法隻能是通過onClick觸發父元件聲明好的回調，也就是父元件提前聲明好函數或方法作為契約描述自己的state将如何變化，再将它同樣作為屬性交給子元件使用。
這樣就出現了一個模式：資料總是單向從頂層向下分發的，但是隻有子元件回調在概念上可以回到state頂層影響資料。這樣state一定程度上是響應式的。

4. 為了面臨所有可能的擴充問題，最容易想到的辦法就是把所有state集中放到所有元件頂層，然後分發給所有元件。
           

5. 為了有更好的state管理，就需要一個庫來作為更專業的頂層state分發給所有React應用，這就是Redux。讓我們回來看看重制`上面結構的需求：

a. 需要回調通知state (等同于回調參數) -> action
b. 需要根據回調處理 (等同于父級方法) -> reducer
c. 需要state (等同于總狀态) -> store
           

對Redux來說隻有這三個要素：

a. action是純聲明式的資料結構，隻提供事件的所有要素，不提供邏輯。
b. reducer是一個比對函數，action的發送是全局的：所有的reducer都可以捕捉到并比對與自己相關與否，相關就拿走action中的要素進行邏輯處理，修改store中的狀态，不相關就不對state做處理原樣傳回。
c. store負責存儲狀态并可以被react api回調，釋出action.
當然一般不會直接把兩個庫拿來用，還有一個binding叫react-redux, 提供一個Provider和connect。很多人其實看懂了redux卡在這裡。

a. Provider是一個普通元件，可以作為頂層app的分發點，它隻需要store屬性就可以了。它會将state分發給所有被connect的元件，不管它在哪裡，被嵌套多少層。
b. connect是真正的重點，它是一個科裡化函數，意思是先接受兩個參數（資料綁定mapStateToProps和事件綁定mapDispatchToProps），再接受一個參數（将要綁定的元件本身）：
mapStateToProps：建構好Redux系統的時候，它會被自動初始化，但是你的React元件并不知道它的存在，是以你需要分揀出你需要的Redux狀态，是以你需要綁定一個函數，它的參數是state，簡單傳回你關心的幾個值。
mapDispatchToProps：聲明好的action作為回調，也可以被注入到元件裡，就是通過這個函數，它的參數是dispatch，通過redux的輔助方法bindActionCreator綁定所有action以及參數的dispatch，就可以作為屬性在元件裡面作為函數簡單使用了，不需要手動dispatch。這個mapDispatchToProps是可選的，如果不傳這個參數redux會簡單把dispatch作為屬性注入給元件，可以手動當做store.dispatch使用。
           

這也是為什麼要科裡化的原因。

做好以上流程Redux和React就可以工作了。

簡單地說就是：

1.頂層分發狀态，讓React元件被動地渲染。
2.監聽事件，事件有權利回到所有狀态頂層影響狀态。
           

總結：react需要一個管理狀态的管理者，redux就充當這個角色進行頂層分發狀态，改變react元件的渲染。

歡迎star本人github：https://github.com/flyku