model
import {routerRedux} from 'dva/router'
//routerRedux实现在effcts中路由跳转
export default {
namespace:"user",
state:{
userInfo:{
name:"name0",
age:"0"
}
},
subscription:{},
effects:{
* getUserInfo({payload},{call,put}){
debugger;
yield put({
type:"changeState",
payload:{
userInfo:{
name:"name1",
age:"1"
}
}
})
},
* changeRouter({payload},{call,put}){
yield put({
type:"changeState",
payload:{
userInfo:{
name:"name1",
age:"1"
}
}
})
}
},
reducers:{
changeState(state,action){
return {...state,...action.payload}
}
}
}
使用model与view关联
import React from 'react'
import {Button} from 'antd'
import {useDispatch,useSelector} from 'dva'
let Login = ({props})=>{
let userInfo = useSelector(state => state.user.userInfo);
let dispatch = useDispatch();
let changeUserInfo = () => {
dispatch(
{
type:"user/getUserInfo",
payload:{
}
}
)
}
return (<div>
<Button onClick={changeUserInfo}>修改用户信息</Button>
<p>
登录
{userInfo.name}
{userInfo.age}
</p>
</div>)
}
export default Login;
model与view关联方式
1 注解connect (@connect)
function mapStateToProps(state) {
return { userInfos: state.userInfos};
}
2 react-hooks
let dispatch = userDispatch(),
let userInfo = userSelect(state => state.modeNamespace.info)
dispatch({
type: 'user/getUserInfo', // 如果在 model 外调用,需要添加 namespace
payload: {}, // 需要传递的信息
});