redux源码解读
by ihtml5
一.目录分析
1.src
项目的源代码,包括以下几个文件:
- index.js
整个redux框架的入口文件 作用: 导出redux的几大函数包括createStore,bindActionCreators,combineReducers,compose,applyMiddleware
- createStore.js
创建应用唯一的state树
- bindActionCreators.js
工具类函数 作用: 方便开发者将dispatch和actioncreator当props绑定到组件中
- combineReducers.js
将多个reducer,合并成一个reducer,传入到createStore函数中
- compose.js
将多个函数组合执行
- applyMiddleware
工具类函数 作用: 将中间件如redux-thunk应用到createStore函数上
- util/warning.js
自定义的错误信息提示函数
2.docs
redux的文档. 官方网站:www.redux.js.org 中文翻译:cn.redux.js.org
3.build
构建redux所需要的一些文件
4.examples
redux的使用案例,从简单的原生counter到复杂到真实场景的应用,都提供了案例参考
5.test
测试文件目录
6.node_modules
redux源码所依赖的node包
源码分析
1.src/index.js
- 关键词
源代码使用了es6语法,使用import从文件中导出es6模块 import用法
-
源码解读
1.导出redux的各个主要模块导出redux的各个主要模块
// 绑定reducer和state的关系
import createStore from './createStore'
// 导出警告函数
import warning from './utils/warning'
// 导出自动绑定函数 自动绑定函数,主要生成dispatch(actionCreator(action));
import bindActionCreators from './bindActionCreators'
// 导出应用中间件函数,中间件主要作用是将发往reducer的action进行多次修改
import applyMiddleware from './applyMiddleware'
/* 合并多个reducer,这样方便每个reducer只处理store的某一个部分数据,最后通过
* combineReducers函数合并
*/
import combineReducers from './combineReducers'
// 将多个函数合并在一起
import compose from './compose'
2.在开发环境下使用压缩版本给予警告
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.'
)
}
3.导出多个对象
export {
createStore,
compose,
warning,
combineReducers,
bindActionCreators
}
2.src/utils/warning.js
- 关键词
-
源码解读
1.判定console.error是否存在且可用
// 导出warning函数
export default function warning(message) {
// 判断console.error函数是否存在且可用
if (typeof console !== 'undefined' && typeof console.error == 'function') {
console.error(message);
}
}
2.捕获异常并处理
try {
// 抛出异常
throw new Error(Message)
} catch(e) {
// 捕获异常
}
redux从入门到进阶
初学者
学习步骤:1. 阅读redux的官方文档 2.通过一些小例子熟悉redux的思想 3.复杂案例应用 4.熟悉redux的源码 5.熟悉业界关于redux的最佳实践
Pratice
关于redux的实战经验
Subscribe via RSS