# thunk MIDDLEWARE 好棒棒
---
---
---
# thunk MIDDLEWARE 目的
處理非同步 fucntion 如各種 API
---
# thunk MIDDLEWARE 步驟
- 寫一個MIDDLEWARE 處理非同步function
- 處理非同步function
- 根據 STATE 改變 VIEW 值
---
# 寫一個 MIDDLEWARE 處理非同步function
非同步function需等待API回傳，故MIDDLEWARE需能等回傳後再次讓 DISPATCHER 接著做事
```
const thunk = store => next => action => {
if(typeof action === 'function'){
action(store.dispatch, store.getState());
}else{
next(action);
}
}
```
---
# 處理非同步function
```
var asyncIncrease = (dispatch, state) => {
dispatch({type:"INCREMENT_LOADING"});
_fakeServerApi.increaseCount(state.count.result,
data => dispatch({ type: 'INCREMENT' }));
}
```
---
# 模擬API延遲幾秒後處理function
```
var _fakeServerApi = {
// imitate the server API
increaseCount : ( currentCount, cb ) =>
setTimeout(()=> cb(currentCount + 1), 5000)
}
```
---
# 用真的API達成非同步
```
var getRandomImages = (dispatch, state) => {
dispatch({ type: 'IMAGES_LOADING' });
var imgurAPI = "https://api.imgur.com/3/gallery/random/random/1";
$.getJSON(imgurAPI).done(data => dispatch({ type: 'IMAGES', data:data.data}))
}
```
---
# 根據 STATE 改變 VIEW 值
定義要在VIEW顯示的值為變數status，待API回傳後讓STATE更新stauts
```
if(state.count.loading){
$('
---
#status').text("is loading...");
}else{
$('
---
#status').text("loaded");
}
```
---
# [thunk 是你非同步的好朋友](https://github.com/gaearon/redux-thunk)
- 好好利用，讓debug之路順暢
- 好好利用，讓VIEW聽話
- 好好利用，讓UX提升
{"metaMigratedAt":"2023-06-14T12:09:53.532Z","metaMigratedFrom":"Content","title":"thunk MIDDLEWARE 好棒棒","breaks":true,"contributors":"[]"}