ant design pro dva model 使用示例
创建项目 参考:https://pro.ant.design/docs/getting-started-cn
yarn create umi 选择 ant-design-pro: npm install npm start
可以使用 yarn
新建文件 pages>DemoPage>
model.ts
import { Reducer, Effect } from 'umi';
import { ConnectState } from '@/models/connect';
export interface DemoModelState{
count?: number;
}
export interface DemoConnectSate extends ConnectState{
demo: DemoModelState
}
export interface DemoModelType {
namespace: 'demo';
state: DemoModelState;
effects: {
add: Effect;
},
reducers: {
changeCount: Reducer<DemoModelState>;
}
}
const DemoModel:DemoModelType = {
namespace: 'demo',
state: {
count: 0,
},
effects: {
*add({payload},{put}){
console.log('>>>>effects add param',payload);
const count = payload.count||0;
const data = {count: count+1};
yield put({
type: 'changeCount',
payload: data
})
}
},
reducers: {
changeCount(state, { payload }) {
console.log('>>>>reducers changeCount.');
const data = {
...state,
...payload,
}
return data;
},
}
}
export default DemoModel;
index.tsx
import React from 'react';
import { connect, Dispatch} from 'umi';
import {Button} from 'antd';
import { DemoConnectSate } from './model';
export interface DemoModelPro{
dispatch: Dispatch;
count?: number;
addLoading?: boolean;
}
const DemoPage: React.FC<DemoModelPro> = (props) =>{
console.log('>>>> props',props)
const {count=0} = props;
const {addLoading = false} = props
const handleAddClick = () =>{
console.log('>>>>handleAddClick')
const {dispatch} = props;
dispatch({
type: 'demo/add',
payload: {count}
})
}
return (
<div>
<p>This is a DemoPage</p>
<div>Count: {count}</div>
<div>
<Button loading={addLoading} onClick={handleAddClick}>Add</Button>
</div>
</div>
)
}
const conFun = (model:DemoConnectSate) =>{
console.log('>>>> connect Fun',model);
// namspace为demo, loading 状态
const {demo,loading} = model;
const data = {
count: demo.count,
addLoading: loading.effects['demo/add']
}
return data;
}
export default connect(
conFun
)(DemoPage);
config.ts 中添加路由
{
name: 'demo',
icon: 'smile',
path: '/demoPage',
component: './DemoPage',
},
初始化时调用 connect 连接后刷新 props
点击Button后调用顺序
handleAddClick通过dispatch分发事件触发demo/add 即namespace为demo的 effects add方法
effects 处理完成获取数据及处理逻辑后 put changeCount 触发 reducers 的changeCount 修改state数据,后完成界面渲染。
handleClick-- dispatch (demo/add)==> effects demo/add put changeCount ==> reducers changeCount state ==> props ==> UI渲染
===================================================
示例 user>login>index.tsx 中
{ login, loading }: ConnectState 从连接对象中解析出 namespace='login'的对象,loading状态
语法: const {login} = conSate ====> const login = conState.login 的简写
匿名函数:const funA = (param) =>({data})
等同于 const funA = (param) =>{return {data}} 即只有return时可以不用写return 用()
export default connect(({ login, loading }: ConnectState) => ({ userLogin: login, submitting: loading.effects['login/login'], }))(Login);
Q? connect对象 如何生成的?