白話Redux事變道理。淺顯易懂。

若有馬虎或疑問，迎接交換。

Redux 約法三章

唯一數據源(state)

雖然redux中的state與react沒有聯絡，但能夠簡樸理解為react組件中的this.state。
html文檔只是state的一種表現形式。一切html的數據應當都是直接或間接來自於state，不然UI視圖是沒法因state轉變而更新的。

數據源(state)只讀

不應當直接修正state數據。
關於數組運用：

Array.prototype.slice()//對數組舉行拷貝
//運用ES6： 
[...state, ...newState]

關於對象運用：

Object.assign({}, state, change1, change2...)//對對象舉行拷貝
//運用ES6:
{...state, ...newState}

經由過程純函數(pure function)轉變數據源(state)

pure function: 無其他API（包含Math, Date等）挪用，無異步操縱，preState => newState。

Redux數據流

簡樸引見store/reducer/action， 比較簡約，請牢記於心。

store
UI唯一數據泉源，能夠理解為react中的state，store信息的變化會觸發視圖更新.

action
對象。必需具有type屬性,用來形貌發作什麼。可挑選照顧發作時的數據，如用戶輸入的input value。牢記：僅僅用來表述發作了什麼。

reducer
pure function（上面有詮釋）。依據action.type來做出迴響反映，(preState, action) => newState，天生的state是用來轉變store的。

所以，data flow（數據流）:

1. UI發出行動，如click, submit;
2. action, 形貌發作了什麼;
3. reducer處置懲罰發作的事變，天生新state;
4. store被更新；
5. UI相應store更新
6. …

Redux action

舉幾個例子，可能會比較直觀：

{
  type: “TOGGLE_TODO”, //這個type屬性必須要，必需是字符串
  index: 5 //附加信息，本身依據須要挑選是不是到場
}；
{
  type: “ADD_TODO”,
  text：“進修Redux” //附加信息，這裡是input value
}

沒別的，就是這麼簡樸。
有時候能夠運用action天生器(action creators)來批量生產類似action對象，如：

//我須要依據差別的input value來天生高度類似的action:
function (text) {
  return {
    type: "ADD_TODO",
    text: text //附加的信息
  }
}

申明
雖然上面數據流提到，action經由過程reducer處置懲罰天生newState后才能夠變動store信息。然則為了更好的語義編程，Redux經由過程語句store.dispatch(action)來更新store，reducer對action的處置懲罰在內部處置懲罰。

Redux reducer

很簡樸

(theState, action) => (newState);
//僅僅只是依據action.type處置懲罰一下須要更新的state

來看一個相對完全的reducer:

function todoApp(state = initialState, action) { //注重須要處置懲罰undefined情況下的state默認值
  switch (action.type) {  //依據action.type來推斷
    case "SET_VISIBILITY_FILTER":
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    case “ADD_TODO”:  //處置懲罰“ADD_TODO”的action type
      //返回新state(newState),注重不要直接轉變state，對象運用了
      //Object.assign()。也能夠運用ES的...操縱符
      return Object.assign({}, state, {
        todos: [
          ...state.todos,
          {
            text: action.text,
            completed: false
          }
        ]
      })
    case “TOGGLE_TODO”:  //處置懲罰“TOGGLE_TODO”的action type
      return Object.assign({}, state, {
        todos: state.todos.map((todo, index) => {
          if (index === action.index) {
            return Object.assign({}, todo, {
              completed: !todo.completed
            })
          }
          return todo
        })
      })
    default:
      return state
  }
}

Redux store

store
UI視圖唯一數據泉源（直接或間接），能夠獵取state，更新state，監聽state變化，作廢監聽。所以store供應了一下要領：

1. store.getState() 獵取當前state
2. store.dispatch(action) 更新state
3. store.subscribe(listener) store更新后回調listener，回調函數內里能夠挪用store.getStore()來獵取更新后得state喲~
4. 作廢listener的體式格局比較迥殊：再挪用一次store.subscribe(sameListner)

ps: 若有馬虎或疑問，迎接交換。
先寫這麼多，有時間繼承更新。