D2
Fixed Bugs
昨天我就說邊距怎么那么難調(diào)蛹疯，今天發(fā)現(xiàn)了木人，App.js 里<Main />要放在<Content>里。
主要內(nèi)容
- projects-project 顯示頁面
- react-redux 入門
地址
React-Redux
即使官方文檔說到Redux，總是說由action、store和component組成的MVC模型镀首，但在我看到過
一些人的實(shí)現(xiàn)后，我的理解應(yīng)該是以下五部分：
component - api - action - reduce -store
邏輯是這樣的：component的用戶處得到一個事件鼠次，調(diào)用API的函數(shù)產(chǎn)生一個action對象更哄，reducer
根據(jù)當(dāng)前store的狀態(tài)和action對象計(jì)算一個新的狀態(tài)給store芋齿，store再為component提供數(shù)據(jù)
安裝
npm install redux react-redux
Projects
Reducer
我個人理解吧，reduce 就是連接store和action的中間部分成翩，從action中獲取類型和參數(shù)觅捆、
從store里獲取狀態(tài)，根據(jù)這些信息計(jì)算下一個狀態(tài)麻敌，再提供給store.
所以所謂reduce其實(shí)就是一個函數(shù)栅炒，函數(shù)體是一個switch函數(shù)，大概像：
export default function(state, action) {
switch(state) {
case :
return action.payload;
...
default :
return state;
}
}
Store
store就更簡單了术羔，獲取一個reduce赢赊，用redux自己的組件包裝一下，像 ：
import projectsReducer from '../reducers/projectsReducer';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
export default createStore(projectsReducer, applyMiddleware(thunk));
Action
action也是單純的像邏輯一樣的東西级历，會export一系列的函數(shù)释移，這些函數(shù)產(chǎn)生一個action對象，
提供給reduce寥殖。type基本就是增刪查改玩讳，payload就是看你覺得你的reduce在計(jì)算下一個狀態(tài)的時候需要哪些東西了。
比如：
export const fetchProjectsBegin = () => ({
type : FETCH_PROJECTS,
});
export const fetchProjectsSuccess = (projects) => ({
type : FETCH_PROJECTS_SUCCESS,
payload : {
projects : projects
}
});
export const fetchProjectsError = (error) => ({
type : FETCH_PROJECTS_ERROR,
payload : {
projects : error
}
});
API
API是真的要做點(diǎn)什么了嚼贡，基本就是用來跟component交互的熏纯，component調(diào)用(dispatch)某個函數(shù)，函數(shù)根據(jù)component給的參數(shù)做些什么（可能跟后端交互编曼、可能生成新的參數(shù)）豆巨，然后產(chǎn)生一個action，類似：
export function fetchProjects() {
return dispatch => {
dispatch(fetchProjectsBegin()); /* 產(chǎn)生一個action */
return fetch(`${API_URL}`,{headers : API_HEADERS})
.then(handleErrors) /* 拋出異常掐场，讓catch捕獲 */
.then(res => res.json()) /* 把得到的數(shù)據(jù)轉(zhuǎn)成json對象 */
.then(res => {
dispatch(fetchProjectsSuccess(res)); /* 產(chǎn)生一個action */
})
.catch(error => dispatch(fetchProjectsError(error))); /* 產(chǎn)生一個action */
};
}
Component
組件是兩層的往扔，每個組件先有一個container用來連接store吆录，內(nèi)部組件使用container提供的數(shù)據(jù)奈偏。container就一個組件
<Provider store={projectStore}>
<Projects />
</Provider>
然后組件里使用connect連接到store。
const mapStateToProps = (state) => {
return {projects: state}; /* 把state映射到props里 */
};
export default connect(
mapStateToProps
)( Projects ); /* 連接store和component */
注：其實(shí)還有一個mapStateToDispatch擅羞，但我不會用嚷堡。
我不想貼太多代碼蝗罗，Projects的html代碼還是用react-mdl的一些組件湊的，可以再源代碼自取蝌戒。至此串塑，projects頁面就已經(jīng)寫好了。
效果
我在寫上一個項(xiàng)目的時候是直接跳到后端做了一個簡單的API之后聯(lián)調(diào)的北苟，但這次我想把前后端徹底分開桩匪，所以就再引入一個簡單的工具 ——
json-server。
編輯static/db.json文件:
{
"projects" : [
{
"id" : 1,
"title" : "The First Project",
"brief" : "The First Project"
},
{
"id" : 2,
"title" : "The Second Project",
"brief" : "The Second Project"
},
{
"id" : 3,
"title" : "The Third Project",
"brief" : "The Third Project"
}
]
}
然后查看http://localhost:3000/就可以找到你的數(shù)據(jù)了
然后把API的url改成json數(shù)據(jù)庫的url友鼻，配置路由傻昙，啟動開發(fā)服務(wù)器闺骚，看到如下界面
那個紅線看起來有點(diǎn)emmm，所以調(diào)整樣式讓整個看起來舒適一些妆档，編輯App.css僻爽，就變成
project
用類似的一整套過程，可以再寫出一個project的界面贾惦，如下
這次的應(yīng)該再主頁上是看不到了胸梆，我也不想再去搞一個遠(yuǎn)程的json-server，太麻煩了须板，估計(jì)等后面后端搭的時候這部分才能顯示吧乳绕。
