建立一個新頁面需要做以下步驟

        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樹中的users
  return {
    loading: state.loading.models.users,
    list,
    total,
    page,
  };
}

使用類繼承方式, 並且再此與model繫結

export default connect(mapStateToProps)(Users);