redux與react-redux入門教程

這兩天在研究redux 和react-rudex  記錄一下,後續再補充：

redux:

   redux中有幾個核心概念：store,state,action,reducer,dispatch，getState，subscribe

1.  store:存儲數據的倉庫，該倉庫返回一個新的state對象，對view進行渲染
2.  state:初始化數據，能夠有多個值
3. action:須要變化的數據，是一個對象，必需要有兩個參數type,和變化的數據data(key值能夠自定義，不必定要是data),在我看來，通俗點說，action就是提供原料和加工方式
4. reducer:是一個函數，接受兩個參數，state和action,收到action傳遞過來的命令，對數據進行加工，返回一個新的state對象出去，通俗點講，reduce    就是加工輸出的地方
5. dispatch：觸發數據更新，接受一個action,簡單點描述一下過程就是：調用dispatch()方法，告訴他把這些原料和加工方式(action)交給reducer, 再由 reducer加工輸出出來
6. getState:獲取store倉庫的state數據
7. subscribe:更新視圖

下面寫個小實例，將上面知識串起來，加深理解：

 

邏輯很簡單，點擊‘+’ ，數字加1，點擊‘-’數字減1，下面看看咱們如何實現

目錄結構：

入口：

store:

action:

reducer：

組件代碼及業務邏輯

 

不知你們發現沒有，redux和react創建鏈接是經過props傳值的方式，這樣的話redux與react耦合度過高了，因此引出react-redux

在React-redux中有兩個比較關鍵的概念：Provider和connect方法。

通常咱們都將頂層組件包裹在Provider組件之中，這樣的話，全部組件就均可以在react-redux的控制之下了,可是store必須做爲參數放到Provider組件中去

connect方法：

1.     connect(mapStateToProps, mapDispatchToProps)(MyComponent)

•  mapStateToProps : 字面含義是把state映射到props中去，意思就是把Redux中的數據映射到React中的props中去。        
•  mapDispatchToProps : 就是把各類dispatch也變成了props讓你能夠直接使用

 

下面咱們基於react-redux來改造一下以前的例子,忘記說了，這是react的一個插件，要先安裝  npm install react-redux -S