国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

redux源碼解析

crossea / 467人閱讀

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

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

用createStore來創建store

創建Action

在Reducer中編寫純函數來處理Action

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

用Store.subscribe()來監聽Store中的數據是否發生了變化

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

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

1.初始化數據

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

2.創建dispatch, subscribe, getState等方法

dispatch(action)

1.執行reducer

    currentReducer(currentState, action)

2.執行listener

    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 執行dispatch傳入action
    }

compose是函數式編程的用法用于簡化函數嵌套執行

我們來看看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實現中間件級聯

第三個action是執行dispatch傳入的action

(見注釋)

更多文章 yjy5264.github.io

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

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

相關文章

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

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

    Atom 評論0 收藏0

  • 【源碼解析】redux-thunk

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

    simpleapples 評論0 收藏0

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

    摘要：源碼解析模塊的代碼十分簡練，但是實現的作用卻是十分強大。只傳遞一個參數的時候，就直接把這個函數返回返回組合函數這就是對源碼的一個整體解讀，水平有限，歡迎拍磚。后續的源碼解讀和測試例子可以關注源碼解讀倉庫 compose源碼解析 compose模塊的代碼十分簡練，但是實現的作用卻是十分強大。redux為何稱為redux？有人說就是reduce和flux的結合體，而reduce正是comp...

    lk20150415 評論0 收藏0

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

    摘要：源碼解析是最核心的模塊。比如，當我們需要使用中間件的時候，就會像第三個參數傳遞一個返回值是一個。后續的源碼解讀和測試例子可以關注源碼解讀倉庫 createStore源碼解析 createStore是redux最核心的模塊。這個模塊就是用于創建一個store對象，同時，對外暴露出dispatch,getState,subscribe和replaceReducer方法。(源碼中關于obse...

    tianren124 評論0 收藏0

  • Redux 源碼解析 - Redux 的架構

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

    lylwyy2016 評論0 收藏0

  • redux源碼解析

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

    chanjarster 評論0 收藏0

發表評論

0條評論

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