redux源码分析:文件结构及入口
选用3.7.2版本,直接从 index.js 开始分析
以下是结论,后面是过程
文件名: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 |
combineReducers | wip: 这个是组合 reducer 用的 | |
bindActionCreators | wip: 动态创建 actions | |
applyMiddleware | wip: 插件的使用 | |
compose | wip: 插件的核心实现 |