使用异步action

redux除了可以执行同步action外，还可以执行异步action.

标准的做法是使用 Redux Thunk 中间件。要引入 redux-thunk 这个专门的库才能使用。我们 后面 会介绍 middleware 大体上是如何工作的；目前，你只需要知道一个要点：通过使用指定的 middleware，action 创建函数除了返回 action 对象外还可以返回函数。这时，这个 action 创建函数就成为了 thunk。 不是只有返回了异步函数才能成为chunk 。
当 action 创建函数返回函数时，这个函数会被 Redux Thunk middleware 执行。这个函数并不需要保持纯净；它还可以带有副作用，包括执行异步 API 请求。这个函数还可以 dispatch action，就像 dispatch 前面定义的同步 action 一样。
我们仍可以在 actions.js 里定义这些特殊的 thunk action 创建函数。

  1. export function getCurrentTime() {
  2.   return function fetchCurrentTime(dispatch) {
  3.     dispatch(pending());
  4.     return fetch("http://127.0.0.1:8080/api/common/currentTime")
  5.       .then(
  6.         response => response.json(),
  7.         error => console.log("error", error)
  8.       )
  9.       .then(res => {
  10.         if(res.msg === "ok") {
  11.           dispatch(setCurrentTime({
  12.             currentTime2: res.data.currentTime,
  13.             status: "success",
  14.             msg: "ok",
  15.           }))
  16.         } else {
  17.           dispatch(fail())
  18.         }
  19.       })
  20.   }
  21. }

在dispatch中使用中间件需要引入Redux Thunk middleware：

  1. import thunk from "redux-thunk";
  3. const { createStore, applyMiddleware } = require("redux");
  4. const { timeTool } = require("./reducer");
  6. let store = createStore(timeTool, applyMiddleware(thunk));
  8. export default store;

再次dispatch

thunk 的一个优点是它的结果可以再次被 dispatch：

  1. import fetch from 'cross-fetch'
  3. export const REQUEST_POSTS = 'REQUEST_POSTS'
  4. function requestPosts(subreddit) {
  5.   return {
  6.     type: REQUEST_POSTS,
  7.     subreddit
  8.   }
  9. }
  11. export const RECEIVE_POSTS = 'RECEIVE_POSTS'
  12. function receivePosts(subreddit, json) {
  13.   return {
  14.     type: RECEIVE_POSTS,
  15.     subreddit,
  16.     posts: json.data.children.map(child => child.data),
  17.     receivedAt: Date.now()
  18.   }
  19. }
  21. export const INVALIDATE_SUBREDDIT = 'INVALIDATE_SUBREDDIT'
  22. export function invalidateSubreddit(subreddit) {
  23.   return {
  24.     type: INVALIDATE_SUBREDDIT,
  25.     subreddit
  26.   }
  27. }
  29. function fetchPosts(subreddit) {
  30.   return dispatch => {
  31.     dispatch(requestPosts(subreddit))
  32.     return fetch(`http://www.reddit.com/r/${subreddit}.json`)
  33.       .then(response => response.json())
  34.       .then(json => dispatch(receivePosts(subreddit, json)))
  35.   }
  36. }
  38. function shouldFetchPosts(state, subreddit) {
  39.   const posts = state.postsBySubreddit[subreddit]
  40.   if (!posts) {
  41.     return true
  42.   } else if (posts.isFetching) {
  43.     return false
  44.   } else {
  45.     return posts.didInvalidate
  46.   }
  47. }
  49. export function fetchPostsIfNeeded(subreddit) {
  50.   // 注意这个函数也接收了 getState() 方法
  51.   // 它让你选择接下来 dispatch 什么。
  53.   // 当缓存的值是可用时，
  54.   // 减少网络请求很有用。
  56.   return (dispatch, getState) => {
  57.     if (shouldFetchPosts(getState(), subreddit)) {
  58.       // 在 thunk 里 dispatch 另一个 thunk！
  59.       return dispatch(fetchPosts(subreddit))
  60.     } else {
  61.       // 告诉调用代码不需要再等待。
  62.       return Promise.resolve()
  63.     }
  64.   }
  65. }

thunk middleware并不是处理异步action的唯一方式：

你也可以先尝试一些不同做法，选择喜欢的，并使用下去，不论有没有使用到 middleware 都行。

异步数据流