D3
主要內(nèi)容
- project 添加頁(yè)面
- project 編輯頁(yè)面
地址
添加頁(yè)面
本來(lái)我是想去掉原來(lái)的bootstrap用mdl的统翩，但mdl的輸入框真的是不好看迅办，所以還是裝一下bootstrap 吧衩侥，運(yùn)行
npm install react-bootstrap bootstrap
并在index.html中添加
<link
rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
然后給ProjectContainer加個(gè)屬性決定是要顯示還是編輯阁将，并把添加頁(yè)面配置到路由里匀油。
<Route path="/projects/add" component={ProjectContainer} mode='add' />
然后就可以寫ProjectCreator了锐极，基本還是前面的一整套盒齿，但因?yàn)閟tore已經(jīng)有了沮峡，只需要更新reducer疚脐、action、api就可以了邢疙。
Reducer
其實(shí)reducer并不需要改棍弄，因?yàn)閜roject和projects是兩個(gè)不同的store，所以當(dāng)編輯完成通過(guò)保存或放棄退回到projects時(shí)疟游，頁(yè)面總是會(huì)重新fetch一下數(shù)據(jù)呼畸，獲取到與數(shù)據(jù)庫(kù)同步的數(shù)據(jù)并顯示。
Action
action還是分begin颁虐、success蛮原、error。
- begin的時(shí)候要帶著從用戶處獲取的要保存到數(shù)據(jù)庫(kù)的數(shù)據(jù)另绩，payload帶project儒陨。
- success之后因?yàn)橐D(zhuǎn)，所以什么都不用做笋籽。
- 出錯(cuò)后只要把出錯(cuò)的信息輸出一下就好了蹦漠，所以payload帶error。
API
create的話就是post到后端就可以了车海。
return dispatch => {
dispatch( createProjectBegin(project) );
return fetch(`${api_url}`,{
method : 'POST',
headers : API_HEADERS,
body : JSON.stringify(project)
})
.then(handleErrors)
.then(() => {
dispatch( createProjectSuccess() );
})
.catch(error => dispatch( createProjectError(error) ));
}
Component
之前說(shuō)過(guò)了笛园，表單用bootstrap寫，然后因?yàn)槲也淮髸?huì)用form-submit那樣的，所以我還是用onChange + onClick這種的形式研铆。所以component要維護(hù)一個(gè)project 狀態(tài)埋同，當(dāng)輸入框狀態(tài) 變化時(shí)要更新?tīng)顟B(tài)，所以這里用到另外一個(gè)工具react-addons-update棵红。
其實(shí)就是一個(gè)用來(lái)copy對(duì)象維持狀態(tài)的不可變性的凶赁，我用的原因也只是怕踩到關(guān)于狀態(tài)更新的坑吧。然后寫handleChange函數(shù)
import update from 'react-addons-update';
handleChange(e) {
let {name, value} = e.target;
const { project } = this.state;
const newProject = update(project, {$merge : {[name] : value}});
this.setState({
project: newProject
});
}
然后提交的時(shí)候就直接從組件狀態(tài)中獲取project逆甜，調(diào)用API的相關(guān)函數(shù)就可以了哟冬。同樣的，我不想貼component的代碼了忆绰，而且這一版的界面看起來(lái)也好奇怪啊浩峡，我之后可能還要改一改，大概的樣子是
刪除項(xiàng)目
- 出于與添加相同的原因错敢，刪除也不需要修改reducer
- API里增加刪除的函數(shù)
- action里增加刪除的action翰灾。
- begin : 帶projectId
- success : 啥都不帶
- error : 帶error
- 沒(méi)有component
更新項(xiàng)目
- reducer也不改
- API里增加更新的函數(shù)
- action里增加更新的函數(shù)
- begin : 帶項(xiàng)目id和新項(xiàng)目
- success : 啥都不帶
- error : 帶error和就項(xiàng)目
- component跟creator一樣， 只是帶默認(rèn)值
BUG: ： 以當(dāng)前的邏輯稚茅，只有當(dāng)用戶從顯示頁(yè)面進(jìn)入更新頁(yè)面時(shí)才會(huì)出現(xiàn)默認(rèn)值纸淮，通過(guò)url訪問(wèn)時(shí)不會(huì)出現(xiàn)默認(rèn)值，之后的blog部分我應(yīng)該會(huì)選擇使用狀態(tài)改變而不是頁(yè)面跳轉(zhuǎn)的方式控制更新與顯示狀態(tài)亚享。
后續(xù)：：明天開(kāi)始我會(huì)開(kāi)始做后端了吧咽块，因?yàn)閎log跟project基本一模一樣，都是獲取數(shù)據(jù)欺税，然后增刪查改侈沪，所以就不重復(fù)地寫兩天廢話了。明天開(kāi)始面向project做一個(gè)REST API晚凿，接起來(lái)整個(gè)項(xiàng)目就差不多了吧（后面可能還有些樣式修改什么的）亭罪。
