dva的用法_dva入门讲解

这里有一份简洁的前端知识体系等待你查收，看看吧，会有惊喜哦~如果觉得不错，恳求star哈~

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官方的代码示例图吧：