目录
前言
一、dva是什么？
二、使用步骤
1.新建项目
2.使用dva
3.使用connect
总结
前言
最近在项目中接触了umi框架，当然使用的前提是熟悉react和router。而dva我感觉像是redux和react-router的结合。下面讲一下我在项目中的实际使用。
提示：以下是本篇文章正文内容，下面案例可供参考
一、dva是什么？
我个人感觉dva和redux非常相似是一个管理状态的工具。快速上手 | DvaJS
官网介绍：
dva
首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，
dva
还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架
二、使用步骤
1.新建项目
$ yarn create @umijs/umi-app 或 npx @umijs/create-umi-app
具体各个文件是什么意思大家可以去看umi的官网，这里就长话短说。
2.使用dva
dva最重要的就是要有model文件，下面是umi内置的dva：
这里借用一下其他博主的图，我感觉非常的形象：
我的理解：model其实就是一个函数：
里面包括namespace，state,reducers,effects,subscriptions。
export default {
//namespace命名空间，相当于给model取个名字，但是各个model的namespce是不能重复的
namespace: 'test',
//state我理解为是数据仓库，就是存数据的地方，model里的数据都是存放在这里的
state : {
name: 'wang'
},
/*reducers把数据存到仓库（存到state）里的唯一方法，我们修改state里的数据不能直接像this.name='liu'这样去修改，而必须通过调用reducers里的方法，在之后会详细讲到*/
reducers:{
},
/*异步方法，简单来说我们的异步请求就写在这里*/
effects: {
},
/*订阅，在这里我的理解就是监听页面的，比如监听到进入了某某页面就让它执行相关代码之类的*/
subscriptions: {
}
}
model文件的内容结构大概就是这样：
1.namespace是命名空间，基本和你的ts文件名保持一致。比如：
2.state就不用介绍了，是你希望保存和修改并且可以传递到其他组件的全局状态。
3.reducers的结构：save函数接收两个参数分别是state和action，返回一个新的state。
//格式如下
reducers: {
save(state, action) {
return {
...state,
...action.payload,
};
},
4.effects：异步的方法，我们的网络请求都写在这里，也可以写数据筛选之类的方法。需要注意的就是yield call和yield put的使用。
这里的put()其实就是调用的我们之前写的reducers里的save方法，在effects拿到数据后通过yield put调用reducers的save方法来改变state。
3.使用connect
写完model和component后，将使用connect将他们串联起来。
dva 提供了 connect 方法。如果你熟悉 redux，这个 connect 就是 react-redux 的 connect 。
import React from 'react';
import { connect } from 'dva';
import ProductList from '../components/ProductList';
const Products = ({ dispatch, products }) => {
function handleDelete(id) {
dispatch({
type: 'products/delete',
payload: id,
});
}
return (
<div>
<h2>List of Products</h2>
<ProductList onDelete={handleDelete} products={products} />
</div>
);
};
// export default Products;
export default connect(({ products }) => ({
products,
}))(Products);
connect接收四个参数:mapStateToProps允许我们将 store 中的数据作为 props 绑定到组件上。
mapDispatchToProps将action作为props绑定到组件上。
mergeProps和options基本不传，我们只要掌握前两个就好了
总结
我其实也是第一次接触umi和dva，肯定理解没那么深，大概使用就是这样子。