redux學習筆記概括

設計思想：

（1）Web 應用是一個狀態機，視圖與狀態是一一對應的。 

（2）全部的狀態，保存在一個對象裏面。

核心源碼：

基本概念： 

1.Store：就是保存數據的地方，你能夠把它當作一個容器。整個應用只能有一個 Store。 

const store = createStore(fn); 複製代碼

2.State：Store對象包含全部數據。若是想獲得某個時點的數據，就要對 Store 生成快照。這種時點的數據集合，就叫作 State。 

store.getState()；複製代碼

3.Action：State 的變化，會致使 View 的變化。可是，用戶接觸不到 State，只能接觸到 View。因此，State 的變化必須是 View 致使的。Action 就是 View 發出的通知，表示 State 應該要發生變化了。 

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
} 複製代碼

4.store.dispatch()：是 View 發出 Action 的惟一方法。 

5.Reducer：Store 收到 Action 之後，必須給出一個新的 State，這樣 View 纔會發生變化。這種 State 的計算過程就叫作 Reducer。 

const reducer = function (state, action) {
  // ...
  return new_state;
}; 複製代碼

實際應用中，Reducer 函數不用像上面這樣手動調用，store.dispatch方法會觸發 Reducer 的自動執行。爲此，Store 須要知道 Reducer 函數，作法就是在生成 Store 的時候，將 Reducer 傳入createStore方法。 爲何這個函數叫作 Reducer 呢？由於它能夠做爲數組的reduce方法的參數。

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)；複製代碼

Redux 提供了一個combineReducers方法，用於 Reducer 的拆分。 

const chatReducer = combineReducers({
  chatLog,
  statusMessage,
  userName
})； 複製代碼

6. store.subscribe()：Store 容許使用store.subscribe方法設置監聽函數，一旦 State 發生變化，就自動執行這個函數。 

redux流程機制： 

中間件使用介紹： 

1.redux-logger爲例：將它放在applyMiddleware方法之中，傳入createStore方法，就完成了store.dispatch()的功能加強，注意applyMiddleware(thunk, promise, logger)的參數順序是固定的。 

2.redux-thunk：使用redux-thunk中間件，改造store.dispatch，使得後者能夠接受函數做爲參數（如圖異步action）。

 

3.redux-promise：就是讓 Action Creator 返回一個 Promise 對象。 

const fetchPosts = 
  (dispatch, postTitle) => new Promise(function (resolve, reject) {
     dispatch(requestPosts(postTitle));
     return fetch(`/some/API/${postTitle}.json`)
       .then(response => {
         type: 'FETCH_POSTS',
         payload: response.json()
       });
});複製代碼

附：中間件applyMiddleware源碼