该篇文章适宜的浏览人群：刚接手公司我的项目，技术栈为 react，状态治理间接用的 dva，然而不太理解 redux、redux-saga、react-redux 的人员，想要疾速上手业务开发，看这篇就对了！

1. Dva 是什么？

dva 首先是一个基于 redux 和 redux-saga 的数据流计划，而后为了简化开发体验，dva 还额定内置了 react-router 和 fetch，所以也能够了解为一个轻量级的利用框架。

2. 疾速上手开发？（保留用户信息为例）

• 定义 Model 文件用于全局的用户信息数据管理，如下代码：

// 引入接口办法用于在 effects 中编写所需的业务逻辑
import {queryCurrent} from '@/services/user'

// 实际上只是按规定定义一个配置对象
const UserModel = {
  // 以后 Model 的名称。整个利用的 State，由多个小的 Model 的 State 以 namespace 为 key 合成
  namespace: 'user',
  // 该 Model 以后的状态。数据保留在这里，间接决定了视图层的输入
  state: {currentUser: {}
  },
  // Action 处理器，解决异步动作，基于 Redux-saga 实现。Effect 指的是副作用。依据函数式编程，计算以外的操作都属于 Effect，典型的就是 I/O 操作、数据库读写。effects: {
    // Effect 是一个 Generator 函数，外部应用 yield 关键字，标识每一步的操作（不论是异步或同步）。*fetchCurrentUser({payload, callback}, {call, put}) {
      // 执行异步函数
      const response = yield call(queryCurrent)
      if(response.success) {const { user} = response
        if(callback) {callback(user)
        }
        // 收回一个 Action，相似于 dispatch
        yield put({
          type: 'saveCurrentUser',
          payload: user
        })
      }
    }
  },
  // Reducer 是 Action 处理器，用来解决同步操作，能够看做是 state 的计算器。它的作用是依据 Action，从上一个 State 算出以后 State。reducers: {saveCurrentUser(state, { payload = {} }) {
      return {
        ...state,
        currentUser: payload
      }
    }
  }

}

export default UserModel;

• 应用 connect 连贯上 Dva 并应用，如下代码：

import {connect} from 'dva'

const SetUserInfoComponent = props => {const { dispatch} = props

  // 1. 调用 dva 附加在组件 props 上的 dispatch 办法，发动一个 action
  // 2. action 是一个一般对象(plain object), 个别蕴含 type 字段和 payload 字段（当然也能够视状况不传 payload）dispatch({

    // 3. type 的值实际上相似一个寻址过程，编写规定即 namespace/reducerName|effectName

    // 4. dva 依据你的 namespace 去找到对应的 model，依据你的 reducerName|effectName 找到对应的 reducer 或者 effect

    // 5. 回到咱们这个例子即：找到 namespace 为 user 的 model，并触发一个名为 fetchCurrentUser 的 effect，payload 为空。// 留神：实际上第 5 点形容的就是这个对象的键值对，这就是 action，一个形容动作的一般对象。type: 'user/fetchCurrentUser'
  })
}

export default connect(({user}) => ({user}))(SetUserInfoComponent)

以下局部是具体阐明：connect是一个高阶函数，它接管一个 mapStateToProps 函数 (当然你也能够轻易叫它什么名字，无非这个名字比拟能说明它的作用), 返回一个接管组件的函数。该组件加强函数是一个一般函数，接管组件，返回加强后的组件。使得加强后的组件能够在外部通过props 拿到dva 中的 state、dva 提供的 dispatch 函数。

// connect 第一个形参函数，形容了须要从全局 state 映射到组件 props 上的指定局部状态，该函数返回了一个对象内含状态键值对
const mapStateToProps = ({user}) => ({user})

connect(mapStateToProps)(Component) => <EnhancedComponent {...props, user: GlobalState[user], dispatch: fn(){/* dispatch function code*/}}/>

// 咱们能够简略想一下 connect 的实现模式可能相似如下代码帮忙了解
const connect = mapStateToPropsFunc => MetaComponent => {const state = mapStateToPropsFunc(dva.GlobalState)

  return <MetaComponent dispatch={dva.dispatch} {...state}/>
}

实际上翻阅 Dva 源码能够晓得 connect 办法就是由 react-redux 提供的（源码看这里），Dva 做的工作就是引入导出 connect 便于咱们对立在 Dva 中调用，即所谓的技术收敛。

3. 整体开发流程？

1. 编写你的业务组件
2. 你意识到有些数据可能会跨组件应用
3. 你为其定义了一个 Model，申明了一个举世无双的 namespace
4. 你开始思考会波及到哪些同步异步的状态解决
5. 初始化 state，编写 effects、reducers（看下面例子的 model 局部！）
6. 回到你的业务组件并将其连贯到 dva 上（看下面例子的 connect 局部！）
7. 在适合的中央 dispatch 一个 action 执行相应的 reducer/effect（看下面例子的 dispatch 局部！）

4. 想要理解 Dva 源码？

请先浏览官网的这篇文章。

5. 更好的了解 Dva？

• 你须要相熟一下 redux 的架构
• 你须要了解 react-redux 的作用
• 思考一下 redux 负责同步状态的治理，那么该如何解决异步状态？
• 看一下 redux-thunk 的源码，并理解 redux 是怎么用中间件思维让状态治理反对异步
• redux-saga 解决了什么，它是如何解决异步状态的
• 整合形成了 dva 这一套状态治理的最佳实际，回过头来看看文档是不是很亲切了。