Step 8. 通过dva-loading 处理loading 状态

package.json

@@ -13,6 +13,7 @@
     "antd": "^2.9.3",
     "babel-runtime": "^6.9.2",
     "dva": "^1.2.1",
+    "dva-loading": "^0.2.1",
     "react": "^15.4.0",
     "react-dom": "^15.4.0"
   },

src/components/Users/Users.js

@@ -4,7 +4,7 @@ import { Table, Pagination, Popconfirm } from 'antd';
 import styles from './Users.css';
 import { PAGE_SIZE } from '../../constants';
 
-function Users({ list: dataSource, total, page: current }) {
+function Users({ list: dataSource, loading, total, page: current }) {
   function deleteHandler(id){
     console.warn(`TODO: ${id}`);
   }
@@ -46,6 +46,7 @@ function Users({ list: dataSource, total, page: current }) {
         <Table
           columns={columns}
           dataSource={dataSource}
+          loading={loading}
           rowKey={record => record.id}
           pagination={false}
         />
@@ -63,6 +64,7 @@ function Users({ list: dataSource, total, page: current }) {
 function mapStateToProps(state){
   const { list, total, page } = state.users
   return {
+    loading: state.loading.models.users,
     list,
     total,
     page,

src/index.js

@@ -1,16 +1,16 @@
 import dva from 'dva';
+import createLoading from 'dva-loading';
 import './index.css';
 
 // 1. Initialize
 const app = dva();
 
-app.model(require("./models/users"));
 
 // 2. Plugins
-// app.use({});
+app.use(createLoading());
 
 // 3. Model
-// app.model(require('./models/example'));
+app.model(require('./models/users'));
 
 // 4. Router
 app.router(require('./router'));