(1):修改 src/index.js
關鍵代碼:
// 2. Plugins app.use(createLoading());
import dva from 'dva'; import { browserHistory } from 'dva/router'; import createLoading from 'dva-loading'; import { message } from 'antd'; import './index.html'; import './index.css'; const ERROR_MSG_DURATION = 3; // 3 秒 // 1. Initialize const app = dva({ history: browserHistory, onError(e) { message.error(e.message, ERROR_MSG_DURATION); }, }); // 2. Plugins app.use(createLoading()); // 3. Model app.model(require('./models/users')); // 4. Router app.router(require('./router')); // 5. Start app.start('#root');
(2): 修改component 如: components\Users\Users.js
A: 傳入參數 loading
function Users({ dispatch, list: dataSource, loading, total, page: current })
B: loading 放入 table
<Table
columns={columns}
dataSource={dataSource}
loading={loading}
rowKey={record => record.id}
pagination={false}
/>
C: model 放入 loading state裏面
<Table
columns={columns}
dataSource={dataSource}
loading={loading}
rowKey={record => record.id}
pagination={false}
/>
import React from 'react';
import { connect } from 'dva';
import { Table, Pagination, Popconfirm, Button } from 'antd';
import { routerRedux } from 'dva/router';
import styles from './Users.css';
import { PAGE_SIZE } from '../../constants';
import UserModal from './UserModal';
function Users({ dispatch, list: dataSource, loading, total, page: current }) {
function deleteHandler(id) {
dispatch({
type: 'users/remove',
payload: id,
});
}
function pageChangeHandler(page) {
dispatch(routerRedux.push({
pathname: '/users',
query: { page },
}));
}
function editHandler(id, values) {
dispatch({
type: 'users/patch',
payload: { id, values },
});
}
function createHandler(values) {
dispatch({
type: 'users/create',
payload: values,
});
}
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, record) => (
<span className={styles.operation}>
<UserModal record={record} onOk={editHandler.bind(null, record.id)}>
<a>Edit</a>
</UserModal>
<Popconfirm title="Confirm to delete?" onConfirm={deleteHandler.bind(null, record.id)}>
<a href="">Delete</a>
</Popconfirm>
</span>
),
},
];
return (
<div className={styles.normal}>
<div>
<div className={styles.create}>
<UserModal record={{}} onOk={createHandler}>
<Button type="primary">Create User</Button>
</UserModal>
</div>
<Table
columns={columns}
dataSource={dataSource}
loading={loading}
rowKey={record => record.id}
pagination={false}
/>
<Pagination
className="ant-table-pagination"
total={total}
current={current}
pageSize={PAGE_SIZE}
onChange={pageChangeHandler}
/>
</div>
</div>
);
}
function mapStateToProps(state) {
const { list, total, page } = state.users;
return {
loading: state.loading.models.users,
list,
total,
page,
};
}
export default connect(mapStateToProps)(Users);