规范写代码 - DVA怎么连model

1.关系图

2.model结构

3.例子

model页面

import {Reducer,Effect,Subscription} from "umi"

interface UserModelType {
  namespace: 'users', // 命名空间
  state: {}, // 初始状态
  reducers: { // 与page页面建立联系，所以要return
    getList: Reducer
  },
  effects: { // 异步操作，返给reducers
    getRemote: Effect
  },
  subscriptions: { // 订阅
    setup: Subscription
  }
}

const UserModel: UserModelType = {
  namespace: 'users',
  state: {},
  reducers: {
    getList(state,{type,payload}) { // payload指更新完的state
      return payload
    }
  },
  effects: {
    *getRemote({type,payload},{put,call}) {
      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',
        payload: data
      })
    }
  },
  subscriptions: {
    setup({dispatch,history}) {
        history.listen((location,action) => {
          if (location.pathname == '/users') {
            dispatch({
              type: 'getRemote' // effects中的方法名字
            });
          }
        })
    }
  },
}

export default  UserModel;

page页面

import React,{Component} from 'react';
import { Table, Tag, Space } from 'antd';
import { connect } from "umi"

// 连接models
@connect(state => ({
  users: state.users  // 这个users是命名空间
}))


export default class UserPage extends Component{

  componentDidMount() {
    console.log(this.props.users);
  }

  render() {
    const data = this.props.users

    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        render: text => <a>{text}</a>,
      },
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
      },
      {
        title: 'Tags',
        key: 'tags',
        dataIndex: 'tags',
        render: tags => (
          <>
            {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, record) => (
          <Space size="middle">
            <a>Invite {record.name}</a>
            <a>Delete</a>
          </Space>
        ),
      },
    ];

    return (
      
      <div>
        <Table columns={columns} dataSource={data} />
      </div>
    );
  }


}