redux源码分析:文件结构及入口

选用3.7.2版本,直接从 index.js 开始分析
更新于: 2021-12-19 12:57:28

以下是结论,后面是过程

文件名:index.js 

作用:entry 文件,导出最终 redux 向开发者使用的工具 

{ createStore, combineReducers, bindActionCreators, applyMiddleware, compose }

最终精简后的 index.js 源码为

import createStore from './createStore'
import combineReducers from './combineReducers'
import bindActionCreators from './bindActionCreators'
import applyMiddleware from './applyMiddleware'
import compose from './compose'
import warning from './utils/warning'

export {
  createStore,
  combineReducers,
  bindActionCreators,
  applyMiddleware,
  compose
}
源码分析结构图

先看入口文件结构(index.js)

.
└── src
    ├── applyMiddleware.js
    ├── bindActionCreators.js
    ├── combineReducers.js
    ├── compose.js
    ├── createStore.js
    ├── index.js
    └── utils
        └── warning.js

2 directories, 7 files

排除干扰 isCrushed

这个 isCrushed 作用是: 判断此文件是否被项目中人为二次压缩过了。

因为如果在项目在 process.env.NODE_ENV === prduction 的时候,应该会直接使用 redux.min.js,而不推荐项目中压缩  redux 源码这种方式

/*
* This is a dummy function to check if the function name has been altered by minification.
* If the function has been minified and NODE_ENV !== 'production', warn the user.
*/

function isCrushed() {}

if (
  process.env.NODE_ENV !== 'production' &&
  typeof isCrushed.name === 'string' &&
  isCrushed.name !== 'isCrushed'
) {
  warning(
    '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.'
  )
}

找出重点

文件作用描述
createStore使用的时候,会用这个产生一个数据管理的 store这个是核心文件,也是此次分析的通过重点之1
combineReducerswip: 这个是组合 reducer 用的 
bindActionCreatorswip: 动态创建 actions 
applyMiddlewarewip: 插件的使用 
composewip: 插件的核心实现