來自一個react SPA的總結--redux篇

本文是自己這幾天做一個reactSPA的其中之一篇總結，主要總結在實踐中，學習到的有關redux的一些思想（並沒有太多細節），方便日後自己的重溫……..

---

redux用作管理應用的data-state和UI-state，在react中組件間的通信一般是parent-child間，（兄弟間鑑於我初出茅廬，暫時沒遇到），而對於子組件向父組件傳遞數據，想想都有點難以想象，所以redux很好地解決了這些問題，redux提供了store用來保存自己的應用中所有的state,換句話說就是作爲中間的媒介，使得各組件可以通過它來處理別的組件的state，看下圖

---

1.在一個應用中它只有一個store**

---

2.不能直接處理state，處理state的唯一辦法就是聲明一個action，它描述了state的處理方式，並將它作爲store的dispatch方法調用的一個參數：store.dispatch(action)

可以通過action create方式來調用action

---

3.reducer通過recive一個state並返回一個新的state來達到更改state的意圖，所以在這裏請注意，reducer並不是改變原先state，而是通過返回給store一個新的state，來實現相關組件state的改變

---

4.通過createStore來創建一個store並把reducer傳入給它，下面以一個簡單的一段代碼，整合上面的知識

  const initial ={
      value: 1
  }

  var reducer = function(state = initial, action){
      switch(action.type){
          case ADD_VALUE:
             return {
               value:state.value+1
      }
      return state;
  } 

  var store=createStore(reducer);

  store.disptach({
      type:ADD_VALUE,
  })          

---

在這裏reducer被調用了兩次，一次是在創建store後，另一次是在dispatch一個action後。
第一次，創建store後立即調用reducer，並使用了initial作爲state的初始值；
第二次，在dispatch一個action後，reducer通過type知道怎樣改變state

使用combineReducer來整合多個reducer，然後傳給store，因爲一個應用中只有一個store哦，不能對每一個reducer創建一個store,示例代碼如下：

import {createStore, combineReducers} from 'redux'

const addReducer = function(){}
const deleteReducer = function(){}

const reducers = combineReducers({
   addState:addReducer,
   deleteState:deleteReducer
  });
const store = createStore(reducers); 

---

react和redux的結合使用react-redux提供的provider和connect兩個模塊，本人不才，初出茅廬，這篇文章有比較詳細的介紹，React和Redux的連接react-redux

參考鏈接：
redux官方文檔
Pros and Cons of using immutability with React.js