## 改造列表頁
1. 基于dva數據流改造需要做如下修改
* 增加connect
~~~
@connect(({ demo, loading }) => ({
demo,
loading: loading.models.demo,
}))
@Form.create()
class Demo extends PureComponent {
}
~~~
* 修改handelSearch方法，使用dispatch調用數據流
~~~
handleSearch = params => {
const { dispatch } = this.props;
dispatch({
type: 'demo/fetchList',
payload: params,
});
};
~~~
* 刪除Demo中的state的data字段并且將render方法內從state獲取date的代碼替換為從props獲取，其中的demo則是從connect連接到model內的namespace名，demo.data則對應model內state的data字段。
~~~
state = {
selectedRows: [],
};
~~~
~~~
render() {
const code = 'demo';
const {
form,
loading,
demo: { data },
} = this.props;
...............
}
~~~
2. 完整代碼如下
~~~
import React, { PureComponent } from 'react';
import { Button, Col, Form, Input, message, Row } from 'antd';
import { connect } from 'dva';
import Grid from '../../../components/Sword/Grid';
import Panel from '../../../components/Panel';
const FormItem = Form.Item;
@connect(({ demo, loading }) => ({
demo,
loading: loading.models.demo,
}))
@Form.create()
class Demo extends PureComponent {
state = {
selectedRows: [],
};
onSelectRow = rows => {
this.setState({
selectedRows: rows,
});
};
getSelectKeys = () => {
const { selectedRows } = this.state;
return selectedRows.map(row => row.id);
};
// ============ 查詢 ===============
handleSearch = params => {
const { dispatch } = this.props;
dispatch({
type: 'demo/fetchList',
payload: params,
});
};
// ============ 查詢表單 ===============
renderSearchForm = onReset => {
const { form } = this.props;
const { getFieldDecorator } = form;
return (
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={6} sm={24}>
<FormItem label="標題">
{getFieldDecorator('title')(<Input placeholder="請輸入標題" />)}
</FormItem>
</Col>
<Col>
<div style={{ float: 'right' }}>
<Button type="primary" htmlType="submit">
查詢
</Button>
<Button style={{ marginLeft: 8 }} onClick={onReset}>
重置
</Button>
</div>
</Col>
</Row>
);
};
test = () => {
const keys = this.getSelectKeys();
if (keys.length === 0) {
message.warn('請先選擇一條數據!');
} else {
console.log(`已選擇數據id：${keys}`);
}
};
renderLeftButton = () => (
<Button icon="tool" onClick={this.test}>
測試
</Button>
);
render() {
const code = 'demo';
const {
form,
loading,
demo: { data },
} = this.props;
const columns = [
{
title: '標題',
dataIndex: 'title',
},
{
title: '內容',
dataIndex: 'content',
},
{
title: '時間',
dataIndex: 'date',
},
];
return (
<Panel>
<Grid
code={code}
form={form}
onSearch={this.handleSearch}
onSelectRow={this.onSelectRow}
renderSearchForm={this.renderSearchForm}
renderLeftButton={this.renderLeftButton}
loading={loading}
data={data}
columns={columns}
/>
</Panel>
);
}
}
export default Demo;
~~~
3. 打開系統，查看查詢之后調用的接口及傳遞參數都正確。
4. 如此一來就已經將api調用、數據處理徹底解耦到了model 中。Demo頁面只需關注UI與數據的綁定。