Redux:異步操做

最近狀態不太好，學習redux的異步操做花的時間比想象的多，這裏儘可能清晰簡要的表述一下在redux中怎麼實現異步操做。

先回顧一下同步操做：

咱們用redux執行同步的時候，都是先發起一個dispatch（actionCreator()）

    1.先在actionCreator()中生成一個action對象。

    2.由dispatch方法將action傳到reducer。

    3.reducer中計算新state

    4.新state保存到store中

    5.由於容器組件將state做爲props傳給展現組件，state更新後，展現組件渲染更新的部分（由於props更新了）

如何實現異步操做：

    當咱們發起一個異步任務時，咱們會注意兩個時間點：

    1.發起異步任務的時刻（pending）

    2.異步任務執行完的時刻（success || failure）

    ！！在咱們發起異步操做，即pending的時候，咱們每每要在頁面上做出提示，告訴用戶「資源正在加載，請等候」。

    ！！在異步操做完成後，咱們也每每要將返回的data在頁面上渲染，可能數據已經成功獲取，也可能獲取失敗。

因此，在執行異步操做的時候。一個基本的思路是：

    1.開始執行異步操做的時候，發出一個action，在頁面上提示「資源正在加載」

    2.等異步執行完後，再發起一個action，將須要的東西渲染出來。

因此，咱們須要準備三個action：

{type:fetching}  //執行異步期間

{type:fetching-success,result:responseText }  //異步成功

{type:fetching-error,error:error}  //異步失敗

好了，咱們如今已經明確，在發起異步的時候一個action，執行完異步後一個action。可是，具體一個異步怎麼操做呢？

我一開始的想法是在組件中的自定義方法裏，寫異步的代碼。發起ajax或promise，在回調裏dispatch(action)來更新視圖。但文檔裏給出了不同的思路。

它將異步操做的代碼封裝到一個action creator的返回值中！！！

nani？？？？

這大概是爲了貫徹redux的理念。app中的各部分都有純粹而限定的職責，reducer只負責計算新state、P組件只負責渲染、C組件只負責獲取update後的state和disptach方法傳遞給P組件。

而異步操做，一樣被歸類爲一種action（action可能會改變state）。因此異步操做的代碼被放到action creator的返回值裏。

可是dispatch方法只能接收js對象呀。

這就須要用到一箇中間件----redux-thunk

咱們知道，在使用dispatch方法傳送一個action給reducer的時候，這個過程是同步的。一旦reducer獲取action，就一路執行，直到state更新。

因此咱們要在action到達reducer以前，實現異步的代碼。這就用到了中間件redux-thunk。

redux-thunk讓dispatch方法能夠接收函數做爲參數，並執行判斷：

  若是是js對象，直接送到reducer。

  若是是函數，執行它（至關於截獲了它）。因此這個函數咱們設計爲一個異步操做，先發出一個action表示「正在異步」，等操做完成再dispatch一次action表示「異步完成」

下面是實例：

index.js

1 import { createStore, applyMiddleware } from 'redux';
2 import thunk from 'redux-thunk';
3 
4 let store = createStore(
5   Reducer,
6   applyMiddleware(thunk)
7   )

actionCreator.js

 1 export const fetchWeather = (cityCode)=>{
 2   return (dispatch)=>{
 3   const apiurl = `/data/cityinfo/${cityCode}.html`;
 4   dispatch(fetchWeatherStarted());
 5   console.log('now show waiting')
 6   fetch(apiurl).then((response)=>{
 7   if(response.status!==200){
 8       throw new Error('Fail');
 9   }
10   response.json().then((responseJson)=>{
11     dispatch(fetchWeatherSuccess(responseJson.weatherinfo));
12 
13   }
14       ).catch((error)=>{
15           throw new Error('Invalid json response');
16       });
17 
18   }).catch((error)=>{
19     dispatch(fetchWeatherFailure);
20   }
21       );
22   };
23   }

在actionCreator.js中，fetchWeather函數返回的不是一個js對象，而是一個函數

這個函數的能夠有兩個參數dispatch和getState，都是store的成員方法。這個函數執行的是一個異步操做，fetch一段數據，在fetch以前發出一個pending action，成功後再發出一個success action。

中間件其實有不少，還有redux-promise等。

redux-thunk是最經常使用的異步中間件，它讓disptach能接收函數做爲參數，使得咱們能在actionCreator中返回一個函數，在這個函數中設計異步操做，並在異步操做的開始和結束時刻發送action來控制視圖的渲染。

 附上一個知乎上的問題：Redux有哪些最佳實踐?