只包括主要API，歡迎指正!

首先按庫react-redux、redux兩個庫分有如下API

react-redux主要包括兩個:

• Provider <Provider store>

用法：<Provider store> 使元件層級中的 connect() 方法都能夠獲得 Redux store。正常情況下，你的根元件應該巢狀在 <Provider> 中才能使用connect()方法。

實現方式：把store放到content上

• connect connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

用法:連線 React 元件與Redux store。連線操作不會改變原來的元件類。返回一個新的已與Redux store連線的元件類。

mapStateToProps: 將從content拿到的state放到props上mapDispatchToProps: 將dispatch繫結到props上，一般是繫結到action上，這樣寫action不用手動dispatch
mergeProps:如果指定這個引數將拿到執行的結果

redux主要包括:

• action: 所有操作的集合
• dispatch: 推送action到createStore
• createStore: 提供了獲取state和dispatch方法，middleWare的執行也在這個階段
• middleware: 提供了dispatch過程的中間操作，所有的dispatch操作都會經過中介軟體

常見中介軟體寫法

function logger({ getState }) {
  return (next) => (action) => {
    console.log('will dispatch', action)

    // 呼叫 middleware 鏈中下一個 middleware 的 dispatch。
    let returnValue = next(action)

    console.log('state after dispatch', getState())

    // 一般會是 action 本身，除非
    // 後面的 middleware 修改了它。
    return returnValue
  }
}
複製程式碼

中介軟體是一個巢狀了多層的高階函式,分別接受getState next action,返回next(action)

monkeypatch寫法

function logger(store) {
  let next = store.dispatch

  // Previously:
  // store.dispatch = function dispatchAndLog(action) {

  return function dispatchAndLog(action) {
    console.log('dispatching', action)
    let result = next(action)
    console.log('next state', store.getState())
    return result
  }
}
複製程式碼

applyMiddleware簡單實現

function applyMiddlewareByMonkeypatching(store, middlewares) {
  middlewares = middlewares.slice()
  middlewares.reverse()

  // Transform dispatch function with each middleware.
  middlewares.forEach(middleware =>
    // 由於每次middle會直接返回返回函式，然後在這裡賦值給store.dispatch,
    、、  下一個middle在一開始的時候，就可以通過store.dispatch拿到上一個dispatch函式
    store.dispatch = middleware(store)
  )
}
複製程式碼