react

redux(react-redux)相關API,用法原理

reactredux主要包括兩個:Provider<Providerstore用法:<Provid...

>

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 放到 propsmapDispatchToProps : 將 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)
  )
}

img

Facebook Profile photo
Written by Nat
This is the author box. A short description about the author of this article. Could be their website link, what they like to read about and so on. Profile