最近狀態不太好，學習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：
//執行非同步期間
//非同步成功
//非同步失敗
好了，我們現在已經明確，在發起非同步的時候乙個action，執行完非同步後乙個action。但是，具體乙個非同步怎麼操作呢？
我一開始的想法是在元件中的自定義方法裡，寫非同步的**。發起ajax或promise，在**裡dispatch(action)來更新檢視。但文件裡給出了不一樣的思路。
它將非同步操作的**封裝到乙個action creator的返回值中！！！
nani？？？？
而非同步操作，同樣被歸類為一種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
2 import thunk from 'redux-thunk';
34 let store =createstore(
5reducer,
67 )
actioncreator.js
1 export const fetchweather = (citycode)=>.html`;4dispatch(fetchweatherstarted());
5 console.log('now show waiting')
6 fetch(apiurl).then((response)=>
10 response.json().then((responsejson)=>
14 ).catch((error)=>);
1718 }).catch((error)=>
21);
22};
23 }
在actioncreator.js中，fetchweather函式返回的不是乙個js物件，而是乙個函式
這個函式的可以有兩個引數dispatch和getstate，都是store的成員方法。這個函式執行的是乙個非同步操作，fetch一段資料，在fetch之前發出乙個pending action，成功後再發出乙個success action。
中介軟體其實有很多，還有redux-promise等。
redux-thunk是最常用的非同步中介軟體，它讓disptach能接收函式作為引數，使得我們能在actioncreator中返回乙個函式，在這個函式中設計非同步操作，並在非同步操作的開始和結束時刻傳送action來控制檢視的渲染。
Redux非同步方案實現
一 不借用第三方庫實現redux非同步 場景建立 先來個很常見的場景，在http請求之前我們一般會用loading元件來表示資料正在請求，等http請求結束就關閉loading。下圖所示的是http請求的3種狀態 上述場景如果不使用redux狀態管理器，我們會使用react的state或hooks特...
Redux 處理非同步 Action
redux promise utils是乙個基於redux thunk和redux actions的工具，符合 fsa 規範，方便開發者處理非同步 action，減少大量冗餘的 template redux 一開始的設計就是用於處理同步的 action。通過呼叫 action 函式後 dispatc...
Redux 的非同步資料獲取
第一步，定義乙個 action 方法用於獲取資料 引入actiontype宣告 import from actiontypes 引入axios工具 import from utils service 定義獲取資料的介面 const loginapi api user login 定義action方法...