Redux source code parsing-redux architecture

Redux is a small frame that evolved from flux, although only 775 rows, but its function is very important. React to be applied to the spawning environment, flux or Redux,redux is the evolutionary product of flux, which is superior to flux.

And redux is still very small. So how does redux do a single stream of data and some amazing features? Let's take a look at his source code to learn something.

Redux inside is a module, a total of 9 modules, have exported some redux methods, such as this 9, an anonymous function, and then export his method of writing. 9 inside this one method. The English annotation is also quite clear, the method of detecting the class object.

And then redux starts, defines a method for exporting and caching modules:

Above this function with module ID cache a module, and then each module passed 3 parameters, module, exports, __webpack_require__,__webpack_require__ passed in can be used, Then use this method to load other modules for export. Just like this:

The required method loads just like this.

Then put the module and other information and cache information on this function, return a module.exports.

The whole architecture is like this. The focus is on module 1-9. The method that contains the redux.

(functionwebpackuniversalmoduledefinition (root, factory) {//...  //here is the judging AMD and CMD environment})( This,function(){  return(function(modules) {function__webpack_require__ (ModuleID) {}//This is the load function .      //...    })    ([function(){      //.. Module 0},function(){      //... Module 1    }])})

The beginning of the webpackuniversalmoduledefinition is like this.

 if  (typeof  exports = = = ' object ' && typeof  module = = = ' object ' ) Module.ex    Ports  = factory ();  else  if  ( typeof  define = = = ' function ' &&) exports[ "Re    Dux "] = factory ();  else   root[ "Redux"] = Factory (); /pre>

Redux detects whether the environment is an AMD environment or a CMD environment. Just put the method on the window.

Redux writes all of its anonymous functions (all the methods that contain redux) in an array, like this

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

As you can see, each function is a module, such as the Module 9, the anonymous function, loading the method of exporting itself.

This is the number No. 0 function.

 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) {returnObj && obj.__esmodule? Obj: {"Default": obj}; }    /** This is a dummy function to check if the function name have been altered by minification.    * If The function has been minified and node_env!== ' production ', warn the user. */    functioniscrushed () {}if("development")!== ' production ' &&typeofIscrushed.name = = = ' String ' && iscrushed.name!== ' iscrushed ') {      (0, _warning2["Default"]) (' You are currently using minified code outside of node_env = = = ' production\ '. ' + ' This means is running a slower development build of Redux. ' + ' can use Loose-envify (https://github.com/zertosh/loose-envify) for browserify ' + ' or Defineplugin for Webpack (h ttp://stackoverflow.com/questions/30030031) ' + ' to ensure you has 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"];/***/},

This module No. 0 is basically nothing to do, is to load some other modules of the important way to export, there is a iscrushed method, in the production environment, if the function name is reduced or changed will issue a warning. Used primarily for compression.

Next is the number 1-9 module, the main write redux of various functions, then the next blog to say it ~

Redux source code parsing-redux architecture