• React組件訪問服務器的方式
• Redux架構(gòu)下訪問服務器的方式

一、React組件訪問服務器

南山網(wǎng)站建設公司創(chuàng)新互聯(lián),南山網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為南山千余家提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設要多少錢，請找那個售后服務好的南山做網(wǎng)站的公司定做！

1. 代理功能訪問API
   

2. React組件訪問服務器的生命周期

以顯示天氣預報為示例：

• 通過服務器API獲得天氣情況數(shù)據(jù)
• 展示天氣情況數(shù)據(jù)

分兩個步驟完成：
（1）在裝載過程中，因為weather組件并沒有獲得服務器結(jié)果，就不顯示結(jié)果?；蛘唢@示一個’正在裝載‘之類的提示信息，但weather組件這時候要發(fā)出對服務器的請求。
（2）獲取到天氣數(shù)據(jù)之后，顯示出來

在裝載過程中，通常我們在組件的componentDidMount函數(shù)中做請求服務器的事情。

3. React組件訪問服務器的優(yōu)缺點
   將狀態(tài)放在組件中不是很好的選擇，尤其是當組件變得復雜龐大了之后。Redux是用來幫助管理應用狀態(tài)的，應該盡量把狀態(tài)存放在Redux Store的狀態(tài)中，而不是放在React組件中。

二、Redux訪問服務器

1. Redux-thunk中間件
   使用Redux訪問服務器，同樣要解決的是異步問題。
   Redux的單向數(shù)據(jù)流是同步操作，驅(qū)動Redux流程的是action對象，每一個action對象被派發(fā)到Store上之后，同步的被分配給所有的reducer函數(shù)，每個reducer都是純函數(shù)，純函數(shù)不產(chǎn)生任何副作用，自然是完成數(shù)據(jù)操作之后立刻同步返回，reducer返回的結(jié)果又被同步的拿去更新Store上的狀態(tài)數(shù)據(jù)，更新狀態(tài)數(shù)據(jù)的操作會立即被同步給監(jiān)聽Store狀態(tài)改變的函數(shù)，從而引發(fā)作為視圖的React組件更新過程。
   在這個過程中，Redux-chunk可以作為Redux中異步操作的方法之一。
   按照Redux-chunk的想法，在Redux的單向數(shù)據(jù)流中，在action對象被reducer函數(shù)處理之前，是插入異步功能的時機。
   在Redux架構(gòu)下，一個action對象在通過store.dispatch派發(fā)，在調(diào)用reducer函數(shù)之前，會先經(jīng)過一個中間件環(huán)節(jié)，這就是產(chǎn)生異步操作的時機，實際上Redux-chunk提供的就是一個Redux中間件，我們需要在創(chuàng)建store時用上這個中間件。
   

2. 異步action對象
   當我們想要讓Redux幫忙處理一個異步操作的時候，代碼一樣也要派發(fā)一個action對象，畢竟Redux單向數(shù)據(jù)流就是由action對象驅(qū)動的，但是這個引發(fā)異步操作的action對象比較特殊，我們叫他們’異步action對象‘。
   有了redux-chunk中間件之后，這些action對象根本沒有機會觸及到reducer函數(shù)，在中間件一層就被redux-chunk截獲。
   redux-chunk的工作是檢查action對象是不是函數(shù)，如果不是函數(shù)就放行，完成普通action對象的生命周期，而如果發(fā)現(xiàn)action對象是函數(shù)，那就執(zhí)行這個函數(shù)，并把Store的dispatch函數(shù)和getState函數(shù)作為參數(shù)傳遞到函數(shù)中去，處理過程到此為止，不會讓這個異步action對象繼續(xù)往前派發(fā)到reducer函數(shù)。

3. 異步操作的模式
   一個訪問服務器的action，至少要涉及3個action類型：

   • 表示異步操作已經(jīng)開始的action類型，例如：表示一個請求天氣信息的API請求已經(jīng)發(fā)送給服務器的狀態(tài)；
   • 表是異步操作成功的action類型，請求天氣信息的API調(diào)用獲得了正確的結(jié)果，就會引發(fā)這種類型的action；
   • 表示異步操作失敗的action類型，請求天氣信息的API調(diào)用任何一個環(huán)節(jié)出了錯誤，無論是網(wǎng)絡錯誤、本地代理服務錯誤還是遠程服務器返回的結(jié)果錯誤，都會引發(fā)這個類型的action。
     當這三種類型的action對象被派發(fā)時，會讓React組件進入各自不同的三種狀態(tài)，如：
   • 異步操作正在進行中
   • 異步操作已經(jīng)成功完成
   • 任務操作已經(jīng)失敗
4. 異步操作的終止
   拿天氣預報的例子舉例：
   從用戶角度出發(fā)，當連續(xù)選擇城市的時候，總是希望顯示最后一次選中的城市信息，也就是說，一個更好的辦法是在發(fā)出API請求的時候，將之前的API請求全部終止作廢，這樣就保證了獲得的有效結(jié)果絕對是用戶的最后一次選擇結(jié)果。

三、如何挑選異步操作方式

1. 在Redux的單向數(shù)據(jù)流中，什么時機插入異步操作？
   Redux的數(shù)據(jù)流轉(zhuǎn)完全靠action來驅(qū)動，對于redux-chunk，切入異步操作的時機是在中間件中，但這并不是唯一的位置。
   通過定制化Store Enhancer，可以在action派發(fā)路徑上任何一個位置插入異步操作，甚至作為純函數(shù)的reducer都可以幫助實現(xiàn)異步操作。異步操作本身就是一種副作用，reducer的執(zhí)行過程當然不應該產(chǎn)生異步操作，但是reducer函數(shù)的返回值卻可以包含對異步操作的’指示‘，也就是說，reducer返回的結(jié)果可以用純數(shù)據(jù)的方式表示需要發(fā)起一個對服務器資源的訪問，由reducer調(diào)用者去真正執(zhí)行這個訪問服務器資源的操作，這樣不違背reducer是一個純函數(shù)的原則。

2. 對應庫的大小如何？
   幾KB-幾十KB

3. 學習曲線是不是太陡？
   如果一個應用只有一個簡單的API請求，使用redux-thunk能解決的話就使用redux-thunk。

4. 是否會和其他的Redux庫沖突？
   可能會發(fā)生沖突，使用任何一個庫在Redux中實現(xiàn)異步操作，都需要多方面的考慮。

四、利用Promise實現(xiàn)異步操作
對于Promise在Redux庫中如何實現(xiàn)，相關(guān)的庫也很多，但是都很簡單，用一個Redux中間件就可以實現(xiàn)：

• redux-promise
• redux-promises
• redux-simple-promise
• redux-promise-middleware