dva框架入门

dva 是基于redux最佳实践实现的 framework，简化使用 redux 和 redux-saga 时很多繁杂的操作。

一 基本概念

数据流向

数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State，所以在 dva 中，数据流向非常清晰简明，并且思路基本跟开源社区保持一致

image.png

Model

Subscription

Subscriptions 是一种从 源 获取数据的方法，它来自于 elm(见备注1)。
Subscription 语义是订阅，用于订阅一个数据源，然后根据条件 dispatch 需要的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。

subscriptions: {
  setup({ dispatch, history }) {
    history.listen(async ({ pathname }, action) => {
      const re =
        pathToRegexp('/group-member/list/:groupId').exec(pathname)
        ||
        pathToRegexp('/group-member/del/:groupId').exec(pathname)
      if (action !== 'POP' && re && re[1]) {
        const groupId = +re[1]
        dispatch({ type: 'initList' })
        dispatch({ type: 'fetchGroupMemberList', groupId })
      }
    })
  },
},

Effect

Effect 被称为副作用，在我们的应用中，最常见的就是异步操作。它来自于函数编程的概念，之所以叫副作用是因为它使得我们的函数变得不纯，同样的输入不一定获得同样的输出。
dva 为了控制副作用的操作，底层引入了redux-sagas做异步流程控制，由于采用了generator的相关概念，所以将异步转成同步写法，从而将effects转为纯函数。

effects: {
  * fetchGroupMemberList({ groupId }, { call, put }) {
    try {
      const { succeed, data: { role, member: