新农村建设举报网站河北省建设环境备案网站

在 React 开发中，随着应用的复杂度增加，如何高效地管理应用状态成为了一个非常重要的问题。为了解决这一问题，很多开发者选择了 Redux，然而 Redux 的学习曲线较陡，且需要配置较多的样板代码。为此，Ant Design 团队基于 Redux 开发了 DVA（Data-View-Action），一个轻量级的、基于 Redux 和 redux-saga 的状态管理框架，旨在简化开发流程，提高开发效率。

DVA 的设计灵感来源于 Model-View-Action（MVA） 模式，与 React 的组件化思想类似。它把数据流、视图渲染、业务逻辑封装成一个个模型，每个模型包含了数据、操作和副作用。DVA 的核心概念包括以下几个部分：

DVA 的核心概念包括以下几个部分：

1. Model（模型） ：DVA 中的 Model 是一个用于管理业务数据的对象，包含了该模块的状态（state）、同步操作（reducers）、异步操作（effects）等。每个 Model 都是独立的，负责某一业务模块的状态和逻辑。
2. View（视图） ：通常是 React 组件，负责渲染用户界面，展示从 Model 获取的数据。
3. Action（动作） ：Action 通过 dispatch 触发，向 Model 发送指令以更新状态。
4. Effect（副作用） ：处理副作用逻辑，通常用来做异步操作，如 API 请求、定时任务等，DVA 内置了 redux-saga 来处理副作用。

DVA 是建立在 Redux 的基础上的，因此它的工作原理与 Redux 类似，具有以下几个关键步骤：

1. 初始化：DVA 会初始化一个 Redux store，使用 dispatch 派发 action 来更新应用的状态。
2. Model 管理：每个 Model 包含 state（应用的状态）、reducers（同步操作）和 effects（异步操作）。当 dispatch 被触发时，DVA 会调用相应的 reducer 或 effect。
3. 异步处理（redux-saga） ：DVA 使用 redux-saga 来处理异步操作。在 effects 中，开发者可以通过 yield 来触发异步操作（例如，发起 API 请求），并通过 put 来触发 action，从而更新 state。
4. 视图更新：在 React 组件中，通过 connect 或 useSelector 获取 state，并将 state 渲染到视图中。任何 state 的更新都会导致视图的重新渲染。

为什么要使用Dva?

大家应该都能理解 redux 的概念，并认可这种数据流的控制可以让应用更可控，以及让逻辑更清晰。但随之而来通常会有这样的疑问：概念太多，并且 reducer, saga, action 都是分离的（分文件）。

这带来的问题是：

• 编辑成本高，需要在 reducer, saga, action 之间来回切换
• 不便于组织业务模型 (或者叫 domain model) 。比如我们写了一个 userlist 之后，要写一个 productlist，需要复制很多文件。

还有一些其他的：

• saga 书写太复杂，每监听一个 action 都需要走 fork -> watcher -> worker 的流程
• entry 书写麻烦
• ...

而 dva 正是用于解决这些问题。

什么时候需要使用 dva?

在 react hooks 上线之后。在 Umi 项目中，我们建议轻量的使用 dva。仅仅在以下几种场景下推荐使用 dva：

1. 父子组件之间的数据互通
2. 多页面之间的数据传递（即，公共数据）
3. 非 react 组件的场景

Dva使用方式

要开始使用 DVA，我们首先需要安装它：

npm install dva

当你使用Umi时会内置dva只需要安装插件和配置即可，以全局state为例

// global.ts
import { cloneDeep } from 'lodash'
...interface userInfo {avatar: string; // 头像avatarStatus: string | number; // 头像审核状态。1 正常，2 审核中avatarPending: string; // 正在审核中的头像gender: number;       // 姓名 未知countryCode: ''; // 国家地区代码countryName: ''; // 地区名字uid: number;// 用户iduuid: string; // 用户uuid
}
const defaultUserInfo: userInfo = {avatar: '',       // 头像avatarStatus: '', // 头像状态。1 正常，2 审核中avatarPending: '', // 正在审核中的头像gender: -1,       // 姓名 未知countryCode: '', // 国家地区代码countryName: '', // 地区名字uid: 0, // 用户iduuid: '', // 用户uuid
}const GlobalStore = {namespace: 'global',state:{userInfo: cloneDeep(defaultUserInfo),},effects:{// 获取用户信息* getUserInfo ({ callback, errorCallback }, { call, put }) {const res: userInfo = yield call(getUserInfo)if (!res.code) {yield put({type: 'setData',payload: {accessToken: '',userInfo: defaultUserInfo,isLogin: false,},})if (typeof errorCallback === 'function') {errorCallback()}window.location.href = '/'return}...if (typeof callback === 'function') {callback(res.data)}},},reducers:{setData(state,{payload}){return {...state,...payload,}}}
}

在组件中使用

import { connect, FormattedMessage, useIntl } from 'umi'
...const NavBar = (props)=>{const {global,dispatch} = propsconst { userInfo } = globalconst getUserProfile = (uuid?: string) => {if (!uuid) {return}dispatch({type: 'userInfo/getUserInfo',payload: {visible: true,uuid,},})}...
}...export default connect((state) =>({global:state.global
}))(NavBar )