ant design pro dva model 使用示例

本文介绍AntDesign Pro项目中模型(Model)的创建与使用流程,涵盖从项目搭建到模型定义、状态管理、界面渲染的全过程,适合初学者快速上手。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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对象 如何生成的?

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值