标签：name tags namespace js 获取数据 effects key model users

• 创建主页面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)

• 效果显示

标签：name,tags,namespace,js,获取数据,effects,key,model,users
来源： https://blog.csdn.net/huangxiaoguo1/article/details/114889677

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。