摘要：異步實現設計需要增加三種通知異步請求發起的異步請求成功的異步請求失敗的示例代碼如下返回參數完全可以自定義。這種分別在請求開始前，請求成功后，請求失敗后發送。表示數據的有效性，他的作用是在異步請求發送失敗后，告訴當前的數據是過時的數據。

說明：對Redux不了解的同學可先看看這篇文章Redux技術架構簡介（一）

這里說的Redux異步實現，是專指Redux中的異步Action實現，而不是指應用的異步實現，因為Redux本身只支持同步action，即發送action，state立即更新；那如果我在發送一個action后，需要state過一段時間再更新呢？按正常的思路redux是無法處理這種情況的，下面就來看看異步Action是如何實現的吧！

需要提的一點是，其實完全可以將異步邏輯寫在View中，然后在回調函數中發送action。但是如果你要配合react一起使用，這樣做就違背了react-redux的設計思想，即UI與邏輯的分離（具體的實現可以在下一篇文章中看到），而且當存在多個異步請求時也很難將異步邏輯抽象出來，所以異步邏輯應該由Redux架構實現，這樣也就必須實現發送異步action了

為了解決上面提到的問題，我們需要引入中間件的概念。

中間件執行的時機是在action發起之后，reducer執行之前。

即在dispatch一個action之后，經過一系列的中間件處理過程，再進行reducer。

本質上，中間件就是對dispatch函數的改造。當執行dispatch(action)時，會先調用中間件，進行一些內部邏輯處理，如：添加日志等，之后再執行dispatch。如果要支持中間件的鏈式調用，必須再返回一個dispatch。
下面是中間件的簡單實現：

function logger(store) {
  // 這里的 next 必須指向前一個 middleware 返回的函數：
  const next = store.dispatch

  return function dispatchAndLog(action) {
    console.log("dispatching", action)
    let result = next(action)
    console.log("next state", store.getState())
    return result
  }
}

可以使用Redux的API—applyMiddleware直接使用中間件，代碼如下：

import {applyMiddleware,createStore} from "redux";
import {createLogger} from "redux-logger";//log中間件
import thunk from "redux-thunk";//將dispatch改造成可以接受函數作為參數的中間件
import indexPhotomainReducer from "../reducer/indexPhotomainReducer";

const logger = createLogger();
const store  = createStore(
        indexPhotomainReducer,
        applyMiddleware(thunk, logger)
);

由此可見，可以把applyMiddleware作為createStore的第二個參數傳入，你所使用的中間件需要下載多帶帶npm包，然后按順序傳入applyMiddleware函數中（注：中間件有順序要求，需要看下每個中間件的使用文檔，logger一般要放在最后）。

需要增加三種action

通知異步請求發起的action

異步請求成功的action

異步請求失敗的action

示例代碼如下：

export const requestPostsAction = () => {
 return {
     type: REQUEST_POSTS
 };
}

export const receivePostsSuccessAction = (data) => {
 return {
     type: RECEIVE_POSTS_SUCCESS,
     data
 };
}
export const receivePostsFailureAction = (error) => {
 return {
     type: RECEIVE_POSTS_FAILURE,
     error
 };
}

返回參數完全可以自定義。這3種action分別在請求開始前，請求成功后，請求失敗后發送。
## （2） State設計
為了配合異步Action，可以在state樹中增加2個屬性：

isFetching:表示是否正在處理異步請求。

isValidate:表示數據的有效性，他的作用是在異步請求發送失敗后，告訴View當前state的數據是過時的數據。

State屬性可以憑自己喜好隨意設計。設計好后可以這樣編寫reducer：

let sliderReducer = function (state = initialState, action) {
    switch(action.type){
        case photomainAction.RECEIVE_POSTS_SUCCESS:
               return Object.assign({}, state, {photoData,videoData,isFetching:false,isValidate:true});
        case photomainAction.RECEIVE_POSTS_FAILURE:
               return Object.assign({}, state, {isFetching:false,isValidate:false});
        case photomainAction.REQUEST_POSTS:
               return Object.assign({}, state, {isFetching:true,isValidate:false});
        default:
            return state;
    }
}

當設計好action和state后，我們想要達到的效果是--可以像同步一樣dispatch一個action，而不用考慮異步邏輯。
為了達到這種效果，首先面臨的問題是，異步邏輯放在哪里？這里只有2個選擇：action中或reducer中（store是不適合處理數據的）。由于reducer必須是一個純函數，他不適合處理像異步請求這樣存在不確定的輸出的邏輯。最后只能放在action中處理了。
這時，為了處理異步請求，action創建函數需要返回一個帶有異步請求邏輯的函數，而不是一個對象了。而dispatch只能接受對象，不能接受函數作為參數，這樣就面臨又一個問題：如何讓dispatch接受函數？
接下來就是redux-thunk中間件發揮作用的時候了，他可以讓dispatch接受一個函數（原理就是上一節講的，他其實是改寫了dispatch函數），最終異步的action可以這樣實現：

//定義一個action creator – fetchPosts
export const fetchPosts = () => (dispatch, getState) => {
    dispatch(requestPostsAction());
    return window.fetch("/photo/initPage").then(response=>{
            if(response.ok){
                return response.json();
            }else{
                dispatch(receivePostsFailureAction("error"));
            }
        }).then(data => {
            if(data){
                dispatch(receivePostsSuccessAction(data));
            }else{
                dispatch(receivePostsFailureAction("error"));
            }
        });
}

這樣就可以像同步一樣發送action了，即：

dispatch(fetchPosts());

接下來只需靜靜等待view的更新就行了，這樣就實現了整個Redux的異步流程。

本篇到此告一段落，下一篇介紹React與Redux整合技術。

Redux 中文文檔
Redux 入門教程-阮一峰