asynchronous action creator 做数据取回，至少发送3个不同的actions:
- an action 查询store, 请求开始(request began)
- an action 查询store, 请求成功的完成(request finished successfully)
- an action 查询store, 请求失败(request failed)
下面以pro react中的示例作介绍，这个项目主要是查询飞机航班信息和飞机票信息了解具体操作流程：
1.目录结构
-
app/
- actions/
- api/
- components/
- reducers/
- store/
- index.js
- constants.js
其中 粗体带/ 表示文件夹， 斜体 表示文件, app/ 文件夹在根目录下。
2.定义constants.js
这个常量文件主要是项目中发送请求的类型，通常都是一边开发，一边根据需求来实现的，这里由于是示例，暂且先一次性写出来：
// constants.js
/*
* REQUEST_AIRPORTS: 表示应用开始取回航班信息
* RECEIVE_AIRPORTS: 通过负载(preloaders)来表示异步取回信息失败或者成功(注意这个动作表示2种状态)
* CHOOSE_AIRPORT : 选择起点和终点的操作，同步操作
* REQUEST_TICKETS : 表示应用请求票务信息
* RECEIVE_TICKETS : 异步取回票务信息成功或失败(注意这个动作表示2种状态，成功或失败)
*/
export default const REQUEST_AIRPORTS = 'request airports';
export default const RECEIVE_AIRPORTS = 'receive airports';
export default const CHOOSE_AIRPORT = 'choose airport';
export default const REQUEST_TICKETS = 'request tickets';
export default const RECEIVE_TICKETS = 'receive tickets';
3.创建辅助API函数，用来获取服务器中的数据
这些数据APIs现在都由示例提供，通过上面的示例我们知道有2次异步的操作： 取回航班信息和取回票务信息。
本例使用 fetch进行ajax操作,返回一个promise，在 api/文件夹下：
// api/AirCheapAPI.js
import 'whatwg-fetch';
// 用fetch取回数据
// 对数据进行json()格式化
// 整个函数返回一个promise, 等待进一步操作
const AirCheapAPI = {
// 取回航班信息
fetchAirports() {
return fetch('https://aircheapapi.pro-react.com/airports')
.then(response => response.json());
}，
// 取回票务信息
fetchTickets(origin, destination) {
return fetch(`https://aircheapapi.pro-react.com/tickets?origin=${origin}&destination=${destination}`)
.then(response => response.json());
}
}
export default AirCheapAPI;
4.AirportActionCreators
根据常量中的动作类型和需求来定义actions, 再将其写成函数的形式，方便传入到数据中,在实际的开发中，这些不可能一蹴而就，往往都是按需开发。
// actions/AirportActionCreators.js
import {
REQUEST_AIRPORTS,
RECEIVE_AIRPORTS,
CHOOSE_AIRPORT,
REQUEST_TICKETS,
RECEIVE_TICKETS
} from '../constants';
import AirCheapAPI from '../api/AirCheapAPI';
const AirportActionCreators = {
// 获取航班信息
// 异步操作, 返回一个函数
// Thunk action creator
fetchAirportsInfo(origin, destination) {
return (dispatch) => {
// 本地发送请求航班信息
dispatch({ type: REQUEST_AIRPORTS });
// promise
// 取回数据成功(success)， 则发送RECEIVE_AIRPORTS动作和preload
// success, airports为负载
// 取回数据失败(error), 则发送RECEIVE_AIRPORTS动作和preload
AirCheapAPI.fetchAirports().then(
(success) => dispatch({ type: RECEIVE_AIRPORTS, success: true, airports }),
(error) => dispatch({ type: RECEIVE_AIRPORTS, success: false })
)
};
},
// 选择出发地和目的地
// 同步操作， 返回一个action 对象
// target， code 都是发送动作时的负载
chooseAirport(target, airport) {
return {
type: CHOOSE_AIRPORT,
target,
code: airport ? airport.value : ''
}
},
// 获取票务信息
// 异步操作， 返回一个函数
fetchTicketsInfo(origin, destination) {
return (dispatch) => {
dispatch({ type: REQUEST_TICKETS });
AirCheapAPI.fetchTickets(origin, destination).then(
(success) => dispatch({ type: RECEIVE_TICKETS, success: true, tickets}),
(error) => dispatch({ type: RECEIVE_TICKETS, success: false })
)
};
}
}
export default AirportActionCreators;
通过上面可以看出，异步操作一般调用返回一个函数，调用辅助api，而同步操作，返回一个action对象即可
4.reducers
写完actionCreators之后就该写reducers(通常需要知道数据结构),一般将大的reducers工具功能划分成小的单个reducer，最后再合并成一个rootReducer。
更具constants.js可以知道总共有5种类型的action type， 但其中 REQUEST_AIRPORTS和REQUEST_TICKETS在异步操作中完成。
airports.js:
// reducers/airports.js
import { RECEVIE_AIRPORTS } from '../constants';
const airports = (state = [], action) => {
switch (action.type) {
case RECEVIE_AIRPORTS:
return action.tickets;
default:
return state;
}
}
export default airports;
route.js:
// reducers/route.js
import update from 'react-addons-update';
import { CHOOSE_AIRPORT } from '../constants';
const initialState = {
origin: '',
destination: ''
};
const route = (state = initialState, action) => {
switch (action.type) {
case CHOOSE_AIRPORT:
// 更新状态树中的route状态
// action.target 表示 'origin'或者'destination'
return update(state, { [action.target]: { $set: action.code } });
default:
return state;
}
}
export default route;
tickets.js:
// reducers/tickets.js
import { REQUEST_TICKETS, RECEVIE_TICKETS } from '../constants';
const tickets = (state = [], action) => {
switch (action.type) {
// 这里的REQUEST_TICKETS主要用于清空状态树中tickets的内容
case REQUEST_TICKETS:
return [];
case RECEVIE_TICKETS:
return action.tickets;
default:
return state;
}
}
export default tickets;
将多个reducers合并成一个rootReducer, index.js:
// reducers/index.js
import { combineReducers } from 'redux';
import airports from './airports';
import route from './route';
import tickets from './tickets';
const rootReducer = combineReducers({
airports,
route,
tickets
});
export default rootReducer;
5.store
完成reducers之后,下一步就是写store了，因为异步的原因，需要添加中间件react-thunk,另外这里自己写一个logger的中间件。
// store/index.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'react-thunk';
import rootReducer from '../reducers/index';
// 自定义logger中间件
const logger = (store) => (next) => (action) => {
if (typeof action !== 'function') {
console.log('dispatching:', action)
}
next(action);
};
const aircheapStore = createStore(
rootReducer,
applyMiddleware(logger, thunk)
);
export default aircheapStore;
如果配合redux-devtools chrome插件，可以写为：
import { createStore, applyMiddleware, compose } from 'redux';
// ...
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const aircheapStore = createStore(
rootReducer,
composeEnhancers(applyMiddleware(logger, thunk))
);
export default aircheapStore;
到目前为止，所有的基本框架已经搭建好了，剩下的就是去写components/中的组件了，当然这只是示例，实际开发中肯定要先写组件，然后依据需求添加上面的api, constants, actions, reducers, store。
总结
写这个主要是为了熟悉开发流程，以及异步操作的处理当中要注意的一些事项和规范。真实项目目前做的比较少，大致流程可以理解为：
- 写设计组件结构，由几部分组件，写出presentation components（视觉组件）
- 然后初步列举出所需要的功能，将功能的实现以动作的形式命名，写入到constants.js中
- 列举出可能会出项的异步操作，写入到辅助api中
- 根据动作类型写出actionCreator, 及对应的reducer
- 将routeReducer写入store
- 再写container components(容器组件), 然后调用store中的所需要的状态
当然状态树(state tree)这一点上对于我这样的新手来说十分的困难，如果设计数据结构这又是一个大难题了。
2016/12/12 17:17:49
