Redux 源碼解析 - Redux 的架構

lylwyy2016 發布于2019-08-19 18:10 / 1614人閱讀

摘要：要應用于生成環境必須要用或者，是的進化產物，優于。我們來看一下他的源碼，從而學一些東西。里面都是一個一個的模塊，一共個模塊，都導出了一些的方法，比如這個號函數，一個匿名函數，然后導出他寫的方法。整體架構就是這樣的。主要用于壓縮的時候。

redux很小的一個框架，是從flux演變過來的，盡管只有775行，但是它的功能很重要。react要應用于生成環境必須要用flux或者redux，redux是flux的進化產物，優于flux。

而且redux還很小。那么redux是怎么做到單項數據流和一些讓人驚奇的特性的呢。我們來看一下他的源碼，從而學一些東西。

redux里面都是一個一個的模塊，一共9個模塊，都導出了一些redux的方法，比如這個9號函數，一個匿名函數，然后導出他寫的方法。9里面就這一個方法。英文注釋也蠻清楚的，檢測類對象的方法。

然后redux開始呢，定義了一個導出模塊和緩存模塊的方法：

上面這個函數用模塊id緩存一個模塊，然后每個模塊都傳入3個參數，module, exports, __webpack_require__，__webpack_require__傳入了就可以用了，然后就用這個加載別的模塊導出的方法用。就像這樣：

需要的方法就這樣加載就行。

然后把模塊等一些信息和緩存信息都放到這個函數上，返回一個module.exports。

整體架構就是這樣的。重點寫在模塊1-9里面。包含redux的方法。

 (function webpackUniversalModuleDefinition(root, factory) {
  //...
  //這里是判斷amd和cmd環境
})(this,function(){
  return (function(modules) { 
      function __webpack_require__(moduleId) {} //這是那個加載函數
      //...
    })
    ([function(){
      //..模塊0
    },function(){
      //...模塊1
    }])
})

開始的webpackUniversalModuleDefinition是這樣。

if(typeof exports === "object" && typeof module === "object")
        module.exports = factory();
    else if(typeof define === "function" && define.amd)
        define([], factory);
    else if(typeof exports === "object")
        exports["Redux"] = factory();
    else
        root["Redux"] = factory();

redux會檢測使用環境是amd環境還是cmd環境。實在不行就把方法放到window上。

redux把它所有的匿名函數(里面包含redux的所有方法)都寫在一個數組里，就像這樣

[function(){},function(){},...]

大家也看到了，每一個函數都是一個模塊，比如剛才的模塊9，匿名函數，加載就導出自身的方法。

這是0號函數

function(module, exports, __webpack_require__) {

    "use strict";

    exports.__esModule = true;
    exports.compose = exports.applyMiddleware = exports.bindActionCreators = exports.combineReducers = exports.createStore = undefined;

    var _createStore = __webpack_require__(2);

    var _createStore2 = _interopRequireDefault(_createStore);

    var _combineReducers = __webpack_require__(7);

    var _combineReducers2 = _interopRequireDefault(_combineReducers);

    var _bindActionCreators = __webpack_require__(6);

    var _bindActionCreators2 = _interopRequireDefault(_bindActionCreators);

    var _applyMiddleware = __webpack_require__(5);

    var _applyMiddleware2 = _interopRequireDefault(_applyMiddleware);

    var _compose = __webpack_require__(1);

    var _compose2 = _interopRequireDefault(_compose);

    var _warning = __webpack_require__(3);

    var _warning2 = _interopRequireDefault(_warning);

    function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

  
    function isCrushed() {}

    if (("development") !== "production" && typeof isCrushed.name === "string" && isCrushed.name !== "isCrushed") {
      (0, _warning2["default"])("You are currently using minified code outside of NODE_ENV === "production". " + "This means that you are running a slower development build of Redux. " + "You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify " + "or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) " + "to ensure you have the correct code for your production build.");
    }

    exports.createStore = _createStore2["default"];
    exports.combineReducers = _combineReducers2["default"];
    exports.bindActionCreators = _bindActionCreators2["default"];
    exports.applyMiddleware = _applyMiddleware2["default"];
    exports.compose = _compose2["default"];

/***/ },

這個0號模塊基本沒干什么事，就是加載了一些其他模塊的重要方法導出，還有個isCrushed方法，在生產環境下，如果函數名縮小或被改變就會發出警告。主要用于壓縮的時候。

接下來就是1-9號模塊，主要寫了redux的各種函數，那下一篇博客再說吧~

下一篇博文地址---點我或者飛向->http://www.cnblogs.com/dh-dh/p/5357176.html

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

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

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

純Redux原理分析

摘要：調用鏈中最后一個會接受真實的的方法作為參數，并借此結束調用鏈。總結我們常用的一般是除了和之外的方法，那個理解明白了，對于以后出現的問題會有很大幫助，本文只是針對最基礎的進行解析，之后有機會繼續解析對他的封裝前言雖然一直使用redux+react-redux，但是并沒有真正去講redux最基礎的部分理解透徹，我覺得理解明白redux會對react-redux有一個透徹的理解。其實，...

sumory 2019-08-22 17:07 評論0 收藏0
redux源碼解讀--applyMiddleware源碼解析

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

Atom 2019-08-22 13:35 評論0 收藏0
【源碼解析】redux-thunk

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

simpleapples 2019-08-21 17:10 評論0 收藏0
基于react+react-router+redux+socket.io+koa開發一個聊天室

摘要：最近練手開發了一個項目，是一個聊天室應用。由于我們的項目是一個單頁面應用，因此只需要統一打包出一個和一個。而就是基于實現的一套基于事件訂閱與發布的通信庫。比如說，某一個端口了，而如果端口訂閱了，那么在端，對應的回調函數就會被執行。最近練手開發了一個項目，是一個聊天室應用。項目雖不大，但是使用到了react, react-router, redux, socket.io，后端開發使用了...

NusterCache 2019-08-20 14:48 評論0 收藏0
React系列之 Redux 架構模式

摘要：原文地址沒想到這篇文章這么晚才出，最近發生了太多的事情，已致于心態全無，最終也離開了現在的公司，沒想到是這么的狼狽一個人的光芒可以放到很大也可以小到微乎其微，如果不能好好的規劃最終也只能默默的承受世上沒有相同的感同身受，感受真實才能真正的原文地址：https://gmiam.com/post/react-... 沒想到這篇文章這么晚才出，最近發生了太多的事情，已致于心態全無，最終也離...

xfee 2019-08-20 12:06 評論0 收藏0