使用Redux-thunk发Async Action的例子

先贴官网链接：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,
    });
  });
};