• 创建主页面index.tsx和数据存储model.ts

内置 dva
约定式的 model 组织方式，不用手动注册 model
文件名即 namespace，model 内如果没有声明 namespace，会以文件名作为 namespace
内置 dva-loading，直接 connect loading 字段使用即可
支持 immer，通过配置 immer 开启

约定式的 model 组织方式
    符合以下规则的文件会被认为是 model 文件，
    src/models 下的文件
    src/pages 下，子目录中 models 目录下的文件
    src/pages 下，所有 model.ts 文件

注意：model是以namespace来区分是哪个文件

• 在model.ts中提供数据

import { Effect, ImmerReducer, Reducer, Subscription } from 'umi';

interface UserModelType {
    namespace: 'usersData';//这里的命名空间就是展示页面得到数据的键
    state: {};
    effects: {
        getRemote: Effect;
    };
    reducers: {
        getList: Reducer
    };
    subscriptions: { setup: Subscription };
}

const UserModel: UserModelType = {
    namespace: 'usersData',//这里的命名空间就是展示页面得到数据的键

    state: {
        name: '',
    },
    //异步
    effects: {
        *getRemote({ }, { put }) {
            const data = [
                {
                    key: '1',
                    name: 'John Brown',
                    age: 32,
                    address: 'New York No. 1 Lake Park',
                    tags: ['nice', 'developer'],
                },
                {
                    key: '2',
                    name: 'Jim Green',
                    age: 42,
                    address: 'London No. 1 Lake Park',
                    tags: ['loser'],
                },
                {
                    key: '3',
                    name: 'Joe Black',
                    age: 32,
                    address: 'Sidney No. 1 Lake Park',
                    tags: ['cool', 'teacher'],
                },
            ];

            yield put({
                type: 'getList',//这个是将数据给reducers中哪个方法
                payload: data
            })
        },
    },
    //同步
    reducers: {
        getList(_state, action) {
            return action.payload;
        },
    },
    //订阅
    subscriptions: {
        setup({ dispatch, history }) {
            return history.listen(({ pathname }) => {
                if (pathname === '/') {//当前页面的路径
                    dispatch({
                        type: 'getRemote',//调用effects中的方法
                    })
                }
            });
        }
    }
};

export default UserModel;

• 主页面显示数据

import React from 'react'
import { connect } from 'umi';

import { Table, Tag, Space } from 'antd';

const index = ({ users }) => {
    const columns = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
            render: (text: string) => <a>{text}</a>,
        },
        {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: 'Address',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: 'Tags',
            key: 'tags',
            dataIndex: 'tags',
            render: (tags: string[]) => (
                <>
                    {tags.map(tag => {
                        let color = tag.length > 5 ? 'geekblue' : 'green';
                        if (tag === 'loser') {
                            color = 'volcano';
                        }
                        return (
                            <Tag color={color} key={tag}>
                                {tag.toUpperCase()}
                            </Tag>
                        );
                    })}
                </>
            ),
        },
        {
            title: 'Action',
            key: 'action',
            render: (text: any, record: any) => (
                <Space size="middle">
                    <a>Invite {record.name}</a>
                    <a>Delete</a>
                </Space>
            ),
        },
    ];


    return (
        <div className="list-table">
            <Table columns={columns} dataSource={users} />
        </div>
    )
}
/**
 * 这是从model中获取数据
 * @param param0 
 * @returns 
 */
const mapStateToProps = ({usersData}) => {
    return {
        users:usersData //这里的usersData就是model中的namespace
    }
}
/**
 *  mapStateToProps 简写
 */
/*
const mapStateToProps = ({ users }) => ({
    users
})
*/

export default connect(mapStateToProps)(index)

//最终简写
// export default connect(({ users }) => ({
//     users
// }))(index)

• 效果显示