Redux全面掌握

@TODO 待完善

用途

做爲狀態容器，提供對狀態的查詢、改變進行管理。
從具體操做 -> 狀態變動 -> 觸發視圖更新，這一單向數據流的控制，不只使得對狀態變化的過程變得可控，同時解耦了數據M和視圖V。

設計思想

1）web應用是一個狀態機，視圖和狀態一一對應；
2）全部狀態保存在一個對象內。

三大原則

單一數據源

state狀態對象由store負責存儲獲取管理；
state爲不可變對象（immutable data），保證每次返回一個新的狀態對象。

state只讀

action是改變狀態對象state的惟一方式；
action由dispatch函數觸發，其描述了一種行爲其常見形式；

{
 type: 'actionType',   //行爲
 payload: {}   //須要傳遞的信息
}

payload是更新store數據的惟一來源。

reducer是純函數

type Reducer<S, A> = (state: S, action: A) => S

對action作出響應的響應，返回新的狀態對象state（保證可回溯的緣由），不該該產生反作用；
生成新的state有以下幾種方式：

- Object.assign({}, oldState, newState);
- {...oldState, 更新值}
- Immutable

javascript中的基本類型：Boolean、Number、String、Null、undefined、Symbol等都是不可變的（Immutable），只有Object是可變的（Mutable）.

store提供的方法：

subscribe

用於訂閱事件，每次state變動後，都會觸發其訂閱的事件。
這裏能夠處理state -> props，以此更新視圖組件的更新渲染（react-redux的connect就是這麼實現的）；

dispatch

• 處理同步action

//該方法用於生成action 
let actionCreator = (name) => ({ type: 'ADD_ITEM', payload: { name } });
//生成action
dispatch(actionCreator('M2'));

• 處理異步

1）redux-thunk
其經過擴展action，使得actionCreator返回一個function做爲action。

let asyncActionCreator = postTitle => (dispatch, getState) => {
    dispatch(requestPosts(postTitle));
    return fetch(`/some/API/${postTitle}.json`)
        .then(response => response.json())
        .then(json => dispatch(receivePosts(postTitle, json)));
    };
};
//這裏須要使用middleware支持異步，例如redux-thunk
var thunkMiddleware = function ({ dispatch, getState }) {
    return function(next) {
        return function (action) {
            //若是是function，則傳遞dispatch、getState，並執行
            return typeof action === 'function' ?
            //原始的dispatch
            action(dispatch, getState) :
            next(action)
        }
    }
}
//使用1
store.dispatch(fetchPosts('xx'));
// 使用2：注意上面dispatch後返回的Promise，能夠在dispatch異步數據，reducer處理後，作一些處理 
store.dispatch(fetchPosts(genPromise)).then(() => console.log(store.getState()) );

thunk的應用：延遲執行、異步控制。做爲Generator的next()的返回值，Thunk和Promise都是Generator自動執行的解決方案。

2）redux-sage

dispatch({type: 'USER_FETCH_REQUESTED', payload: {userId}})

redux-saga是一個 redux 中間件;
使用了 ES6 的 Generator 功能

redux-sage相較於redux-thunk的優點：

• 不改動action；

• Generator同步的寫法，實現異步流程的控制管理；

  注意： let res = yield call('xx');, res的值爲next(val)傳入的參數，而不是yield後面的表達式！
  Generator經過 yield和 next來傳遞數據來控制函數的內部流程( 內外部的雙向通訊)。

• 單獨的文件組織，便於測試維護；

中間件

洋蔥圈模型，和KOA的中間件原理相似；
在action真正處理前，賦予諸如日誌記錄等能力。

使用場景

1）應用複雜，利於代碼結構的組織；2）全局狀態共享；3）可能被共享和改變的組件狀態。