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

資訊專欄INFORMATION COLUMN

redux源碼解析

crossea / 473人閱讀

摘要：此篇文章可作為源碼導(dǎo)讀使用，只說明了其中部分核心代碼，并進行了一些簡化處理用法回顧用來創(chuàng)建創(chuàng)建在中編寫純函數(shù)來處理用通過和來操作里的數(shù)據(jù)用來監(jiān)聽中的數(shù)據(jù)是否發(fā)生了變化用來獲取中的，并更新視圖核心代碼初始化數(shù)據(jù)存放，是傳入的默認(rèn)值存放傳入的創(chuàng)

此篇文章可作為redux源碼導(dǎo)讀使用，只說明了其中部分核心代碼，并進行了一些簡化處理 用法回顧

用createStore來創(chuàng)建store

創(chuàng)建Action

在Reducer中編寫純函數(shù)來處理Action

用Store.dispatch()通過Action和Reducer來操作Store里的數(shù)據(jù)

用Store.subscribe()來監(jiān)聽Store中的數(shù)據(jù)是否發(fā)生了變化

用store.getState()來獲取Store中的state，并更新視圖

核心代碼 createStore(reducer, preloadedState, enhancer)

1.初始化數(shù)據(jù)

  let currentReducer = reducer
  let currentState = preloadedState //存放state，preloadedState是傳入的默認(rèn)值
  let currentListeners = [] //存放subscribe傳入的listener
  let nextListeners = currentListeners

2.創(chuàng)建dispatch, subscribe, getState等方法

dispatch(action)

1.執(zhí)行reducer

    currentReducer(currentState, action)

2.執(zhí)行l(wèi)istener

    const listeners = (currentListeners = nextListeners)
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }
subscribe(listener) 
    nextListeners.push(listener)
getState() 
    return currentState
applyMiddleware(...middlewares) 
    const applyMiddleware = (...middlewares) => createStore => (...args) => {
        const compose = (...funcs) => {
          if (funcs.length === 0) return arg => arg
          if (funcs.length === 1) return funcs[0]
          return funcs.reduce((a, b) => (...args) => a(b(...args)))
        }
        const store = createStore(...args)
        let dispatch = () => {
          throw new Error(
            `Dispatching while constructing your middleware is not allowed. ` +
              `Other middleware would not be applied to this dispatch.`
          )
        }
        let chain = []
        const middlewareAPI = {
          getState: store.getState,
          dispatch: (...args) => dispatch(...args)
        }
        chain = middlewares.map(middleware => middleware(middlewareAPI)) //*1 middlewareAPI是store
        dispatch = compose(...chain)(store.dispatch) //*2 ...chain和store.dispatch是next
        return { ...store, dispatch } //*3 執(zhí)行dispatch傳入action
    }

compose是函數(shù)式編程的用法用于簡化函數(shù)嵌套執(zhí)行

我們來看看middleware是怎么寫的 
    const logger = store => next => action => {
      console.log("dispatching", action)
      let result = next(action)
      console.log("next state", store.getState())
      return result
    }

為什么會變成 store => next => action => ?

第一個store是傳入的middlewareAPI

第二個next是通過compose合成...middleware和store.dispatch實現(xiàn)中間件級聯(lián)

第三個action是執(zhí)行dispatch傳入的action

(見注釋)

更多文章 yjy5264.github.io

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

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

相關(guān)文章

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

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

    Atom 評論0 收藏0

  • 【源碼解析】redux-thunk

    摘要：的返回值是函數(shù)，這個函數(shù)經(jīng)調(diào)用，傳入?yún)?shù)，之后會在中間件鏈上進行傳遞，只要保證每個中間件的參數(shù)是并且將傳遞給下一個中間件。 了解了Redux原理之后，我很好奇Redux中間件是怎么運作的，于是選了最常用的redux-thunk進行源碼分析。 此次分析用的redux-thunk源碼版本是2.2.0，redux源碼版本是3.7.2。并且需要了解Redux原理 redux中間件都是由redu...

    simpleapples 評論0 收藏0

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

    摘要：源碼解析模塊的代碼十分簡練，但是實現(xiàn)的作用卻是十分強大。只傳遞一個參數(shù)的時候，就直接把這個函數(shù)返回返回組合函數(shù)這就是對源碼的一個整體解讀，水平有限，歡迎拍磚。后續(xù)的源碼解讀和測試?yán)涌梢躁P(guān)注源碼解讀倉庫 compose源碼解析 compose模塊的代碼十分簡練，但是實現(xiàn)的作用卻是十分強大。redux為何稱為redux？有人說就是reduce和flux的結(jié)合體，而reduce正是comp...

    lk20150415 評論0 收藏0

  • redux源碼解讀－－createStore源碼解析

    摘要：源碼解析是最核心的模塊。比如，當(dāng)我們需要使用中間件的時候，就會像第三個參數(shù)傳遞一個返回值是一個。后續(xù)的源碼解讀和測試?yán)涌梢躁P(guān)注源碼解讀倉庫 createStore源碼解析 createStore是redux最核心的模塊。這個模塊就是用于創(chuàng)建一個store對象，同時，對外暴露出dispatch,getState,subscribe和replaceReducer方法。(源碼中關(guān)于obse...

    tianren124 評論0 收藏0

  • Redux 源碼解析 - Redux 的架構(gòu)

    摘要：要應(yīng)用于生成環(huán)境必須要用或者，是的進化產(chǎn)物，優(yōu)于。我們來看一下他的源碼，從而學(xué)一些東西。里面都是一個一個的模塊，一共個模塊，都導(dǎo)出了一些的方法，比如這個號函數(shù)，一個匿名函數(shù)，然后導(dǎo)出他寫的方法。整體架構(gòu)就是這樣的。主要用于壓縮的時候。 redux很小的一個框架，是從flux演變過來的，盡管只有775行，但是它的功能很重要。react要應(yīng)用于生成環(huán)境必須要用flux或者redux，red...

    lylwyy2016 評論0 收藏0

  • redux源碼解析

    摘要：前言的源碼是我閱讀過的一些庫的源碼中，相對簡單的。在更新完成后，同時會更新，并依次執(zhí)行監(jiān)聽者列表。使用新的替換現(xiàn)有的，同時執(zhí)行是隨機的字符串。會為注冊監(jiān)聽器，監(jiān)聽器存儲在數(shù)組中，返回的函數(shù)則會注銷監(jiān)聽器。使用管道，將逐層的進行包裝 showImg(https://segmentfault.com/img/remote/1460000019425043?w=1380&h=810); sh...

    chanjarster 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<