成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

關(guān)于 Redux 中間件

Ryan_Li / 1571人閱讀

摘要：的中間件是定義一個(gè)函數(shù)，對(duì)進(jìn)行改造，在發(fā)出與執(zhí)行之間添加其他功能。

Redux 的中間件是定義一個(gè)函數(shù)，對(duì) dispatch 進(jìn)行改造，在發(fā)出 action 與執(zhí)行 reducer 之間添加其他功能。這是對(duì) Redux 進(jìn)行功能拓展的方式。

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)

每個(gè) middleware 將能訪問(wèn) getState 與 dispatch，同時(shí)可以知道該 middleware 為高階函數(shù)，執(zhí)行返回一個(gè)函數(shù)

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)
該函數(shù)為高階函數(shù)，執(zhí)行返回一個(gè)函數(shù)

分析至此，一個(gè) middleware 函數(shù)大致為：

（{getState, dispatch}）=> (next) => (action) => {
    // next 即 store.dispatch
    //...在此拓展功能
    action() // action, 這個(gè)action執(zhí)行觸發(fā)dispath??
 }
Action 如何與Dispatch聯(lián)系起來(lái)？

action 通過(guò) bindActionCreator 與 dispatch 聯(lián)系起來(lái)

bindActionCreator()

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

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

由 actionCreator 可以知道 actionCreator 為高階函數(shù)，執(zhí)行返回一個(gè)函數(shù)

所以一個(gè) action 的姿勢(shì)應(yīng)該為：

()=> () => {
   type: "",
   payload
}
舉例：redux-thunk 中間件

源碼：

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

action 怎么寫(xiě)？

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

Redux Middleware Doc

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81266.html

相關(guān)文章

  • Redux story-1:who creates it?

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

    lavor 評(píng)論0 收藏0

  • React Redux 中間件思想遇見(jiàn) Web Worker 的靈感（附demo）

    摘要：寫(xiě)在最前原文首發(fā)于作者的知乎專(zhuān)欄中間件思想遇見(jiàn)的靈感附，感興趣的同學(xué)可以知乎關(guān)注，進(jìn)行交流。其中，最重要的一個(gè)便是對(duì)多線程的支持。在中提出了工作線程的概念，并且規(guī)范出的三大主要特征能夠長(zhǎng)時(shí)間運(yùn)行響應(yīng)理想的啟動(dòng)性能以及理想的內(nèi)存消耗。 寫(xiě)在最前 原文首發(fā)于作者的知乎專(zhuān)欄：React Redux 中間件思想遇見(jiàn) Web Worker 的靈感（附demo），感興趣的同學(xué)可以知乎關(guān)注，進(jìn)行交流...

    whatsns 評(píng)論0 收藏0

  • redux源碼解讀--applyMiddleware源碼解析

    摘要：的中間件主要是通過(guò)模塊實(shí)現(xiàn)的。返回的也是一個(gè)對(duì)象這個(gè)其實(shí)就是，各個(gè)中間件的最底層第三層的哪個(gè)函數(shù)組成的圓環(huán)函數(shù)構(gòu)成的這就是對(duì)源碼的一個(gè)整體解讀，水平有限，歡迎拍磚。后續(xù)的源碼解讀和測(cè)試?yán)涌梢躁P(guān)注源碼解讀倉(cāng)庫(kù) applyMiddleware源碼解析 中間件機(jī)制在redux中是強(qiáng)大且便捷的，利用redux的中間件我們能夠?qū)崿F(xiàn)日志記錄，異步調(diào)用等多種十分實(shí)用的功能。redux的中間件主要是...

    Atom 評(píng)論0 收藏0

  • React 項(xiàng)目中Redux 中間件的理解

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

    amc 評(píng)論0 收藏0

  • Redux:Middleware你咋就這么難

    摘要：接下來(lái)的函數(shù)就有點(diǎn)難度了，讓我們一行一行來(lái)看。上面實(shí)際的含義就是將數(shù)組每一個(gè)執(zhí)行的返回值保存的數(shù)組中。需要注意的是，方法返回值并不是數(shù)組，而是形如初始值的經(jīng)過(guò)疊加處理后的操作。從而實(shí)現(xiàn)異步的。 　　這段時(shí)間都在學(xué)習(xí)Redux，感覺(jué)對(duì)我來(lái)說(shuō)初學(xué)難度很大，中文官方文檔讀了好多遍才大概有點(diǎn)入門(mén)的感覺(jué)，小小地總結(jié)一下,首先可以看一下Redux的基本流程:showImg(https://segm...

    superPershing 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<