## 改造詳情頁
1. 基于dva數據流改造需要做如下修改
* 增加connect
~~~
@connect(({ demo, loading }) => ({
demo,
loading: loading.models.demo,
}))
@Form.create()
class DemoEdit extends PureComponent {
}
~~~
* 刪掉state，修改componentWillMount，使用dispatch調用數據流進行數據加載
~~~
componentWillMount() {
const {
dispatch,
match: {
params: { id },
},
} = this.props;
dispatch({
type: 'demo/fetchDetail',
payload: { id },
});
}
~~~
* 修改render下原先state中data的獲取，改為從props獲取并將data改為detail
~~~
const {
demo: { detail },
} = this.props;
~~~
2. 打開系統，詳情頁數據加載成功
3. 附上完整代碼
~~~
import { connect } from 'dva';
import React, { PureComponent } from 'react';
import { Form, Card } from 'antd';
import Panel from '../../../components/Panel';
import styles from '../../../layouts/Sword.less';
const FormItem = Form.Item;
@connect(({ demo, loading }) => ({
demo,
loading: loading.models.demo,
}))
@Form.create()
class DemoEdit extends PureComponent {
componentWillMount() {
const {
dispatch,
match: {
params: { id },
},
} = this.props;
dispatch({
type: 'demo/fetchDetail',
payload: { id },
});
}
render() {
const {
demo: { detail },
} = this.props;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 7 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
md: { span: 10 },
},
};
return (
<Panel title="查看" back="/platform/demo">
<Form hideRequiredMark style={{ marginTop: 8 }}>
<Card title="基本信息" className={styles.card} bordered={false}>
<FormItem {...formItemLayout} label="標題">
<span>{detail.title}</span>
</FormItem>
<FormItem {...formItemLayout} label="日期">
<span>{detail.date}</span>
</FormItem>
<FormItem {...formItemLayout} label="內容">
<span>{detail.content}</span>
</FormItem>
</Card>
</Form>
</Panel>
);
}
}
export default DemoEdit;
~~~
4. 附上model的完整代碼
~~~
import { message } from 'antd';
import router from 'umi/router';
import { list, detail, submit } from '../services/demo';
export default {
namespace: 'demo',
state: {
data: {
list: [],
pagination: {},
},
detail: {},
},
effects: {
*fetchList({ payload }, { call, put }) {
const response = yield call(list, payload);
if (response.success) {
yield put({
type: 'saveList',
payload: {
list: response.data.records,
pagination: {
total: response.data.total,
current: response.data.current,
pageSize: response.data.size,
},
},
});
}
},
*fetchDetail({ payload }, { call, put }) {
const response = yield call(detail, payload);
if (response.success) {
yield put({
type: 'saveDetail',
payload: {
detail: response.data,
},
});
}
},
*submit({ payload }, { call }) {
const response = yield call(submit, payload);
if (response.success) {
message.success('提交成功');
router.push('/platform/demo');
}
},
},
reducers: {
saveList(state, action) {
return {
...state,
data: action.payload,
};
},
saveDetail(state, action) {
return {
...state,
detail: action.payload.detail,
};
},
},
};
~~~
<br>
## 結束語
* 經過整本手冊的學習，帶領大家由淺入深，見證了一個簡單組件到復雜的誕生，也見證了一個增刪改查模塊經過多次修改越來越精簡清晰的過程
* 知識的海洋是無限的，大家若能掌握學習方法，相信以后會對React更加熟悉，寫起系統來更加順暢