dva源码参考 https://github.com/dvajs/dva/tree/master/packages/dva-core/src

dva分析文档
https://www.yuque.com/flying.ni/the-tower/tvzasn
https://blog.csdn.net/yehuozhili/category_9673656.html

Desktop.zip

dva的三个核心方法

  1. router，管理路由，封装 react-router-dom
  2. model，管理数据流，封装 react-redux，redux-saga异步请求
  3. start，启动项目，封装 ReactDOM.render()

connect连接组件和 Store
组件 dispatch action修改数据，action同时提交到 reducer和 effect里面

  1. 先执行 reducers里面的方法，后执行 effects里面的
    1. reducers里面的方法修改只，effects里面获取到的就是最新的值
  2. effects里面 put(dispatch) 不需要写命名空间前缀

effects从服务端获取数据，然后提交到 reducers里面，reducers修改 store

  1. app.model({
  2.     namespace: 'counter',
  3.   state: { number: 10 },
  4.   reducers: {
  5.     log(state, action) {
  6.         return { number: 200 }
  7.     }
  8.   },
  9.   effects: {
  10.     *log(action, effect) {
  11.       const state = yield effect.select(state => state.counter)
  12.       //同名方法修改值；effect里面获取到的就是 reducers里面修改的最新值
  13.       console.log('effect state', state.number) // 200
  14.     }
  15.   }
  16. })

image.png

dva设计思路

dva有 3个核心方法

  • .model()
  • .router()
  • .start()

同步方法，待完善的

  • action.type 没有处理 namespace 前缀，多个 action有命名冲突的可能
  • router只能处理一个路由
  • dispatch只能处理同步，不能处理异步

dva.js

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { combineReducers, createStore } from 'redux';
  4. import { Provider, connect } from 'react-redux';
  5. import { createHashHistory } from 'history';
  7. function dva(options={}) {
  8.   const app = {
  9.     model, // 添加模型的方法，方法处理器
  10.     router,
  11.     start,
  12.     _models: [], // 定义所有的模型
  13.     _router: undefined, // 存放路由定定义的函数
  14.   }
  16.   // 把 model放到数组里
  17.   function model(model) {
  18.     app._models.push(model)
  19.     // app._models = [{namespace: 'counter'}, {namespace: 'list'}]
  20.   }
  22.   // 路由配置
  23.   function router(routerConfig) {
  24.     app._router = routerConfig
  25.   }
  27.   function start(containerId) {
  28.     const history = options.history || createHashHistory();
  29.     const reducers = getReducers(app);
  30.     const store = createStore(reducers);
  32.     // application实例，路由传入默认参数
  33.     const App = app._router({ ...app, history })
  34.     ReactDOM.render(
  35.       <Provider store={store}>{ App }</Provider>,
  36.       document.querySelector(containerId)
  37.     )
  38.   }
  40.   return app
  41. }
  43. export { connect }
  44. export default dva
  46. function getReducers(app) {
  47.   const rootReducers = {};
  49.   // app._models = [{namespace: 'counter',state, reducers}, {namespace: 'list'}]
  50.   for(const model of app._models) {
  51.     const { namespace, reducers } = model;
  52.     rootReducers[namespace] = (state = model.state, action) => {
  53.       const reducer = reducers[action.type]
  54.       return reducer ? reducer(state, action) : state;
  55.     }
  56.   }
  57.   return combineReducers(rootReducers);
  58. }

getReducers

getReducers就是把 model里面的 reducer变成 reducer函数

  1. app.model({
  2.   namespace: 'counter',
  3.   state: { number: 0 },
  4.   // 同步的方法
  5.   reducers: {
  6.     add(state, action) {
  7.       return { number: state.number + (action.payload || 10) }
  8.     },
  9.     minus(state) {
  10.       // state是之前的状态，return返回值是新状态 state
  11.       return { number: state.number - 2 }
  12.     }
  13.   }
  14. })
  16. // 转变成 reducer函数，如何转化？通过 getReducers
  17. function reducer(state = model.state, action) => {
  18.     if(action.type === 'counter/add') {
  19.       return add(state, action)
  20.   }
  21.   if(action.type === 'counter/minus') {
  22.       return minus(state, action);
  23.   }
  24.   return state;
  25. }

getReducers

  1. function getReducers(app) {
  2.   const rootReducers = {};
  4.   // app._models = [{namespace: 'counter',state, reducers}, {namespace: 'list'}]
  5.   for(const model of app._models) {
  6.     const { namespace, reducers } = model;
  7.     rootReducers[namespace] = (state = model.state, action) => {
  8.       const reducer = reducers[action.type]
  9.       return reducer ? reducer(state, action) : state;
  10.     }
  11.   }
  12.   return combineReducers(rootReducers);
  13. }

index.js

  1. import React from 'react'
  2. import { createBrowserHistory } from 'history';
  3. import dvaLoading from 'dva-loading'
  5. import dva, { connect } from './dva'
  6. import './index.less';
  8. // 1. Initialize 实例化 dva
  9. const app = dva({
  10.   history: createBrowserHistory(),
  11. });
  13. app.use(dvaLoading())
  15. // 每个 model模型都一个自己的命名空间，防止方法重名混乱
  16. app.model({
  17.   namespace: 'counter',
  18.   state: { number: 0 },
  19.   // 同步的方法
  20.   reducers: {
  21.     // state是之前的状态，return返回值是新状态 state
  22.     add(state, action) {
  23.       return { number: state.number + (action.payload || 10) }
  24.     },
  25.     minus(state) {
  26.       return { number: state.number - 2 }
  27.     }
  28.   }
  29. })
  31. const Calc = props => {
  32.   const { number, dispatch } = props
  33.   return (
  34.     <>
  35.       <h1>DVA {number}</h1>
  36.       <button
  37.         onClick={() => dispatch({ type: 'add' })}
  38.       >增加 10</button>
  39.       <button
  40.         onClick={() => dispatch({ type: 'minus' })}
  41.       >减少 2</button>
  42.     </>
  43.   )
  44. }
  46. // connect连接 state数据和组件
  47. const Counter = connect(state => state.counter)(Calc)
  49. // 4. Router 声明路由
  50. // app.router(require('./router').default)
  51. app.router(() => <Counter />) // 一个路由
  53. // 5. Start 项目启动，把 app.router的结果渲染到 #root里面
  54. app.start('#root')

解决reducers中的namespace

prefixNamespace
此方法就是把 reducers对象的属性从 add 变成 ‘counter/add’

  1. function prefixNamespace(model, delimit = '/') {
  2.   const { reducers = {}, namespace } = model;
  3.   const keys = Object.keys(reducers);
  5.   // 返回新的 reducers 'counter/add'
  6.   model.reducers = keys.reduce((memo, key) => {
  7.     const reducerKey = `${namespace}${delimit}${key}`; // counter/add
  8.     memo[reducerKey] = reducers[key];
  9.     return memo;
  10.   }, {});
  12.   return model;
  13. }

model格式如下，最终把 reducers里面的 add，加上命名空间的前缀，’counter/add’; ‘counter/minus’

  1. // 每个 model模型都一个自己的命名空间，防止方法重名混乱
  2. app.model({
  3.   namespace: 'counter',
  4.   state: { number: 0 },
  5.   // 同步的方法
  6.   reducers: {
  7.     add(state, action) {
  8.       return { number: state.number + (action.payload || 10) }
  9.     },
  10.     minus(state) {
  11.       // state是之前的状态，return返回值是新状态 state
  12.       return { number: state.number - 2 }
  13.     }
  14.   }
  15. })

dva.js，中的model，添加命名空间前缀

  1. function model(model) {
  2.   app._models.push(model)
  3. }
  5. // 把 model，修改为
  6. function model(model) {
  7.   const prefixModel = prefixNamespace(model);
  8.   app._models.push(prefixModel)
  9.   // app._models = [{namespace: 'counter'}, {namespace: 'list'}]
  10. }

dva完整实现

dva/index.js

  1. /**
  2.  * @description 手写 dva原理，dva没有新的概念，整合了 redux，redux-saga
  3.  *
  4.  * dva有 3个核心方法
  5.  * .model()
  6.  * .router()
  7.  * .start()
  8.  *
  9.  * .use() 插件的用法
  10.  */
  12. import React from 'react'
  13. import ReactDOM from 'react-dom'
  15. // 合并 reducers
  16. import { combineReducers, createStore, applyMiddleware } from 'redux'
  17. import { Provider, connect } from 'react-redux'
  19. // createHashHistory
  20. import { createBrowserHistory } from 'history'
  22. // saga中间件，effects副作用
  23. import createSagaMiddleware from 'redux-saga'
  24. import * as sagaEffects from 'redux-saga/effects'
  26. export { connect }
  28. const history = createBrowserHistory()
  31. function dva() {
  32.   const app = {
  33.     model, // 添加模型的方法，方法处理器
  34.     router,
  35.     start,
  36.     _models: [], // 定义所有的模型
  37.     _router: null, // 存放路由定定义的函数
  38.   }
  40.   function model(model) {
  41.     app._models.push(model)
  42.   }
  44.   function router(routerConfig) {
  45.     // 路由配置
  46.     app._router = routerConfig
  47.   }
  49.   function start(containerId) {
  50.     // application实例，路由传入默认参数
  51.     const App = app._router({ ...app, history })
  53.     // 多个 app.model() 需要合并
  54.     const reducers = {} // app.models.reduce()
  55.     const { length } = app._models
  57.     for(let i=0; i < length; i++) {
  58.       const model = app._models[i]
  60.       // 每个model合并为一个 reducer，key是namespace的值，value是一个reducer函数
  61.       reducers[model.namespace] = function(state = model.state, action={}) {
  62.         // 获取 action动作类型 'counter/add'
  63.         const [namespace, type] = action.type.split('/')
  65.         // 当 action派发的动作的命名空间，和当前方法(reducer)的命名空间相同的时候
  66.         if (model.namespace === namespace) {
  67.           const reducer = model.reducers[type]
  68.           if (reducer) {
  69.             return reducer(state, action)
  70.           }
  71.         }
  72.         return state
  73.       }
  74.     }
  75.     /*
  76.     每一个 model模型都有namespace，都是状态树中的子属性，都有一个子的reducers
  77.     app.model({
  78.       namespace: 'counter',
  79.       state: { number: 0 }, 初始值
  80.       reducers: {
  81.         add(state, action) { // key: add, value: 函数
  82.           return { number: state.number + 10 }
  83.         }
  84.       }
  85.     }) */
  87.     // combineReducers合并的时候传入一个对象，key是合并后的属性名，value是处理函数
  88.     const rootReducer = combineReducers(reducers)
  89.     // 只有 reducers同步方法
  90.     // const store = createStore(rootReducer)
  92.     // 返回一个 saga中间件，处理异步方法
  93.     const sagaMiddleware = createSagaMiddleware()
  94.     const store = createStore(rootReducer, applyMiddleware(sagaMiddleware))
  96.     // 运行异步方法，rootSata执行 effect里面的异步方法
  97.     sagaMiddleware.run(rootSaga)
  98.     // eslint-disable-next-line require-yield
  99.     function* rootSaga() {
  100.       for (const model of app._models) {
  101.         const { effects = {}, namespace } = model
  102.         // key = asyncAdd
  103.         for(const key in effects) {
  104.           const attr = `${namespace}/${key}`
  106.           // takeEvery监听每一个动作，当动作发生的时候，执行对应的 saga
  107.           // eslint-disable-next-line no-loop-func
  108.           sagaEffects.takeEvery(attr, function* (action){
  109.             yield effects[key](action, sagaEffects)
  110.           })
  111.         }
  112.       }
  113.     }
  116.     // getElementById 报错？？？静态获取
  117.     ReactDOM.render(
  118.       <Provider store={store}>{ App }</Provider>,
  119.       document.querySelector(containerId)
  120.     )
  121.   }
  123.   return app
  124. }
  126. export default dva

dav/router

dva/router.js

  1. // export * from 'react-router-dom'
  2. // module.exports = require('react-router-dom')
  4. import { Router, Route, Link } from 'react-router-dom'
  5. export {
  6.   Router, Route, Link
  7. }