antd pro dva使用总结

1、在config/router.config.js配置自己要写的页面的路由，如果路由隐藏不显示在导航栏，设置hideInMenu为true 即可

2、在page文件夹下面新建test文件夹及里面的models文件夹

3、list.js中引入dva及connect

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Table, Card, Button } from 'antd';

@connect(({ user, list, loading }) => ({
  currentUser: user.currentUser,
  list
}))

class list extends PureComponent {
    constructor(props) {
        super(props);
        this.pageInfo = {
            showQuickJumper: true,
            showTotal(totalSize){
                return <div>符合条件共 <a style={{fontWeight: 'bold'}}>{totalSize}</a> 条</div>;
            }
        };
    }
    render(){
        const {
            list: { tableData, current, pageSize, totalSize },
        } = this.props;
        return(<Table columns={this.columns}
                        bordered
                        dataSource={tableData}
                        pagination={{ ...this.pageInfo, current: current, pageSize, total: totalSize }}
                        // loading={loading}
                        onChange={this.handleTableChange.bind(this)}/>
            );
    }
    componentDidMount() {
        this.getTableData();
    }
    getTableData(){
        const { dispatch } = this.props;
        //dispatch action models命名空间为list的下的getTableData
        dispatch({
            type: 'list/getTableData',
        });
    }

    handleTableChange(){

    }
    get columns(){
        return [
            {
              title: 'test',
              dataIndex: 'name',
            }
        ]
    }
}   
export default list;

modes/list.js内容如下：

import { tableurl } from '@/services/api';

export default {
  	namespace: 'list',

  	state: {
		tableData: [{test: '测试'}],
		totalSize: 40,
		current: 1,
		pageSize: 20
	
  	},

  	effects: {
		*fetch({ payload }, { call, put }) {
		  	const response = yield call(queryRule, payload);
			yield put({
				type: 'save',
				payload: response,
			});
		},
		*getTableData({ payload, callback }, { call, put }) {
			const response = yield call(tableurl, payload);
			yield put({
				type: 'setTableData',
				payload: response,
			});
			if (callback) callback();
		}
	},

	reducers: {
        //获取数据后更新state值
		setTableData(state, action) {
			console.log('data')
			return {
				...state,
				data: action.payload,
			};
		},
	},
};

4、service下新增接口tableurl：

5、mock数据：在mock文件夹下新建文件或者在api中新增对应接口，如下图