(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);