react+dva+antd -- 创建一个新页面需要做以下步骤dva-example-user-dashboard

 创建一个新页面需要做以下步骤

        1. 在/src/models/中以模块名(小写)建立一个model  注册model及命名空间

export default {namespace: 'users',state: {},reducers: {},effects: {},//监听, 当进入这一页的时候subscriptions: {},
};

        2.在src/router.js添加一个路由  注册路由

{path: '/deal',name: 'DealPage',getComponent(nextState, cb) {require.ensure([], (require) => {//  registerModel(app, require('./models/deal'));  //获得模块cb(null, require('./routes/Deal'));});},},

        3.在src/routes/文件加中建立一个页面, 注意这里需要connect ,    与导航栏等拼和

import React from 'react';
import { connect } from 'dva';
import styles from './Users.css';
import UsersComponent from '../components/Users/Users';			//在这里引入User组件
import MainLayout from '../components/MainLayout/MainLayout';	
//引入布局组件, 布局中会组合头部导航栏和这个children组件, 加起来就是完整的一个User页了function Users({ location }) {return (<MainLayout location={location}><div className={styles.normal}><UsersComponent /></div></MainLayout>);
}export default connect()(Users);
//这里导出, 交给路由页

        4.在src/components/下建立一个一模块命名(大写字母开头)的文件夹  构建UI组件

            在文件夹中添加模块UI部分,  模块UI.js + 模块UI.css

function Users({ dispatch, list: dataSource, loading, total, page: current }) {//在这里分发这个组件的点击事件function deleteHandler(id) {dispatch({type: 'users/remove',payload: id,});}/*** 数据信息 / antd 内容*/const columns = [{title: 'Name',dataIndex: 'name',key: 'name',render: text => <a href="">{text}</a>,}];return (  //返回组件UI部分<div className={styles.normal}></div>);
}

        如果需要想组件中传递数据, 则需要mapStateToProps(state)函数, 这里的Users是一个命名空间

function mapStateToProps(state) {const { list, total, page } = state.users;  //获取大的state树中的usersreturn {loading: state.loading.models.users,list,total,page,};
}

使用类继承方式, 并且再此与model绑定

export default connect(mapStateToProps)(Users);