章节 8 - dispatch-async-action-2.js

运行之前我们在 dispatch-async-action-1.js 中实现的第一个异步 action creator：

  1. import { createStore, combineReducers } from 'redux'
  3. var reducer = combineReducers({
  4.     speaker: function (state = {}, action) {
  5.         console.log('speaker was called with state', state, 'and action', action)
  7.         switch (action.type) {
  8.             case 'SAY':
  9.                 return {
  10.                     ...state,
  11.                     message: action.message
  12.                 }
  13.             default:
  14.                 return state;
  15.         }
  16.     }
  17. })
  18. var store_0 = createStore(reducer)
  20. var asyncSayActionCreator_1 = function (message) {
  21.     return function (dispatch) {
  22.         setTimeout(function () {
  23.             dispatch({
  24.                 type: 'SAY',
  25.                 message
  26.             })
  27.         }, 2000)
  28.     }
  29. }
  31. console.log("\n", 'Running our async action creator:', "\n")
  32. store_0.dispatch(asyncSayActionCreator_1('Hi'))
  34. // 输出：
  35. //     ...
  36. //     /Users/classtar/Codes/redux-tutorial/node_modules/redux/node_modules/invariant/invariant.js:51
  37. //         throw error;
  38. //               ^
  39. //     Error: Invariant Violation: Actions must be plain objects. Use custom middleware for async actions.
  40. //     ...

我们所设计的 function 似乎没有进入 reducer 函数。但是 Redux 给出了温馨提示：使用自定义中间件（middleware）来支持异步 action。看来我们的方向是正确的，可中间件（middleware）又是什么呢？

我向你保证 action creator asyncSayActionCreator_1 不仅没有问题，而且只要我们搞清楚 middleware 的概念并掌握它的使用方法，这个异步 action creator 就会按照我们所设想的结果执行。

开始下节教程：09_middleware.js