redux中applyMiddleware源碼,中文注釋

shiweifu 發布于2019-08-26 13:32 / 2013人閱讀

摘要：理解需要跟結合首先來看是怎樣創建的再來看的源碼的第三個參數就是此時會返回也就是在中間件里面去執行了返回的是函數也就是函數然后又跑到里面作為第三個參數所以能把作為參數傳進去一個小例子測試返回函數后是什么東西創建一個的方法使用中間件的增強器對于

理解applyMiddleware需要跟createStore結合.首先來看createStore是怎樣創建store的.

再來看createStore 的源碼

createStore的第三個參數enhancer就是applyMiddleware,此時createStore會返回enhancer(createStore)(reducer, preloadedState),也就是createStore在中間件里面去執行了

applyMiddleware返回的是函數A(也就是applyMiddleware(...middlewares) =函數A,然后又跑到createStore里面作為第三個參數),所以能把createStore作為參數傳進去

一個小例子,測試返回函數后是什么東西

import compose from "./compose"

/**
 * Creates a store enhancer that applies middleware to the dispatch method
 * of the Redux store. This is handy for a variety of tasks, such as expressing
 * asynchronous actions in a concise manner, or logging every action payload.
 *
 * 創建一個redux store的dispatch方法使用中間件的store增強器.  對于不同的人任務,這將會
 * 非常方便,比如可以用非常簡單的方式進行異步操作,或者輸出action的payload
 * 
 * See `redux-thunk` package as an example of the Redux middleware.
 *查看`redux-thunk`包作為一個redux中間件的例子
 *
 * Because middleware is potentially asynchronous, this should be the first
 * store enhancer in the composition chain.
 *
 * 因為中間件默認是異步的,這應該是合成鏈中的第一個store增強器
 * 
 * Note that each middleware will be given the `dispatch` and `getState` functions
 * as named arguments.
 *注意每個中間件都會以`dispatch` and `getState`方法作為參數
 * @param {...Function} middlewares The middleware chain to be applied.提供的中間件
 * @returns {Function} A store enhancer applying the middleware.store增強器應用的中間件
 */
export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    const store = createStore(reducer, preloadedState, enhancer)
    let dispatch = store.dispatch
    let chain = []

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    }
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

云服務器 GPU云服務器 redux源碼中文注釋中文注釋說明 python中文注釋

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

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

redux源碼閱讀－－主模塊

摘要：主模塊的入口模塊就是。主要就做兩件事引入個功能模塊，并掛載至同一個對象上，對外暴露。在非環境下壓縮代碼，給予警告。后續的源碼解讀和測試例子可以關注源碼解讀倉庫主模塊 redux的入口模塊就是src/index.js。這個文件的代碼十分簡單。主要就做兩件事：引入個功能模塊，并掛載至同一個對象上，對外暴露。在非production環境下壓縮代碼，給予警告。下面是模塊的源碼(只包...

testHs 2019-08-21 17:23 評論0 收藏0
Redux 源碼拾遺

摘要：循環還沒有結束，其中的某個對進行了添加或者刪除，都會影響到此次循環的進行，帶來不可預期的錯誤。首先來一段 redux 結合中間件 thunk、logger 的使用demo 了解一下應該如何使用 const redux = require(redux) const { createStore, combineReducers, bindActionCreators, ...

CloudwiseAPM 2019-08-02 16:11 評論0 收藏0
Redux 源碼拾遺

摘要：循環還沒有結束，其中的某個對進行了添加或者刪除，都會影響到此次循環的進行，帶來不可預期的錯誤。首先來一段 redux 結合中間件 thunk、logger 的使用demo 了解一下應該如何使用 const redux = require(redux) const { createStore, combineReducers, bindActionCreators, ...

zhangfaliang 2019-08-23 16:47 評論0 收藏0
Redux 源碼解析 - Redux 的架構

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

lylwyy2016 2019-08-19 18:10 評論0 收藏0