前端技术 | dva，美貌与智慧并存

通过前面四篇的铺垫，终于轮到咱们的主角dva了，就是下面这个美女：

先擦一擦哈喇子，咱们来介绍一下，dva出自于暴雪出品的一款游戏《守望先锋》，援引官方的角色介绍：

D.Va拥有一部强大的机甲，它具备两台全自动的近距离聚变机炮、可使机甲飞跃敌人或障碍物的推动器、 还有能够抵御来自正面的远程攻击的防护矩阵。

而后呢，蚂蚁金服的一位架构师sorrycc很迷这位美女，正巧刚开发了一款前端框架没有名字，做为一个向女神献礼的项目，dva框架就此诞生。

实际上，dva只是基于现有开源框架的一层轻量封装，并无引入任何新概念：

• React：管理View
• react-router：管理路由
• Redux：管理Model
• redux-saga：管理异步调用（反作用）

再来看一下框架图，是否是都是熟悉的配方，熟悉的味道？

固然，也不是彻底没有新东西，其中有一个Subscription好像以前没有见过，这是一种数据源订阅机制，数据源能够是键盘输入事件、路由变化、服务器的 websocket 链接等等。你能够在数据发生变化时收到通知，并派发必要的action。

实际上，dva是一个整合者，它的目标是解决“Code is everywhere”问题。当咱们同时使用上面这些框架时，通常会呈现下面这种类型的文件结构：

+ src
  + sagas
    - user.js
  + reducers
    - user.js
  + actions
    - user.js
复制代码

而后，当咱们须要实现一个功能时，就须要在这几个文件之间来回切换。。。

另外一方面，dva还试图隐藏一些常常重复书写的routine代码，让开发者可以更加专一于业务逻辑。好比咱们写一个应用的入口文件，须要作下面这么多事情：

• 配置middleware
• 建立store
• 添加<Provider>绑定
• 建立watcher saga和root saga
• 启动saga
• 。。。

实际上，可能95%以上的项目中这些代码都是如出一辙的，咱们不须要每次都花费时间来从新写一遍这些代码。

下面开始正式介绍dva 1.0相关的内容，dva 2.0作了一些优化升级，后面专门有一节介绍具体变化。

8个概念

其实基本都是前面几篇文章里介绍过的概念：

• state：也就是全局惟一的Store
• action：即Redux中的action
• model：这是dva抽象出来的一个概念，为了把下面这些东西放到一个统一的文件里
  • reducer：即Redux中的reducer
  • effect：即redux-saga中的worker saga
  • subscription：前面介绍过，用于订阅数据源
• router：即react-router中的<Router>
  • route：即react-router中的<Route/>

最终写出来的model.js会相似下面这个样子，能够发现全部相关代码都放到一块儿了，不须要在多个文件之间来回切换了（这里的namespace就是之前Redux中的reducer的名字）：

export default {
  namespace: 'transactions',
  state: {
    txs: []
  },
  subscriptions: {
    setup({ dispatch, history }) {
      history.listen(location => {
        if (location.pathname === '/transactions/list') {
          dispatch({type: 'fetch'});
        }
      });
    },
  },
  effects: {
    *fetch({ payload }, {call, select, put}) {
      const { result } = yield call(apis.fetchTxs)
      yield put({type:'addTx', payload: result})
    },
  },
  reducers: {
    addTx(state, { payload }) {
      return { ...state, txs: payload };
    },
  },
}
复制代码

7个API

dva只有7个API，因此上手基本上没有什么难度：

• app = dva(opts)：建立dva对象
• app.use(hooks)：使用插件（后面介绍）
• app.model(model)：注册model
• app.unmodel(namespace)：取消model注册
• app.replaceModel(model)：替换model
• app.router(({ history, app }) => RouterConfig)：配置路由
• app.start(selector?)：启动应用（参数是根组件id）

下面这个连接展现了5步建立单页应用的例子：github.com/sorrycc/blo…

4大模块

这个主要是从代码结构上来划分的，通常分为下面4类模块：

• service：执行异步任务的API
• model：包含effect, reducer, subscription
• component：无状态组件
  • 发送action触发状态更新
  • action = 'namespace/effect'或者'namespace/reducer'
• route：各类container（这个名字取得不太好）
  • 经过connect()链接到model

另外，因为dva 1.0使用的是react-router v3，因此最外层还有一个router.js用于配置静态路由。因此通常的目录结构以下所示：

+ src/
  + services/
    - users.js
  + models/
    - users.js
  + components/
    + users/
      - users.js
      - users.css
  + routes/
    - users.js
  - router.js
复制代码

dva 2.0中采用了react-router v4，就不须要router.js了。另外，如今官方推荐搭配使用umi（乌米，sorrycc最新的开源项目），能够自动帮你注册model、根据目录结构生成路由配置，目录结构会变成下面这个样子：

+ src/
  + models/
    - global.js
  + pages/
    + users/
      + index.js
      + services
        - users.js
      + models/
        - users.js
  + components/
    + users/
      - users.js
      - users.css
复制代码

能够发现，把route以及相关联的model都放到pages目录中了，能够达到减小耦合，一删全删的功能。

插件（Plugin）

前面提到过一个API能够注册“插件”，所谓插件就是一些生命周期“钩子（hooks）”，能够在事件发生时作一些额外处理。包括下面这些类型的钩子：

• onError
• onStateChange
• onAction
• onHmr：热替换（Hot Module Replacement）
• onReducer：reducer被调用
• onEffect：effect被调用
• extraReducers：额外的reducer被调用（好比搭配合redux-form）
• extraEnhancers：额外的store enhancer被调用（好比搭配redux-persist）

一个比较典型的例子是页面加载数据时转圈圈，加载完毕后隐藏，这是一个不少地方都须要用到的场景。官方提供了一个dva-loading插件，能够自动在异步请求数据时把loading设置为true，得到数据后把loading设置为false。这样你就能够在组件中绑定loading实现转圈圈的自动控制了：

// index.js
import createLoading from 'dva-loading';
app.use(createLoading());

// components
function mapStateToProps(state) {
  const { list, total, page } = state.users;
  return {
    loading: state.loading.models.users,
    list,
    total,
    page,
  };
}
复制代码

和redux+saga的对应关系

虽然dva只是一层轻量级封装，可是作了一些特殊的命名约定，刚开始写代码的时候会有点迷糊，搞不清楚跟以前直接使用redux+saga的时候的对应关系，这里也帮你们梳理一下。

直接使用redux+saga的流程以下所示：

• component发送请求action
• saga调用service，而后put一个结果action
• reducer从action中获取type和payload，修改state（可使用combinedReducer，会依次遍历）
• component在mapStateToProps()中经过state.<reducer名字>获取更新

使用dva时的流程以下所示：（触发effect为例）

• component发送请求action，type约定为namespace/effect
• effect调用service，而后put一个结果action，type约定为namespace/reducer（同一个model中能够省略namespace）
• reducer从action中获取type和payload，修改state（每一个reducer只处理一种类型的action，type约定为reducer的名字）
• component在mapStateToProps()中经过state.<namespace>获取更新

dva2.0的变更

目前dva已经进化到2.0版本，除了采用了react-router v4之外，还有一些细节上的变更：

• dispatch一个effect 类型的action时返回一个Promise，方便视图层回调

• 新增 dynamic 接口，配合 react-router@4 处理组件的按需加载

• take 自动补全 namespace 前缀

• effect 先后会额外触发 /@@start 和 /@@end 的 action，可利用此约定实现 put 的同步执行

• 同名 reducer 和 effect 不会 fallthrough（即二者都执行），而是仅执行 effect

具体细节能够参见：github.com/sorrycc/blo…

今天就说到这里，老规矩，上一张思惟导图结束本篇文章：

参考：

dvajs.com/guide

github.com/dvajs/dva/i…

www.github.com/sorrycc/blo…

github.com/sorrycc/blo…

github.com/sorrycc/blo…

juejin.im/post/5b93c0…

github.com/sorrycc/blo…

segmentfault.com/a/119000001…