關于 Redux 中間件

Ryan_Li 發布于2019-08-20 13:50 / 1569人閱讀

摘要：的中間件是定義一個函數，對進行改造，在發出與執行之間添加其他功能。

Redux 的中間件是定義一個函數，對 dispatch 進行改造，在發出 action 與執行 reducer 之間添加其他功能。這是對 Redux 進行功能拓展的方式。

Redux 如何支持中間件？

applyMiddlewares()

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    var store = createStore(reducer, preloadedState, enhancer);
    var dispatch = store.dispatch;
    var chain = [];
    var middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    };
    chain = middlewares.map(middleware => middleware(middlewareAPI));
    dispatch = compose(...chain)(store.dispatch);
    return {...store, dispatch}
  }
}

middleware => middleware(middlewareAPI)

每個 middleware 將能訪問 getState 與 dispatch，同時可以知道該 middleware 為高階函數，執行返回一個函數

compose()

dispatch = compose(...chain)(store.dispatch);

export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  const last = funcs[funcs.length - 1]
  const rest = funcs.slice(0, -1)
  return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args))
}

(composed, f) => f(composed)
即:
middleware({getState, dispatch})(store.dispatch)
該函數為高階函數，執行返回一個函數

分析至此，一個 middleware 函數大致為：

（{getState, dispatch}）=> (next) => (action) => {
    // next 即 store.dispatch
    //...在此拓展功能
    action() // action, 這個action執行觸發dispath??
 }

Action 如何與Dispatch聯系起來？

action 通過 bindActionCreator 與 dispatch 聯系起來

bindActionCreator()

function bindActionCreator(actionCreator, dispatch) {
  return (...args) => dispatch(actionCreator(...args))
}

(...args) => dispatch(actionCreator(...args))

由 actionCreator 可以知道 actionCreator 為高階函數，執行返回一個函數

所以一個 action 的姿勢應該為：

()=> () => {
   type: "",
   payload
}

舉例：redux-thunk 中間件

源碼：

function thunkMiddleware({ dispatch, getState }) {
  return next => action =>
    typeof action === "function" ?
      action(dispatch, getState) :
      next(action);
}

action 怎么寫？

funciton fetchSomething(){
    return (dispatch, getState)=>{
        fetch().then((res)=>{  
            disatch({
                type: "FETCH_SOMETHING_DONE"
                palyload
            })
        })
    }
}

參考：

Redux Middleware Doc

GPU云服務器云服務器 Redux redux源碼 redux-saga react-redux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/81266.html

Redux story-1:who creates it?

摘要：而不是卷入無休止的撕逼，用了某某而產生的優越，甚至借貶低他人來抬高自己。前言 ?這是一個系列文章，旨在分享在react及相關技術棧實踐過程中的個人感悟，心得。如果有不好的地方，歡迎各位批評指正。 ?由于對react本身還未深入了解，今天我們先來談一談redux相關的問題。 Who creates it? ?Dan Abramov是redux的作者，同時，他也是Create React...

lavor 2019-08-20 13:52 評論0 收藏0
React Redux 中間件思想遇見 Web Worker 的靈感（附demo）

摘要：寫在最前原文首發于作者的知乎專欄中間件思想遇見的靈感附，感興趣的同學可以知乎關注，進行交流。其中，最重要的一個便是對多線程的支持。在中提出了工作線程的概念，并且規范出的三大主要特征能夠長時間運行響應理想的啟動性能以及理想的內存消耗。寫在最前原文首發于作者的知乎專欄：React Redux 中間件思想遇見 Web Worker 的靈感（附demo），感興趣的同學可以知乎關注，進行交流...

whatsns 2019-08-22 10:53 評論0 收藏0
redux源碼解讀--applyMiddleware源碼解析

摘要：的中間件主要是通過模塊實現的。返回的也是一個對象這個其實就是，各個中間件的最底層第三層的哪個函數組成的圓環函數構成的這就是對源碼的一個整體解讀，水平有限，歡迎拍磚。后續的源碼解讀和測試例子可以關注源碼解讀倉庫 applyMiddleware源碼解析中間件機制在redux中是強大且便捷的，利用redux的中間件我們能夠實現日志記錄，異步調用等多種十分實用的功能。redux的中間件主要是...

Atom 2019-08-22 13:35 評論0 收藏0
React 項目中Redux 中間件的理解

摘要：如果想學習項目的底層建設，建議先去學習官網案例，之后在學習的使用中間件介紹目的是提供第三方插件的模式，改變的過程。前言 React/Redux項目結束后，當我在研究react-router源碼的時候發現當中有一部分含中間件的思想，所以才想把中間件重新梳理一遍；在之前看redux了解到中間件，redux層面中間件的理解對項目前期比較有幫助，雖然項目中后期基本可以忽略這層概念；現在對這部...

amc 2019-08-21 11:18 評論0 收藏0
Redux:Middleware你咋就這么難

摘要：接下來的函數就有點難度了，讓我們一行一行來看。上面實際的含義就是將數組每一個執行的返回值保存的數組中。需要注意的是，方法返回值并不是數組，而是形如初始值的經過疊加處理后的操作。從而實現異步的。　　這段時間都在學習Redux，感覺對我來說初學難度很大，中文官方文檔讀了好多遍才大概有點入門的感覺，小小地總結一下,首先可以看一下Redux的基本流程:showImg(https://segm...

superPershing 2019-08-20 14:15 評論0 收藏0