Redux 源码解析 - Redux 的架构

lylwyy2016 发布于2019-08-19 18:10 / 1564人阅读

摘要：要应用于生成环境必须要用或者，是的进化产物，优于。我们来看一下他的源码，从而学一些东西。里面都是一个一个的模块，一共个模块，都导出了一些的方法，比如这个号函数，一个匿名函数，然后导出他写的方法。整体架构就是这样的。主要用于压缩的时候。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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