摘要：異步實(shí)現(xiàn)設(shè)計(jì)需要增加三種通知異步請(qǐng)求發(fā)起的異步請(qǐng)求成功的異步請(qǐng)求失敗的示例代碼如下返回參數(shù)完全可以自定義。這種分別在請(qǐng)求開(kāi)始前，請(qǐng)求成功后，請(qǐng)求失敗后發(fā)送。表示數(shù)據(jù)的有效性，他的作用是在異步請(qǐng)求發(fā)送失敗后，告訴當(dāng)前的數(shù)據(jù)是過(guò)時(shí)的數(shù)據(jù)。

說(shuō)明：對(duì)Redux不了解的同學(xué)可先看看這篇文章Redux技術(shù)架構(gòu)簡(jiǎn)介（一）

這里說(shuō)的Redux異步實(shí)現(xiàn)，是專(zhuān)指Redux中的異步Action實(shí)現(xiàn)，而不是指應(yīng)用的異步實(shí)現(xiàn)，因?yàn)镽edux本身只支持同步action，即發(fā)送action，state立即更新；那如果我在發(fā)送一個(gè)action后，需要state過(guò)一段時(shí)間再更新呢？按正常的思路redux是無(wú)法處理這種情況的，下面就來(lái)看看異步Action是如何實(shí)現(xiàn)的吧！

需要提的一點(diǎn)是，其實(shí)完全可以將異步邏輯寫(xiě)在View中，然后在回調(diào)函數(shù)中發(fā)送action。但是如果你要配合react一起使用，這樣做就違背了react-redux的設(shè)計(jì)思想，即UI與邏輯的分離（具體的實(shí)現(xiàn)可以在下一篇文章中看到），而且當(dāng)存在多個(gè)異步請(qǐng)求時(shí)也很難將異步邏輯抽象出來(lái)，所以異步邏輯應(yīng)該由Redux架構(gòu)實(shí)現(xiàn)，這樣也就必須實(shí)現(xiàn)發(fā)送異步action了

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

中間件執(zhí)行的時(shí)機(jī)是在action發(fā)起之后，reducer執(zhí)行之前。

即在dispatch一個(gè)action之后，經(jīng)過(guò)一系列的中間件處理過(guò)程，再進(jìn)行reducer。

本質(zhì)上，中間件就是對(duì)dispatch函數(shù)的改造。當(dāng)執(zhí)行dispatch(action)時(shí)，會(huì)先調(diào)用中間件，進(jìn)行一些內(nèi)部邏輯處理，如：添加日志等，之后再執(zhí)行dispatch。如果要支持中間件的鏈?zhǔn)秸{(diào)用，必須再返回一個(gè)dispatch。
下面是中間件的簡(jiǎn)單實(shí)現(xiàn)：

function logger(store) {
  // 這里的 next 必須指向前一個(gè) middleware 返回的函數(shù)：
  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改造成可以接受函數(shù)作為參數(shù)的中間件
import indexPhotomainReducer from "../reducer/indexPhotomainReducer";

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

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

需要增加三種action

通知異步請(qǐng)求發(fā)起的action

異步請(qǐng)求成功的action

異步請(qǐng)求失敗的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
 };
}

返回參數(shù)完全可以自定義。這3種action分別在請(qǐng)求開(kāi)始前，請(qǐng)求成功后，請(qǐng)求失敗后發(fā)送。
## （2） State設(shè)計(jì)
為了配合異步Action，可以在state樹(shù)中增加2個(gè)屬性：

isFetching:表示是否正在處理異步請(qǐng)求。

isValidate:表示數(shù)據(jù)的有效性，他的作用是在異步請(qǐng)求發(fā)送失敗后，告訴View當(dāng)前state的數(shù)據(jù)是過(guò)時(shí)的數(shù)據(jù)。

State屬性可以憑自己喜好隨意設(shè)計(jì)。設(shè)計(jì)好后可以這樣編寫(xiě)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;
    }
}

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

//定義一個(gè)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"));
            }
        });
}

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

dispatch(fetchPosts());

接下來(lái)只需靜靜等待view的更新就行了，這樣就實(shí)現(xiàn)了整個(gè)Redux的異步流程。

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

Redux 中文文檔
Redux 入門(mén)教程-阮一峰