dva入门讲解

dva是什么？

DVA 是基于 redux、redux-saga 和 react-router 的轻量级前端框架及最佳实践沉淀。

理解dva跟其余技术实现的对应关系，有利于深刻理解dva。

为何要用dva？

平常react开发过程当中，咱们常常会遇到如下场景：

• 咱们但愿有安全的数据共享机制
• 咱们但愿数据逻辑跟视图逻辑分离，既有利于提升代码健壮性，也易于调试。
• 咱们但愿异步请求数据，并改变视图。

这些需求，dva都知足了：

• 经过把状态上提到 dva model 中，咱们把数据逻辑从页面中抽离出来。
• 经过 effect 优雅地处理数据生成过程当中的反作用，反作用中最多见的就是异步逻辑。
• dva model 中的数据能够注入给任意组件。

如何使用dva？

为何使用dva，而不选择redux，最重要的缘由是dva用法简单，能够下降团队成员的学习成本。

相比redux，dva真的能够算很是简单，咱们来看看基本概念。

model

其中，model 是 DVA 中最重要的概念，基本的属性以下：

• namespace：model 的命名空间，只能用字符串。一个大型应用可能包含多个 model，经过namespace区分。
• state：当前 model 状态的初始值，表示当前状态。
• reducers：用于处理同步操做，能够修改 state，由 action 触发。
• effects：用于处理异步操做（例如：与服务端交互）和业务逻辑，也是由 action 触发。可是，它不能够修改 state，要经过触发 action 调用 reducer 实现对 state 的间接操做。
• action：是 reducers 及 effects 的触发器

connect

熟悉react开发的你，应该知道状态控制一直是react的一个难点。

咱们能够把子组件的 state 能够上提，由父组件来管理：

• 子组件间接回调到父组件的 setState 的方法来改变父组件的 state；
• 新的 state 经过 props 的形式把再次被子组件获悉。

固然，dva给了咱们另外一种可能，就是把state上提到全部React子组件之上，过程相似：

• 页面经过调用 dispatch 函数来驱动 dva model state 的改变；
• 改变后的 dva model state经过 connect 方法注入页面。

要达到上述效果，咱们就必须想办法将React跟dva这两个平行世界关联起来，connect 粉墨登场。connect是链接dva跟React的关键，必定要重点理解。

dva中的connect ，采用的是装饰器的写法，所谓装饰器，就是给装饰对象赋予它原本不具有的能力。connect的存在，就是为了让组件获取两样东西：model中的数据，驱动model改变的方法。

connect 接收两个参数，作的就是这两件事：

• mapStateToProps：获取model中的数据
• mapDispatchToProps：驱动model改变的方法

其中，mapStateToProps 字面含义就是把dva model中的state经过组件的props注入给组件。

而mapDispatchToProps 字面含义就是将dispatch方法经过组件的props注入给组件。使用mapDispatchToProps跟dispatch向组件注入方法，组件使用这些方法能给dva model发送消息。

dispatch

这里就不得不提下dispatch，dispatch 函数就是和 dva model 打交道的惟一途径。 dispatch 函数接受一个 对象 做为入参，在概念上咱们称它为 action，惟一强制要包含的是 type 字段，string 类型，用来告诉 dva 咱们想要干什么。

action

终于轮到action上台了。咱们把想作的事情经过 action 描述出来，并经过 dispatch 告诉 dva model，而对这个消息的处理就是 dva 的事情了。

reducer

咱们经过dispatch派发了action，如今问题来了，dva如何识别并执行action呢？

这就是reducer要作的事情。

dva model 中能够定义一个叫作 reducers 的成员用来响应 action 并修改 state。每个 reducer 都是一个 function，action 派发后，经过 action.type 被惟一地匹配到，随后执行函数体逻辑，返回值被 dva 使用做为新的 state。state 的改变随后会被 connect 注入到组件中，触发视图改变。

咱们再回过头来看上文提到的model基本属性：

• namespace：model 的命名空间，只能用字符串。一个大型应用可能包含多个 model，经过namespace区分。
• state：当前 model 状态的初始值，表示当前状态。
• reducers：用于处理同步操做，能够修改 state，由 action 触发。
• effects：用于处理异步操做（例如：与服务端交互）和业务逻辑，也是由 action 触发。可是，它不能够修改 state，要经过触发 action 调用 reducer 实现对 state 的间接操做。
• action：是 reducers 及 effects 的触发器

dva的用法，其实都是围绕着这些基本属性展开，本人但愿读者能够加深对这些属性的理解。

最后，上一张dva官方的代码示例图吧：