类式组件:
import React from "react";
import {Component} from 'react';
import { connect } from "dva"; //从dva中导入connect
import {Button} from "antd";
class Counter extends Component {
constructor(props){
super(props)
}
//做dispatch分发的方法,相当于做一个请求
add = ()=>{
const {num,dispatch} = this.props;
let param = 2 + num; //在原有的数据上加2
dispatch({
type: 'example/addByOne', //这里的example是model的命名空间,"/"后面的表示model中effect的异步方法名
param:param //这个表示要传递参数,当然这里可以是一个方法,作为回调方法
});
}
render (){
return (
<div>
<div>
<Button onclick={this.add()}>增加</Button>
</div>
<p> this.props.example.num</p> //如这里就获取到了model定义的num数据了
</div>
)
}
}
const mapStateToProps = (state) =>{
return {
example:state.example, //这里的example表示后面用this.props.example获取state(根节点)中exmpale命名空间(model的example.js中的state所有数据)的数据
}
}
export default connect (mapStateToProps)(Counter) //通过这种方式来把model层的数据传递到当前组件了
函数式组件:
import {useSelector,useDispatch} from 'dva'
const dispatch=useDispatch();
const value=useSelector((state)=>state.namespace.value);
//直接使用dispatch和value