距离 dva@1 发布已经快整整一年，经过一段时间断断续续的开发，dva@2 终于能和大家见面了。

2.0 最主要的变化是提取了 dva-core，是仅封装了 redux 和 redux-saga 的纯数据流方案。这使得 dva 可以应用在除 react 之外的其他领域，比如 RN、小程序、游戏、vue 等领域；同时也可满足同一领域的多种实现，比如为 react 应用不同的路由方案的 dva-react-router-3 和 dva-no-router。(#530)

本次发布包含 dva-core 和 3 个 react 实现：

• dva@2.0：基于 react 和 react-router@4
• dva-react-router-3@1.0：基于 react 和 react-router@3
• dva-no-router@1.0：无路由版本，适用于多页面场景，可以和 next.js 组合使用
• dva-core@1.0：仅封装了 redux 和 redux-saga

此外，还有一些社区基于 dva-core 的实现：

• dva-wxapp，dva 应用于微信小程序

改进

dispatch(effectAction) => Proimse

为了方便在视图层 dispatch action 并处理回调，比如 #175，我们在 dispatch 里针对 effect 类型的 action 做了返回 Promise 的特殊处理。

例如：

dispatch({ type: 'count/addAsync' })
  .then(() => {
    console.log('done');
  });

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

react-router@4 的路由是组件式的，手动处理组件的按需加载并结合 model 和 app 有点麻烦，所有封装了 dva/dynamic util 方法。

const Users = dynamic({
  app,
  models: () => [
    import('./models/users'),
  ],
  component: () => import('./routes/Users'),
});

// render
<Route exact path="/users" component={Users} />

take 自动补全 namespace 前缀

注：之前手动加 namespace 的会收到一个 warning。

{
  namespace: 'count',
  effects: {
    *a(action, { take }) {
      // Before
      yield take('count/b');

      // After
      yield take('b');
    }
  }
}

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

例如：

yield put({ type: 'addDelay', payload: { amount: 2 } });
yield take('addDelay/@@end');
const count = yield select(state => state.count);
yield put({ type: 'addDelay', payload: { amount: count, delay: 0 } });

参考用例 dva/effects-test.js at d49e3567eaadf06d12c701e670b2ba3bbe043553 · dvajs/dva · GitHub 。

Break Changes

react-router@4

路由基于 react-router@4 实现，写法上会有不同。

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

// model.js
export default {
  namespace: 'count',
  reducers: {
    a() {},
  },
  effects: {
    *a() {},
  }
}

// 只会执行 effects.a 不会执行 reducers.a
dispatch({ type: 'count/a' });

删除 dva/mobile

之前的 dva/mobile 其实是无路由版的 dva，所以可以用 dva-no-router 代替。

history 的 location 属性上不再包含 query

这是 history 库的变动，有和 query 相关的请用 query-string 处理一遍。

FAQ

dva@1.0 用户如何升级？

原则上推荐升级到基于 react-router@4 的 dva@2，react-router@4 路由的去中心化带来的好处绝对值得一学，比如布局嵌套、Inclusive 路由、路由抽象等等。可以参考 user-dashboard 升级到 dva@2 的 commit 。

但肯定会有出于成本考虑，既想用 dva@2，又想继续用老版本的路由方案的，我们为大家准备了 dva-react-router-3。大家可以参考 dva-example-react-router-3 进行升级。而为了减少代码修改量，比如把所有的 import xx from 'dva' 改成 import xx from 'dva-react-router-3'，大家可以通过 babel-plugin-module-resolver 进行构建时替换：

["module-resolver", {
  "alias": {
    "dva": "dva-react-router-3"
  }
}]

（完）