dva模块基于redux、redux-saga、react-router实现，用于配置路由，state处理逻辑等。
"version": "1.2.1"
index.js
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = require('./lib');
exports.connect = require('react-redux').connect;
lib/index.js
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _hashHistory = require('react-router/lib/hashHistory');
var _hashHistory2 = _interopRequireDefault(_hashHistory);
var _reactRouterRedux = require('react-router-redux');
var _createDva = require('./createDva');
var _createDva2 = _interopRequireDefault(_createDva);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = (0, _createDva2.default)({
mobile: false,
initialReducer: {
routing: _reactRouterRedux.routerReducer
},
defaultHistory: _hashHistory2.default,
routerMiddleware: _reactRouterRedux.routerMiddleware,
setupHistory: function setupHistory(history) {
this._history = (0, _reactRouterRedux.syncHistoryWithStore)(history, this._store);
}
});
module.exports = exports['default'];
lib/createDva.js核心模块
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _regenerator = require('babel-runtime/regenerator');
var _regenerator2 = _interopRequireDefault(_regenerator);
var _typeof2 = require('babel-runtime/helpers/typeof');
var _typeof3 = _interopRequireDefault(_typeof2);
var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
var _keys = require('babel-runtime/core-js/object/keys');
var _keys2 = _interopRequireDefault(_keys);
// 浅拷贝
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _getIterator2 = require('babel-runtime/core-js/get-iterator');
var _getIterator3 = _interopRequireDefault(_getIterator2);
exports.default = createDva;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactRedux = require('react-redux');
var _redux = require('redux');
var _middleware = require('redux-saga/lib/internal/middleware');
var _middleware2 = _interopRequireDefault(_middleware);
var _effects = require('redux-saga/effects');
var sagaEffects = _interopRequireWildcard(_effects);
var _isPlainObject = require('is-plain-object');
var _isPlainObject2 = _interopRequireDefault(_isPlainObject);
var _invariant = require('invariant');
var _invariant2 = _interopRequireDefault(_invariant);
var _warning = require('warning');
var _warning2 = _interopRequireDefault(_warning);
var _flatten = require('flatten');
var _flatten2 = _interopRequireDefault(_flatten);
var _window = require('global/window');
var _window2 = _interopRequireDefault(_window);
var _document = require('global/document');
var _document2 = _interopRequireDefault(_document);
var _sagaHelpers = require('redux-saga/lib/internal/sagaHelpers');
var _lodash = require('lodash.isfunction');
var _lodash2 = _interopRequireDefault(_lodash);
var _handleActions = require('./handleActions');
var _handleActions2 = _interopRequireDefault(_handleActions);
var _plugin = require('./plugin');
var _plugin2 = _interopRequireDefault(_plugin);
function _interopRequireWildcard(obj) {
if (obj && obj.__esModule) {
return obj;
} else {
var newObj = {};
if (obj != null) {
for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];
}
}
newObj.default = obj; return newObj;
}
}
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
var SEP = '/';
function createDva(createOpts) {
var mobile = createOpts.mobile,
initialReducer = createOpts.initialReducer,// 默认require('react-router-redux').routerReducer
defaultHistory = createOpts.defaultHistory,// 默认'react-router/lib/hashHistory'
routerMiddleware = createOpts.routerMiddleware,// 默认require('react-router-redux').routerMiddleware
setupHistory = createOpts.setupHistory;
/**
* Create a dva instance.
*/
return function dva() {
var hooks = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
// history and initialState does not pass to plugin
var history = hooks.history || defaultHistory;
var initialState = hooks.initialState || {};
delete hooks.history;
delete hooks.initialState;
var plugin = new _plugin2.default();
plugin.use(hooks);
var app = {
// properties
_models: [],
_router: null,
_store: null,
_history: null,
_plugin: plugin,
// methods
// dva.use(plugin={key:fn})添加钩子函数
// 当key为'extraEnhancers'，值须为数组形式，该值将替换plugin.hooks.extraEnhancers，用于添加redux中间件
// 当key为其他时，名义上没有限制类型，且使用push方法添加到plugin.hooks[key]中
// 当key为'extraReducers'，值须为{actionType:reducer()=>{}}，且actionType不能和任意model对象的命名空间重名
// 用于添加额外的reducer
// 当key为'onReducer'时，值须为fn，用于装饰redux.combineReducers返回值
// 当key为'onAction'时，值须为fn，用于添加redux中间件如redux-logger等
// 当key为'onStateChange'时，值须为fn，redux机制的dispatch方法执行修改state时，触发调用fn监听函数
// 当key为'onEffect'时，值须为fn(effect,sagaEffects,model,key)，用于装饰model.effects中各生成器函数
use: use,
// dva.model({namespace,state,subscriptions,reducers,effects})，向this._models添加经属性名转换后的model对象
// 参数model.reducers={actionType:reducer(state,action)=>{}}
// 或者model.reducers=[{actionType:reducer(state,action)=>{}},wrap((state,action)=>{}){}]
// 前者单纯设定actionType该调用执行的reducer以修改state
// 后者除设定actionType下该调用的reducer以外，还可对handleActions流程控制函数作包装
model: model,
// dva.router(fn)形式配置路由规则，this._router=router
router: router,
start: start
};
return app;
// //////////////////////////////////
// Methods
// dva.use(plugin={key:fn})添加钩子函数
function use(hooks) {
plugin.use(hooks);
}
// dva.model({ namespace, state, subscriptions, reducers, effects })向this._models添加经属性名转换后的model对象
// model.effects可以是对象或数组，对象其属性值为生成器函数，参数为封装put方法后的sagaEffects对象
// 若为数组，第二项为配置项opts，且
// opts.type须是['watcher', 'takeEvery', 'takeLatest', 'throttle']中的一个
// opts.type若为'throttle'，则opts.ms必须存在
function model(model) {
// checkModel函数校验model模块的namespace、subscriptions、reducers、effects属性
// 同时将model.reducers、model.reducers[0]、model.effects对象的属性名转换为namespace+"/"+key形式
// 经过属性名转换后的model对象存入this._models中
this._models.push(checkModel(model, mobile));
}
// 由bind方法将injectModel赋值给this.model，用于注入特定的m
function injectModel(createReducer, onError, unlisteners, m) {
m = checkModel(m, mobile);
this._models.push(m);
var store = this._store;
// reducers
// getReducer函数获取根据action.type调用相应model.reducer[action.type]以修改state的的流程控制函数；或者顺序传递state
store.asyncReducers[m.namespace] = getReducer(m.reducers, m.state);
store.replaceReducer(createReducer(store.asyncReducers));
// effects
if (m.effects) {
store.runSaga(getSaga(m.effects, m, onError));
}
// subscriptions
if (m.subscriptions) {
unlisteners[m.namespace] = runSubscriptions(m.subscriptions, m, this, onError);
}
}
// 由bind方法将unmodel赋值给this.unmodel，用于以namespace移除特定的model
function unmodel(createReducer, reducers, _unlisteners, namespace) {
var store = this._store;
// Delete reducers
delete store.asyncReducers[namespace];
delete reducers[namespace];
store.replaceReducer(createReducer(store.asyncReducers));
store.dispatch({ type: '@@dva/UPDATE' });
// Cancel effects
store.dispatch({ type: namespace + '/@@CANCEL_EFFECTS' });
// unlisten subscrioptions
if (_unlisteners[namespace]) {
var _unlisteners$namespac = _unlisteners[namespace],
unlisteners = _unlisteners$namespac.unlisteners,
noneFunctionSubscriptions = _unlisteners$namespac.noneFunctionSubscriptions;
(0, _warning2.default)(noneFunctionSubscriptions.length === 0, 'app.unmodel: subscription should return unlistener function, check these subscriptions ' + noneFunctionSubscriptions.join(', '));
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = (0, _getIterator3.default)(unlisteners), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var unlistener = _step.value;
unlistener();
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
delete _unlisteners[namespace];
}
// delete model from this._models
this._models = this._models.filter(function (model) {
return model.namespace !== namespace;
});
}
// dva.router(fn)形式配置路由规则
function router(router) {
(0, _invariant2.default)(typeof router === 'function', 'app.router: router should be function');
this._router = router;
}
// 启动，转化redux配置，添加router配置，挂载渲染组件或返回组件
function start(container) {
// 通过container获取容器节点，并校验该容器节点为html元素
if (typeof container === 'string') {
container = _document2.default.querySelector(container);
(0, _invariant2.default)(container, 'app.start: could not query selector: ' + container);
}
(0, _invariant2.default)(!container || isHTMLElement(container),
'app.start: container should be HTMLElement');
// 校验dva.router(fn)方法得到执行，即this._router有值
(0, _invariant2.default)(this._router, 'app.start: router should be defined');
// plugin.apply('onError',defaultHandler)注册默认"onError"事件处理函数defaultHandler，即抛出错误
// 若客户使用dva.use({onError:fn})注册"onError"事件处理钩子时，onError函数执行时将调用fn(err,dispatch)函数，同时不调用defaultHandler
var onError = plugin.apply('onError', function (err) {
throw new Error(err.stack || err);
});
var onErrorWrapper = function onErrorWrapper(err) {
if (err) {
if (typeof err === 'string') err = new Error(err);
onError(err, app._store.dispatch);
}
};
// internal model for destroy
// dva.model({ namespace, state, subscriptions, reducers, effects })向this._models添加经属性名转换后的model对象
model.call(this, {
namespace: '@@dva',
state: 0,
reducers: {
UPDATE: function UPDATE(state) {
return state + 1;
}
}
});
// get reducers and sagas from model
var sagas = [];
var reducers = (0, _extends3.default)({}, initialReducer);// 存储各model的流程控制函数
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
// 以迭代器形式将this._models中各model.reducers转化为流程控制函数，添加到reducers[model.namespace]中
// 流程控制函数中，当传参action.type与model.reducers的属性名相符，修改state；不符，顺序传递state
try {
for (var _iterator2 = (0, _getIterator3.default)(this._models), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var m = _step2.value;
// getReducer函数获取根据action.type调用相应model.reducer[action.type]以修改state的的流程控制函数
// 或者顺序传递state
reducers[m.namespace] = getReducer(m.reducers, m.state);
// getSaga函数构建生成器函数，迭代model.effects各生成器函数，设置action并作相应处理
if (m.effects) sagas.push(getSaga(m.effects, m, onErrorWrapper));
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
// dva.use({'extraReducers':{actionType:reducer()=>{}}})以数组形式将fn存储在plugin.hooks.extraReducers中
// 即plugin.hooks.extraReducers数组元素各对象的属性名不能与任意model对象的命名空间重名
var extraReducers = plugin.get('extraReducers');
(0, _invariant2.default)((0, _keys2.default)(extraReducers).every(function (key) {
return !(key in reducers);
}), 'app.start: extraReducers is conflict with other reducers');
// dva.use({'extraReducers':[]})替换plugin.hooks.extraEnhancers形式添加'extraEnhancers'钩子
var extraEnhancers = plugin.get('extraEnhancers');
(0, _invariant2.default)(Array.isArray(extraEnhancers),
'app.start: extraEnhancers should be array');
// 创建redux的中间件middlewares，使用redux.applyMiddleware方法完成挂载
var extraMiddlewares = plugin.get('onAction');
var reducerEnhancer = plugin.get('onReducer');
var sagaMiddleware = (0, _middleware2.default)();// redux中间件机制为着装饰dispatch方法
var middlewares = [sagaMiddleware].concat((0, _toConsumableArray3.default)((0, _flatten2.default)(extraMiddlewares)));
if (routerMiddleware) {
middlewares = [routerMiddleware(history)].concat((0, _toConsumableArray3.default)(middlewares));
}
var devtools = function devtools() {
return function (noop) {
return noop;
};
};
if (process.env.NODE_ENV !== 'production' && _window2.default.__REDUX_DEVTOOLS_EXTENSION__) {
devtools = _window2.default.__REDUX_DEVTOOLS_EXTENSION__;
}
var enhancers = [_redux.applyMiddleware.apply(undefined, (0, _toConsumableArray3.default)(middlewares)), devtools()].concat((0, _toConsumableArray3.default)(extraEnhancers));
// 创建redux的store
var store = this._store = (0, _redux.createStore)(createReducer(), initialState, _redux.compose.apply(undefined, (0, _toConsumableArray3.default)(enhancers)));
// 通过plugin.hooks.onReducer数组中函数装饰redux.combineReducers返回值
function createReducer(asyncReducers) {
return reducerEnhancer((0, _redux.combineReducers)((0, _extends3.default)({}, reducers, extraReducers, asyncReducers)));
}
// extend store
store.runSaga = sagaMiddleware.run;
store.asyncReducers = {};
// dva.use({onStateChange:fn()=>{}})绑定dispatch执行修改state时将触发的fn监听函数
var listeners = plugin.get('onStateChange');
var _iteratorNormalCompletion3 = true;
var _didIteratorError3 = false;
var _iteratorError3 = undefined;
// store.subscribe(fn)方法当dispatch方法执行修改state时调用fn
try {
for (var _iterator3 = (0, _getIterator3.default)(listeners), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
var listener = _step3.value;
store.subscribe(listener);
}
} catch (err) {
_didIteratorError3 = true;
_iteratorError3 = err;
} finally {
try {
if (!_iteratorNormalCompletion3 && _iterator3.return) {
_iterator3.return();
}
} finally {
if (_didIteratorError3) {
throw _iteratorError3;
}
}
}
// require('redux-saga/lib/internal/middleware').middleware添加redux-saga中间件
// sagaMiddleware.run(sage)设定redux-saga中间件的运行逻辑
// redux-saga机制？？？
sagas.forEach(sagaMiddleware.run);
// 设定history
if (setupHistory) setupHistory.call(this, history);
// 组件渲染完成当即执行model.subscription中各方法，派发action，返回解绑函数集合
var unlisteners = {};
var _iteratorNormalCompletion4 = true;
var _didIteratorError4 = false;
var _iteratorError4 = undefined;
try {
for (var _iterator4 = (0, _getIterator3.default)(this._models), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
var _model = _step4.value;
if (_model.subscriptions) {
unlisteners[_model.namespace] = runSubscriptions(_model.subscriptions, _model, this, onErrorWrapper);
}
}
} catch (err) {
_didIteratorError4 = true;
_iteratorError4 = err;
} finally {
try {
if (!_iteratorNormalCompletion4 && _iterator4.return) {
_iterator4.return();
}
} finally {
if (_didIteratorError4) {
throw _iteratorError4;
}
}
}
this.model = injectModel.bind(this, createReducer, onErrorWrapper, unlisteners);
this.unmodel = unmodel.bind(this, createReducer, reducers, unlisteners);
// 若容器节点存在，挂载组件；不存在，返回react组件
if (container) {
render(container, store, this, this._router);
plugin.apply('onHmr')(render.bind(this, container, store, this));
} else {
return getProvider(store, this, this._router);
}
}
// //////////////////////////////////
// Helpers
// 返回react组件
function getProvider(store, app, router) {
return function (extraProps) {
return _react2.default.createElement(
_reactRedux.Provider,
{ store: store },
router((0, _extends3.default)({ app: app, history: app._history }, extraProps))
);
};
}
// 挂载组件
function render(container, store, app, router) {
var ReactDOM = require('react-dom');
ReactDOM.render(_react2.default.createElement(getProvider(store, app, router)), container);
}
// 校验model模块的namespace、subscriptions、reducers、effects属性
// 同时将model.reducers、model.reducers[0]、model.effects对象的属性名转换为namespace+"/"+key形式
function checkModel(m, mobile) {
var model = (0, _extends3.default)({}, m);
var namespace = model.namespace,
reducers = model.reducers,
effects = model.effects;
// 校验model.namespace属性不能为空，不能重复，且mobile为否值时不能赋值为'routing'
(0, _invariant2.default)(namespace, 'app.model: namespace should be defined');
(0, _invariant2.default)(!app._models.some(function (model) {
return model.namespace === namespace;
}), 'app.model: namespace should be unique');
(0, _invariant2.default)(mobile || namespace !== 'routing',
'app.model: namespace should not be routing, it\'s used by react-redux-router');
// 校验model.subscriptions属性为普通对象
(0, _invariant2.default)(!model.subscriptions || (0, _isPlainObject2.default)(model.subscriptions), 'app.model: subscriptions should be Object');
// 校验model.reducers属性须为对象或数组
(0, _invariant2.default)(!reducers || (0, _isPlainObject2.default)(reducers) ||
Array.isArray(reducers), 'app.model: reducers should be Object or array');
// 校验当model.reducers为数组时，其首项须为对象，第二项须为函数
(0, _invariant2.default)(!Array.isArray(reducers) || (0, _isPlainObject2.default)(reducers[0])
&& typeof reducers[1] === 'function',
'app.model: reducers with array should be app.model({ reducers: [object, function] })');
// 校验model.effects须为对象
(0, _invariant2.default)(!effects || (0, _isPlainObject2.default)(effects),
'app.model: effects should be Object');
function applyNamespace(type) {
// 将model.reducers、model.reducers[0]、model.effects对象的属性名转换为namespace+"/"+key形式
function getNamespacedReducers(reducers) {
return (0, _keys2.default)(reducers).reduce(function (memo, key) {
// 校验model.reducers、model.reducers[0]、model.effects对象的属性不能以namespace+"/"起始
(0, _warning2.default)(key.indexOf('' + namespace + SEP) !== 0,
'app.model: ' + type.slice(0, -1) + ' ' + key +
' should not be prefixed with namespace ' + namespace);
memo['' + namespace + SEP + key] = reducers[key];
return memo;
}, {});
}
if (model[type]) {
if (type === 'reducers' && Array.isArray(model[type])) {
model[type][0] = getNamespacedReducers(model[type][0]);
} else {
model[type] = getNamespacedReducers(model[type]);
}
}
}
// 将model.reducers或model.reducers[0]对象的属性名转换为namespace+"/"+key形式
applyNamespace('reducers');
// 将model.effects对象的属性名转换为namespace+"/"+key形式
applyNamespace('effects');
return model;
}
// 是否html节点元素
function isHTMLElement(node) {
return (typeof node === 'undefined' ? 'undefined' :
(0, _typeof3.default)(node)) === 'object' && node !== null && node.nodeType && node.nodeName;
}
// 获取根据action.type调用相应model.reducer[action.type]以修改state的的流程控制函数；或者顺序传递state
function getReducer(reducers, state) {
// model.reducers为数组时，调用model.reducers[1]包装handleActions流程控制函数的返回值
// handleActions流程控制函数用于设定特定action.type下该调用的reducer函数以修改state
// 其返回值为函数(state,action)=>{}，根据action.type调用model.reducers中相应的reducer；或顺序传递state
if (Array.isArray(reducers)) {
return reducers[1]((0, _handleActions2.default)(reducers[0], state));
} else {
return (0, _handleActions2.default)(reducers || {}, state);
}
}
// regenerator.mark(fn)将fn.prototype赋值为迭代器的原型对象并附以next、return、throw方法后返回fn
// 若将封装后的fn作为参数outerFn传入regenerator.wrap方法中，wrap内获取fn.prototype迭代器原型，为其添加_invoke方法后返回
// regenerator.wrap(innerFn,outerFn,self,tryLocsList)方法获取outerFn.prototype迭代器原型或默认迭代器原型
// 为其添加_invoke方法后返回，从而其返回值next方法执行时将调用innerFn特定条件分支，throw方法报错，return执行完成
// regenerator.keys(object)遍历取出object对象的属性名集合，调用返回值函数，类迭代形式取出反序排列的该属性名集合
// context.delegateYield(iterator,resultName,nextLoc)调用时将使iterator替代innerFn输出内容，通过nextLoc跳回到innerFn取值
// 以生成器函数逻辑处理model.effects各属性，next方法逐层调用时将获取{context:null,fn:watcher,args:undefined}
// watcher为getWatcher函数包装model.effects[key]后的生成器函数，用于设置action，并取出fn=sagaWithCatch
// sagaWithCatch函数的逻辑中，报错时将跳转onError函数内
function getSaga(effects, model, onError) {
return _regenerator2.default.mark(function _callee3() {
var _this = this;
var key;
return _regenerator2.default.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
_context3.t0 = _regenerator2.default.keys(effects);
case 1:
if ((_context3.t1 = _context3.t0()).done) {
_context3.next = 7;
break;
}
key = _context3.t1.value;
if (!Object.prototype.hasOwnProperty.call(effects, key)) {
_context3.next = 5;
break;
}
// context.delegateYield被调用时将代替_callee3$输出内容，即先取_callee2生成器输出内容
// _callee2生成器中，通过对_context.next赋值，跳出_callee2生成器，并回到_callee3$取值
return _context3.delegateYield(_regenerator2.default.mark(function _callee2() {
var watcher, task;
return _regenerator2.default.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
// watcher赋值为getWatcher创建的生成器函数
watcher = getWatcher(key, effects[key], model, onError);
_context2.next = 3;
// sagaEffects.fork返回{context:null,fn:watcher,args:undefined}
return sagaEffects.fork(watcher);
case 3:
task = _context2.sent;
_context2.next = 6;
return sagaEffects.fork(_regenerator2.default.mark(function _callee() {
return _regenerator2.default.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
// sagaEffects.take返回{[IO]:true,TAKE:model.namespace+'/@@CANCEL_EFFECTS'}
return sagaEffects.take(model.namespace + '/@@CANCEL_EFFECTS');
case 2:
_context.next = 4;
// sagaEffects.cancel返回{[IO]:true,CANCEL:task}
// task即_callee2$条件分支case 0下返回值{context:null,fn:watcher,args:undefined}
return sagaEffects.cancel(task);
case 4:
case 'end':
return _context.stop();
}
}
}, _callee, this);
}));
case 6:
case 'end':
return _context2.stop();
}
}
}, _callee2, _this);
})(), 't2', 5);
// next方法再次调用时，model.effects其中一个属性已经处理完成，跳回到条件分支1，处理下一个model.effects属性
case 5:
_context3.next = 1;
break;
case 7:
case 'end':
return _context3.stop();
}
}
}, _callee3, this);
});
}
// 构建生成器函数
// 当type="watcher"，返回sagaWithCatch生成器函数，其返回值的next方法调用时将执行effect生成器函数
// 当type="takeEvery"，返回值的next方法二次调用时将设定action，并输出{context,fn:sagaWithCatch,args:action}
function getWatcher(key, _effect, model, onError) {
var _marked = [sagaWithCatch].map(_regenerator2.default.mark);
var effect = _effect;
var type = 'takeEvery';
var ms = void 0;
// model.effect为数组时，第二项为配置项opts
// opts.type须是['watcher', 'takeEvery', 'takeLatest', 'throttle']中的一个
// opts.type若为'throttle'，则opts.ms必须存在
if (Array.isArray(_effect)) {
effect = _effect[0];
var opts = _effect[1];
if (opts && opts.type) {
type = opts.type;
if (type === 'throttle') {
(0, _invariant2.default)(opts.ms, 'app.start: opts.ms should be defined if type is throttle');
ms = opts.ms;
}
}
(0, _invariant2.default)(['watcher', 'takeEvery', 'takeLatest', 'throttle'].indexOf(type) > -1,
'app.start: effect type should be takeEvery, takeLatest, throttle or watcher');
}
// 跟编译后的生成器函数相似，调用sagaWithCatch获取regenerator.wrap装饰后的generator函数
// 调用返回值generator函数的next方法，执行effect生成器函数；若报错，则使用onError函数捕获错误
// generator函数的next方法的返回值逐步调用next方法，即执行effect生成器函数内yield语句
function sagaWithCatch() {
var _len,
args,
_key,
_args4 = arguments;
// effect生成器函数本身经过babel编译
// 再使用regenerator.wrap方法包裹，用于捕获effect生成器函数调用时的报错
return _regenerator2.default.wrap(function sagaWithCatch$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
// sagaWithCatch()返回值首次执行next方法时，调用innerFn即sagaWithCatch的case 0条件分支语句
case 0:
_context4.prev = 0;
for (_len = _args4.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = _args4[_key];
}
_context4.next = 4;
// 用户配置的model.effects生成器函数实际获得的参数为args和封装put方法后的sagaEffects对象
// createEffects(model)函数获取put方法经封装后的sagaEffects对象
// 其put方法输出extend(action,{type:prefixType(type,model)})，即action.type添加model.namespace+"/"前缀
return effect.apply(undefined,
(0, _toConsumableArray3.default)(args.concat(createEffects(model)))
);
// sagaWithCatch()返回值二次执行next方法时，调用innerFn即sagaWithCatch$的case 4条件分支语句
case 4:
_context4.next = 9;
break;
// 由regenerator.wrap方法的第四个参数设定，报错时调用innerFn即sagaWithCatch$的case 6条件分支语句
case 6:
_context4.prev = 6;
// context['catch'](0)，按regenrator-runtime机制，为innerFn即sagaWithCatch$执行case 0时捕获的错误
_context4.t0 = _context4['catch'](0);
onError(_context4.t0);
// sagaWithCatch()返回值三次执行next方法时，调用innerFn即sagaWithCatch$的case 9条件分支语句
// 即sagaWithCatch类生成器函数执行完毕
case 9:
case 'end':
return _context4.stop();
}
}
}, _marked[0], this, [[0, 6]]);// [[0, 6]]决定innerFn即sagaWithCatch$的条件语句执行机制
}
// 获取dva.use("onEffect",fn)注册的函数fn(effect,sagaEffects,model,key)装饰model.effects中各生成器函数
var onEffect = plugin.get('onEffect');
var sagaWithOnEffect = applyOnEffect(onEffect, sagaWithCatch, model, key);
switch (type) {
case 'watcher':
// 返回sagaWithCatch，调用sagaWithCatch函数创建生成器，next方法执行effect生成器函数
return sagaWithCatch;
case 'takeLatest':
return _regenerator2.default.mark(function _callee4() {
return _regenerator2.default.wrap(function _callee4$(_context5) {
while (1) {
switch (_context5.prev = _context5.next) {
case 0:
_context5.next = 2;
return (0, _sagaHelpers.takeLatestHelper)(key, sagaWithOnEffect);
case 2:
case 'end':
return _context5.stop();
}
}
}, _callee4, this);
});
case 'throttle':
return _regenerator2.default.mark(function _callee5() {
return _regenerator2.default.wrap(function _callee5$(_context6) {
while (1) {
switch (_context6.prev = _context6.next) {
case 0:
_context6.next = 2;
return (0, _sagaHelpers.throttleHelper)(ms, key, sagaWithOnEffect);
case 2:
case 'end':
return _context6.stop();
}
}
}, _callee5, this);
});
default:
// 返回值为generator生成器函数，执行后获取含有next方法的生成器函数相关迭代器
// next方法首次执行返回sagaHelpers.takeEveryHelper方法封装的迭代器函数
// next方法再次执行意味generator生成器函数执行完毕
return _regenerator2.default.mark(function _callee6() {
return _regenerator2.default.wrap(function _callee6$(_context7) {
while (1) {
switch (_context7.prev = _context7.next) {
// _callee6()返回值首次执行next方法时，调用innerFn即_callee6$的case 0条件分支语句
case 0:
_context7.next = 2;
// sagaHelpers.takeEveryHelper方法执行返回迭代器
// 返回值迭代器的next方法首次执行，设定将根据二次调用next方法的参数时更改action值
// next方法再次执行，更改action，并返回{context:null,fn:sagaWithOnEffect,args:action}
return (0, _sagaHelpers.takeEveryHelper)(key, sagaWithOnEffect);
// _callee6()返回值二次执行next方法时，调用innerFn即_callee6$的case 2条件分支语句
// 即_callee6类生成器函数执行完毕
case 2:
case 'end':
return _context7.stop();
}
}
}, _callee6, this);
});
}
}
// 组件渲染完成当即执行model.subscription中各方法，派发action，返回解绑函数集合
function runSubscriptions(subs, model, app, onError) {
var unlisteners = [];
var noneFunctionSubscriptions = [];
for (var key in subs) {
if (Object.prototype.hasOwnProperty.call(subs, key)) {
var sub = subs[key];
// 校验model.subscription对象的属性值为函数
(0, _invariant2.default)(typeof sub === 'function',
'app.start: subscription should be function');
var unlistener = sub({
dispatch: createDispatch(app._store.dispatch, model),
history: app._history
}, onError);
if ((0, _lodash2.default)(unlistener)) {
unlisteners.push(unlistener);
} else {
noneFunctionSubscriptions.push(key);
}
}
}
return { unlisteners: unlisteners, noneFunctionSubscriptions: noneFunctionSubscriptions };
}
// model.reducers或model.effects存在时，type拼接上model.namespace+"/"前缀后返回
function prefixType(type, model) {
var prefixedType = '' + model.namespace + SEP + type;
if (model.reducers && model.reducers[prefixedType] || model.effects && model.effects[prefixedType]) {
return prefixedType;
}
return type;
}
// 获取put方法经封装后的sagaEffects对象，put方法输出extend(action,{type:prefixType(type,model)})
// 即action.type经model.namespace+"/"前缀后
function createEffects(model) {
function put(action) {
var type = action.type;
// 校验action.type属性必须为真值，且不能以model.namespace+"/"起始
(0, _invariant2.default)(type, 'dispatch: action should be a plain Object with type');
(0, _warning2.default)(type.indexOf('' + model.namespace + SEP) !== 0,
'effects.put: ' + type + ' should not be prefixed with namespace ' + model.namespace);
return sagaEffects.put((0, _extends3.default)({}, action, { type: prefixType(type, model) }));
}
return (0, _extends3.default)({}, sagaEffects, { put: put });
}
// 调用redux的dispatch方法派发action
function createDispatch(dispatch, model) {
return function (action) {
var type = action.type;
// 校验action.type属性必须为真值，且不能以model.namespace+"/"起始
(0, _invariant2.default)(type, 'dispatch: action should be a plain Object with type');
(0, _warning2.default)(type.indexOf('' + model.namespace + SEP) !== 0,
'dispatch: ' + type + ' should not be prefixed with namespace ' + model.namespace);
return dispatch((0, _extends3.default)({}, action, { type: prefixType(type, model) }));
};
}
// 装饰model.effects中各生成器函数
// dva.use("onEffect",fn)方法注册的函数fn(effect,sagaEffects,model,key)用于装饰model.effects中各生成器函数
function applyOnEffect(fns, effect, model, key) {
var _iteratorNormalCompletion5 = true;
var _didIteratorError5 = false;
var _iteratorError5 = undefined;
try {
for (var _iterator5 = (0, _getIterator3.default)(fns), _step5; !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done); _iteratorNormalCompletion5 = true) {
var fn = _step5.value;
effect = fn(effect, sagaEffects, model, key);
}
} catch (err) {
_didIteratorError5 = true;
_iteratorError5 = err;
} finally {
try {
if (!_iteratorNormalCompletion5 && _iterator5.return) {
_iterator5.return();
}
} finally {
if (_didIteratorError5) {
throw _iteratorError5;
}
}
}
return effect;
}
};
}
module.exports = exports['default'];
lib/handleActions.js流程控制，通过参数action.type调用相应的reducer
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _toConsumableArray2 = require("babel-runtime/helpers/toConsumableArray");
var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
var _keys = require("babel-runtime/core-js/object/keys");
var _keys2 = _interopRequireDefault(_keys);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function identify(value) {
return value;
}
function handleAction(actionType) {
var reducer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : identify;
return function (state, action) {
var type = action.type;
if (type && actionType !== type) {
return state;
}
return reducer(state, action);
};
}
function reduceReducers() {
for (var _len = arguments.length, reducers = Array(_len), _key = 0; _key < _len; _key++) {
reducers[_key] = arguments[_key];
}
return function (previous, current) {
return reducers.reduce(function (p, r) {
return r(p, current);
}, previous);
};
}
// 参数handlers={actionType:reducer(state,action)=>{}}
// 流程控制，按返回函数的传参action.type执行相应的reducer，修改state
function handleActions(handlers, defaultState) {
// 获取[(state,action)=>{}]函数集合
// 当action.type与actionType相符时，执行相应的reducer，修改state后，作为参数传入下一个(state,action)=>{}函数
// 不符时，直接将state作为参数传入下一个(state,action)=>{}函数
var reducers = (0, _keys2.default)(handlers).map(function (type) {
return handleAction(type, handlers[type]);
});
// 流程控制，按action.type执行相应的reducer，修改state；或跳过reducer执行，将state传递到下一个流程
var reducer = reduceReducers.apply(undefined, (0, _toConsumableArray3.default)(reducers));
// 按action.type执行相应的reducer，修改state
return function () {
var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultState;
var action = arguments[1];
return reducer(state, action);
};
}
exports.default = handleActions;
module.exports = exports["default"];
扫描二维码关注公众号，回复：
296100 查看本文章
lib/plugin.js插件机制，用于设定钩子
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _getIterator2 = require('babel-runtime/core-js/get-iterator');
var _getIterator3 = _interopRequireDefault(_getIterator2);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _isPlainObject = require('is-plain-object');
var _isPlainObject2 = _interopRequireDefault(_isPlainObject);
var _invariant = require('invariant');
var _invariant2 = _interopRequireDefault(_invariant);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Plugin = function () {
function Plugin() {
(0, _classCallCheck3.default)(this, Plugin);
this.hooks = {
onError: [],
onStateChange: [],
onAction: [],
onHmr: [],
onReducer: [],
onEffect: [],
extraReducers: [],
extraEnhancers: []
};
}
// plugin.use(plugin={key:fn})添加钩子函数，存入this.hooks中
// 当key为'extraEnhancers'，钩子为单函数形式；当key为其他时，钩子为数组形式
(0, _createClass3.default)(Plugin, [{
key: 'use',
value: function use(plugin) {
// 校验plugin位普通对象
(0, _invariant2.default)((0, _isPlainObject2.default)(plugin),
'plugin.use: plugin should be plain object');
var hooks = this.hooks;
for (var key in plugin) {
if (Object.prototype.hasOwnProperty.call(plugin, key)) {
(0, _invariant2.default)(hooks[key], 'plugin.use: unknown plugin property: ' + key);
if (key === 'extraEnhancers') {
hooks[key] = plugin[key];
} else {
hooks[key].push(plugin[key]);
}
}
}
}
// plugin.apple("onError | onHmr",defaultHandler)以迭代器调用数组形式的"onError | onHmr"钩子函数集合
// 若不存在this.hooks["onError | onHmr"]，调用defaultHandler函数
}, {
key: 'apply',
value: function apply(key, defaultHandler) {
var hooks = this.hooks;
var validApplyHooks = ['onError', 'onHmr'];
(0, _invariant2.default)(validApplyHooks.indexOf(key) > -1,
'plugin.apply: hook ' + key + ' cannot be applied');
var fns = hooks[key];
return function () {
if (fns.length) {
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = (0, _getIterator3.default)(fns), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var fn = _step.value;
fn.apply(undefined, arguments);
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
} else if (defaultHandler) {
defaultHandler.apply(undefined, arguments);
}
};
}
// 获取添加的钩子，通常返回plugin.hooks[key]
// 当key为'extraReducers'时，plugin.hooks.extraReducers=[{actionType:()=>{}}]从数组转化为对象后输出
// 当key为'onReducer'时，plugin.hooks.onReducer=[fn]从数组转化为逐次调用fn的函数，用于装饰redux.combineReducers返回值
}, {
key: 'get',
value: function get(key) {
var hooks = this.hooks;
(0, _invariant2.default)(key in hooks, 'plugin.get: hook ' + key + ' cannot be got');
if (key === 'extraReducers') {
var ret = {};
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = (0, _getIterator3.default)(hooks[key]), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var reducerObj = _step2.value;
ret = (0, _extends3.default)({}, ret, reducerObj);
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
return ret;
} else if (key === 'onReducer') {
return function (reducer) {
var _iteratorNormalCompletion3 = true;
var _didIteratorError3 = false;
var _iteratorError3 = undefined;
try {
for (var _iterator3 = (0, _getIterator3.default)(hooks[key]), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
var reducerEnhancer = _step3.value;
reducer = reducerEnhancer(reducer);
}
} catch (err) {
_didIteratorError3 = true;
_iteratorError3 = err;
} finally {
try {
if (!_iteratorNormalCompletion3 && _iterator3.return) {
_iterator3.return();
}
} finally {
if (_didIteratorError3) {
throw _iteratorError3;
}
}
}
return reducer;
};
} else {
return hooks[key];
}
}
}]);
return Plugin;
}();
exports.default = Plugin;
module.exports = exports['default'];
lib/mobile.js
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createDva = require('./createDva');
var _createDva2 = _interopRequireDefault(_createDva);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = (0, _createDva2.default)({
mobile: true
});
module.exports = exports['default'];