Dva 源码解析
https://github.com/dvajs/dva/tree/master/packages

实现 reducers （基本计数器-reducers示例）

dva/index.js

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import {createStore, combineReducers} from 'redux';
  4. import {Provider, connect} from 'react-redux';
  5. import prefixNamespace from './prefixNamespace'
  6. export {
  7.   connect,
  8. }
  10. function dva(){
  11.   const app = {
  12.     model,
  13.     _models: [],
  14.     router,
  15.     _router: null,
  16.     start,
  17.   }
  18.   let initialReducers = {}; //定义一个初始化的reducers合并对象
  19.   function model(model){
  20.     // 给action添加namespace前缀
  21.     // 如：把 add(state, action){} 改为 [counter1/add](state, action){}
  22.     const prefixedModel = prefixNamespace(model);
  23.     app._models.push(prefixedModel);
  24.     return prefixedModel;
  25.   }
  26.   function router(router){
  27.     app._router = router;
  28.   }
  29.   function start(selector){
  30.     // 把每一个model的reducers添加到initialReducers中 
  31.     app._models.forEach(model => {
  32.       initialReducers[model.namespace] = getReducer(model);
  33.     })
  34.     let rootReducer = createReducer();  //创建根rootReducer
  35.     let store = createStore(rootReducer); //创建仓库store
  37.     // 合并所有model的reducers
  38.     function createReducer(){
  39.       return combineReducers(initialReducers);
  40.     }
  42.     ReactDOM.render((
  43.       <Provider store={store}>
  44.         {app._router({})}
  45.       </Provider>
  46.     ), document.querySelector(selector));
  47.   }
  48.   return app;
  49. };
  51. // 从子model中获取子reducer
  52. function getReducer(model){
  53.   const {reducers, state: initialState} = model;
  55.   function reducer(state=initialState, action){
  56.     const matchReducer = reducers[action.type];
  57.     // 如果有匹配，返回新数据；没有匹配到，返回旧数据。
  58.     if (matchReducer) return matchReducer(state, action);
  59.     return state;
  60.   }
  61.   return reducer;
  62. }
  64. export default dva;

dva/prefixNamespace.js

  1.  function prefix(obj, namespace){
  2.   return Object.keys(obj).reduce((memo, key) => {
  3.     const newKey = `${namespace}/${key}`;
  4.     memo[newKey] = obj[key];
  5.     return memo;
  6.   }, {})
  7. }
  9. /** 给model的action添加namespace前缀
  10.  * 
  11.  * @param {*} model 
  12.  */
  13. function prefixNamespace(model){
  14.   if (model.reducers){
  15.     model.reducers = prefix(model.reducers, model.namespace);
  16.   }
  17.   return model;
  18. }
  20. export default prefixNamespace;

实现 effects

dva/index.js

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. + import {createStore, combineReducers, applyMiddleware} from 'redux';
  4. import {Provider, connect} from 'react-redux';
  5. + import createSagaMiddleware from 'redux-saga';
  6. import prefixNamespace from './prefixNamespace'
  7. + import getSagas from './getSagas'
  8. export {
  9.   connect,
  10. }
  12. function dva(){
  13.   const app = {
  14.     model,
  15.     _models: [],
  16.     router,
  17.     _router: null,
  18.     start,
  19.   }
  20.   const initialReducers = {}; //定义一个初始化的reducers合并对象
  21.   function model(model){
  22.     // 给action添加namespace前缀
  23.     // 如：把 add(state, action){} 改为 [counter1/add](state, action){}
  24.     const prefixedModel = prefixNamespace(model);
  25.     app._models.push(prefixedModel);
  26.     return prefixedModel;
  27.   }
  28.   function router(router){
  29.     app._router = router;
  30.   }
  31.   function start(selector){
  32.     // 把每一个model的reducers添加到initialReducers中
  33.     app._models.forEach(model => {
  34.       initialReducers[model.namespace] = getReducer(model);
  35.     })
  36.     const rootReducer = createReducer();  //创建根rootReducer
  37. +   const sagas = getSagas(app);  //获取所有model的saga集合 [model1-Saga, model2-Saga]
  38. +   const sagaMiddleware = createSagaMiddleware();  //创建saga中间件
  39. +   const store = applyMiddleware(sagaMiddleware)(createStore)(rootReducer);  // 创建仓库store
  40. +   sagas.forEach(saga => sagaMiddleware.run(saga));  //启动saga
  42.     // 合并所有model的reducers
  43.     function createReducer(){
  44.       return combineReducers(initialReducers);
  45.     }
  47.     ReactDOM.render((
  48.       <Provider store={store}>
  49.         {app._router({})}
  50.       </Provider>
  51.     ), document.querySelector(selector));
  52.   }
  53.   return app;
  54. };
  56. // 从子model中获取子reducer
  57. function getReducer(model){
  58.   const {reducers, state: initialState} = model;
  60.   function reducer(state=initialState, action){
  61.     const matchReducer = reducers[action.type];
  62.     // 如果有匹配，返回新数据；没有匹配到，返回旧数据。
  63.     if (matchReducer) return matchReducer(state, action);
  64.     return state;
  65.   }
  66.   return reducer;
  67. }
  69. export default dva;

dva/prefixNamespace.js

  1. function prefix(obj, namespace){
  2.   return Object.keys(obj).reduce((memo, key) => {
  3.     const newKey = `${namespace}/${key}`;
  4.     memo[newKey] = obj[key];
  5.     return memo;
  6.   }, {})
  7. }
  9. /** 给model的action添加namespace前缀
  10.  * 
  11.  * @param {*} model 
  12.  */
  13. function prefixNamespace(model){
  14.   if (model.reducers){
  15.     model.reducers = prefix(model.reducers, model.namespace);
  16.   }
  17. + if (model.effects){
  18. +   model.effects = prefix(model.effects, model.namespace);
  19. + }
  20.   return model;
  21. }
  23. export default prefixNamespace;

dva/getSagas.js

  1. import * as sagaEffects from 'redux-saga/effects';
  3. // 返回所有子model saga 的集合
  4. function getSagas(app){
  5.   let sagas = [];
  6.   for (const model of app._models){
  7.     sagas.push(getSaga(model.effects, model));
  8.   }
  9.   return sagas;
  10. }
  11. /** 返回子model的saga
  12.  * 
  13.  * @param {*} effects 
  14.  * @param {*} model 
  15.  */
  16. function getSaga(effects, model){
  17.   return function* (){
  18.     for (const key in effects){
  19.       const watcher = getWatcher(key, effects[key], model);
  20.       yield sagaEffects.fork(watcher); //fork一个子进程执行 watcherSaga
  21.     }
  22.   }
  23. }
  24. /** 获取 watcherSaga （rootSaga -> watcherSaga -> workerSaga）
  25.  * 当每次向仓库派发asyncAdd动作的时候，都会执行 asyncAddEffect saga
  26.  * 
  27.  * @param {*} key       监听动作：asyncAdd
  28.  * @param {*} effect    工作saga：asyncAddEffect，即：function* asyncAdd(action){...}
  29.  * @param {*} model     子model
  30.  */
  31. function getWatcher(key, effect, model){
  32.   return function* (){
  33.     // 每当key动作派发的时候，saga在执行effect(工作saga)的时候，会向它默认传递action
  34.     yield sagaEffects.takeEvery(key, function* sagaWithCatch(...args){
  35.       yield effect(
  36.         ...args, 
  37.         {
  38.           ...sagaEffects, 
  39.           // 重写put方法，给本model的action.type 加上namespace前缀
  40.           put: action => sagaEffects.put({...action, type: prefixType(action.type, model)}),
  41.         },
  42.       );
  43.     });
  44.   }
  45. }
  47. /** 给 action.type 加上namespace前缀 
  48.  * 
  49.  * @param {*} type 动作类型
  50.  * @param {*} model 子model
  51.  */
  52. function prefixType(type, model){
  53.   const {namespace} = model;
  54.   // 如果派发本model的动作，不加前缀
  55.   if (type.indexOf('/') === -1){
  56.     return `${namespace}/${type}`;
  57.   } else {
  58.     if (type.split('/')[0] === namespace){
  59.       console.warn(`Warning: [sagaEffects.put] ${type} should not be prefixed with namespace ${namespace}`);
  60.     }
  61.     // 如果派发其它model的动作，需要加前缀
  62.     return type;
  63.   }
  64. }
  66. export default getSagas;

支持路由

dva/router.js

  1. export * from 'react-router-dom';

dva/index.js

  1. ...
  2. + import {createHashHistory} from 'history';
  4. +function dva(options={}){
  5.   ...
  6. + const history = options.history || createHashHistory();
  7.   ...
  8.     function start(selector){
  9.     ...
  10.     ReactDOM.render((
  11.       <Provider store={store}>
  12. +       {app._router({app, history})}
  13.       </Provider>
  14.     ), document.querySelector(selector));
  15.   }
  16.   return app;
  17. };
  18. ...
  19. export default dva;

支持路由跳转

dva 源码中用的 react-router-redux，该库现在已废弃，被 connected-react-router 替代了。

dva/router.js

  1. + import * as routerRedux from 'connected-react-router';
  2. export * from 'react-router-dom';
  3. + export {routerRedux};

dva/index.js

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import {createStore, combineReducers, applyMiddleware} from 'redux';
  4. import {Provider, connect} from 'react-redux';
  5. import createSagaMiddleware from 'redux-saga';
  6. + import {routerMiddleware, connectRouter, ConnectedRouter} from 'connected-react-router';
  7. import {createHashHistory} from 'history';
  9. import prefixNamespace from './prefixNamespace'
  10. import getSagas from './getSagas'
  11. export {
  12.   connect,
  13. }
  15. function dva(options={}){
  16.   const app = {
  17.     model,
  18.     _models: [],
  19.     router,
  20.     _router: null,
  21.     start,
  22.   }
  23.   const history = options.history || createHashHistory();
  24. + const initialReducers = {router: connectRouter(history)}; //定义一个初始化的reducers合并对象
  25.   function model(model){
  26.     // 给action添加namespace前缀
  27.     // 如：把 add(state, action){} 改为 [counter1/add](state, action){}
  28.     const prefixedModel = prefixNamespace(model);
  29.     app._models.push(prefixedModel);
  30.     return prefixedModel;
  31.   }
  32.   function router(router){
  33.     app._router = router;
  34.   }
  35.   function start(selector){
  36.     // 把每一个model的reducers添加到initialReducers中
  37.     app._models.forEach(model => {
  38.       initialReducers[model.namespace] = getReducer(model);
  39.     })
  40.     const rootReducer = createReducer();  //创建根rootReducer
  41.     const sagas = getSagas(app);  //获取所有model的saga集合 [model1-Saga, model2-Saga]
  42.     const sagaMiddleware = createSagaMiddleware();  //创建saga中间件
  43.     // 创建仓库store
  44.     const store = applyMiddleware(
  45. +     routerMiddleware(history), 
  46.       sagaMiddleware
  47.     )(createStore)(rootReducer);
  48.     sagas.forEach(saga => sagaMiddleware.run(saga));  //启动saga
  50.     // 合并所有model的reducers
  51.     function createReducer(){
  52.       return combineReducers(initialReducers);
  53.     }
  55.     ReactDOM.render((
  56.       <Provider store={store}>
  57.         {app._router({app, history})}
  58.       </Provider>
  59.     ), document.querySelector(selector));
  60.   }
  61.   return app;
  62. };
  64. // 从子model中获取子reducer
  65. function getReducer(model){
  66.   const {reducers, state: initialState} = model;
  68.   function reducer(state=initialState, action){
  69.     const matchReducer = reducers[action.type];
  70.     // 如果有匹配，返回新数据；没有匹配到，返回旧数据。
  71.     if (matchReducer) return matchReducer(state, action);
  72.     return state;
  73.   }
  74.   return reducer;
  75. }
  77. export default dva;

dva/saga.js

  1. export * from 'redux-saga';

dva/dynamic

https://github.com/dvajs/dva/blob/master/packages/dva/src/dynamic.js

dva-loading

https://github.com/dvajs/dva/tree/master/packages/dva-loading

dva-immer

https://github.com/dvajs/dva/tree/master/packages/dva-immer