React中的状态管理Dva总结
在 React 开发中，随着应用的复杂度增加，如何高效地管理应用状态成为了一个非常重要的问题。为了解决这一问题，很多开发者选择了 Redux，然而 Redux 的学习曲线较陡，且需要配置较多的样板代码。为此，Ant Design 团队基于 Redux 开发了 DVA（Data-View-Action），一个轻量级的、基于 Redux 和 redux-saga 的状态管理框架，旨在简化开发流程，提高开发效率。
DVA 的设计灵感来源于 Model-View-Action（MVA） 模式，与 React 的组件化思想类似。它把数据流、视图渲染、业务逻辑封装成一个个模型，每个模型包含了数据、操作和副作用。DVA 的核心概念包括以下几个部分：
DVA 的核心概念包括以下几个部分：
- Model（模型） ：DVA 中的 Model 是一个用于管理业务数据的对象，包含了该模块的状态（
state）、同步操作（reducers）、异步操作（effects）等。每个 Model 都是独立的，负责某一业务模块的状态和逻辑。 - View（视图） ：通常是 React 组件，负责渲染用户界面，展示从 Model 获取的数据。
- Action（动作） ：Action 通过
dispatch触发，向 Model 发送指令以更新状态。 - Effect（副作用） ：处理副作用逻辑，通常用来做异步操作，如 API 请求、定时任务等，DVA 内置了
redux-saga来处理副作用。
DVA 是建立在 Redux 的基础上的，因此它的工作原理与 Redux 类似，具有以下几个关键步骤：
- 初始化：DVA 会初始化一个 Redux store，使用
dispatch派发 action 来更新应用的状态。 - Model 管理：每个 Model 包含
state（应用的状态）、reducers（同步操作）和effects（异步操作）。当dispatch被触发时，DVA 会调用相应的reducer或effect。 - 异步处理（redux-saga） ：DVA 使用
redux-saga来处理异步操作。在effects中，开发者可以通过yield来触发异步操作（例如，发起 API 请求），并通过put来触发 action，从而更新 state。 - 视图更新：在 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：
- 父子组件之间的数据互通
- 多页面之间的数据传递（即，公共数据）
- 非 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 )