ant design pro dva model 使用示例

最新推荐文章于 2025-05-20 14:57:27 发布

琴岛橙子

最新推荐文章于 2025-05-20 14:57:27 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lvzhyt/article/details/108625654

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