先贴官网链接:https://github.com/gaearon/redux-thunk
简单的逻辑:
首先,这是个关于action creator的解释。
什么是action creator?返回action的函数。为什么要用action creator?图个方便吧:
/* 使用前 */
// 这里
dispatch({
type: ‘change_name’,
name: ‘Peter’,
});
// 那里
dispatch({
type: ‘change_name’,
name: ‘Ryan’,
});
/* ******************************** */
/* 使用后 */
// 这里
dispatch(changeName(‘Peter’));
// 那里
dispatch(changeName(‘Ryan’));
Thunk的做法就是扩展了这个action creator。
Redux官网说,action就是Plain JavaScript Object。Thunk允许action creator返回一个函数,而且这个函数第一个参数是dispatch。
这不是闹呢?
所以不光改造action creator,如果你要用thunk,你还要把它放进middleware里去,这样函数类型的action就被thunk middleware捕获,根据你的函数逻辑,再去dispatch常规的action。
这样Async Action其实就是发Ajax之前dispatch一发,收到服务器相应后dispatch一发,报错的话再来dispatch一发。为什么用?图个方便吧:
/**
* Sample Async Action namely: the thunk
* 要配合redux-thunk这个middleware一起食用
* ref: https://github.com/gaearon/redux-thunk
*/
export const loadMoreWorkAsync = () => dispatch => {
/* TODO: 请暂时无视我如此拙劣的dispatch行为 */
/* 1. fetch之前,可以先发个pending的action */
dispatch({
type: LOAD_MORE_WORK,
msg: 'pending',
});
fetch('imgs/test.json').then(resp => {
// console.log('[resp]', resp.status);
if (resp.status === 200) return resp.json();
throw new Error('not 200 this time'); // 美滴很
}).then(json => {
/* 2. 异步结束了,发结果action */
dispatch({
type: LOAD_MORE_WORK,
msg: json.name,
});
}).catch(error => {
/* 3. 倒霉催的,发报错action */
dispatch({
type: LOAD_MORE_WORK,
msg: error,
});
});
};