Step 6. 添加界面，让用户列表展现出来

src/components/Users/Users.css

@@ -0,0 +1,7 @@
+
+.normal {
+}
+
+.operation a {
+  margin: 0 .5em;
+}

src/components/Users/Users.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { connect } from 'dva';
+import { Table, Pagination, Popconfirm } from 'antd';
+import styles from './Users.css';
+import { PAGE_SIZE } from '../../constants';
+
+function Users({ list: dataSource, total, page: current }) {
+  function deleteHandler(id){
+    console.warn(`TODO: ${id}`);
+  }
+
+  const columns = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+      render: text => <a href="">{text}</a>
+    },
+    {
+      title: 'Email',
+      dataIndex: 'email',
+      key: 'email',
+    },
+    {
+      title: 'Website',
+      dataIndex: 'website',
+      key: 'website',
+    },
+    {
+      title: 'Operation',
+      key: 'operation',
+      render: (text, { id }) => (
+        <span className={styles.operation}>
+          <a href="">Edit</a>
+          <Popconfirm title="Confirm to delete?" onConfirm={deleteHandler.bind(null, id)}>
+            <a href="">Delete</a>
+          </Popconfirm>
+        </span>
+      ),
+    },
+  ]
+
+  return (
+    <div className={styles.normal}>
+      <div>
+        <Table
+          columns={columns}
+          dataSource={dataSource}
+          rowKey={record => record.id}
+          pagination={false}
+        />
+        <Pagination
+          className="ant-table-pagination"
+          total={total}
+          current={current}
+          pageSize={PAGE_SIZE}
+        />
+      </div>
+    </div>
+  );
+}
+
+function mapStateToProps(state){
+  const { list, total, page } = state.users
+  return {
+    list,
+    total,
+    page,
+  }
+}
+export default connect(mapStateToProps)(Users);

src/constants.js

@@ -0,0 +1,2 @@
+
+export const PAGE_SIZE = 3;

src/models/users.js

@@ -5,16 +5,24 @@ export default {
   state: {
     list: [],
     total: null,
+    page: null,
   },
   reducers: {
-    save(state, { payload: { data: list, total } }) {
-      return { ...state, list, total };
+    save(state, { payload: { data: list, total, page } }) {
+      return { ...state, list, total, page };
     },
   },
   effects: {
-    *fetch({ payload: { page } }, { call, put }) {
+    *fetch({ payload: { page = 1 } }, { call, put }) {
       const { data, headers } = yield call(usersService.fetch, { page });
-      yield put({ type: 'save', payload: { data, total: headers['x-total-count'] } });
+      yield put({
+        type: 'save',
+        payload: {
+          data,
+          total: parseInt(headers['x-total-count'], 10),
+          page: parseInt(page, 10),
+        },
+      });
     },
   },
   subscriptions: {

src/routes/Users.js

@@ -1,17 +1,14 @@
 import React from 'react';
 import { connect } from 'dva';
 import styles from './Users.css';
+import UsersComponent from '../components/Users/Users';
 
 function Users() {
   return (
     <div className={styles.normal}>
-      Route Component: Users
+      <UsersComponent />
     </div>
   );
 }
 
-function mapStateToProps() {
-  return {};
-}
-
-export default connect(mapStateToProps)(Users);
+export default connect()(Users);

src/services/users.js

@@ -1,5 +1,6 @@
 import request from '../utils/request';
+import { PAGE_SIZE } from '../constants';
 
-export function fetch({ page = 1}) {
-  return request(`/api/users?_page=${page}&_limit=5`);
+export function fetch({ page }) {
+  return request(`/api/users?_page=${page}&_limit=${PAGE_SIZE}`);
 }