redux-thunk 是一個比較流行的 redux 異步 action 中間件剧防，比如 action 中有 ****setTimeout**** 或者通過 ****fetch****通用遠程 API 這些場景，那么久應(yīng)該使用 redux-thunk 了。redux-thunk 幫助你統(tǒng)一了異步和同步 action 的調(diào)用方式腿堤，把異步過程放在 action 級別解決排龄，對 component 沒有影響波势。下面通過例子一步步來看看。
異步方法的調(diào)用
store.dispatch({ type: 'SHOW_NOTIFICATION', text: 'You logged in.' })
setTimeout(() => {
store.dispatch({ type: 'HIDE_NOTIFICATION' })
}, 5000)
這是一個簡單的例子橄维，他做事情很簡單尺铣，5s 后關(guān)閉提醒。
在一個被 redux connect 過的 component 中争舞，是如下這個樣子：
this.props.dispatch({ type: 'SHOW_NOTIFICATION', text: 'You logged in.' })
setTimeout(() => {
this.props.dispatch({ type: 'HIDE_NOTIFICATION' })
}, 5000)
本質(zhì)上兩者沒有區(qū)別迄埃，只是被 connect 過的 component 中的 ****this.props**** 有了 ****dispatch**** 屬性。
我們?yōu)榱嗽诓煌?component 中重用創(chuàng)建 action 的代碼兑障，會把他放到一個 action 的 JS 文件中侄非。
// actions.js
export function showNotification(text) {
return { type: 'SHOW_NOTIFICATION', text }
}
export function hideNotification() {
return { type: 'HIDE_NOTIFICATION' }
}
// component.js
import { showNotification, hideNotification } from '../actions'
this.props.dispatch(showNotification('You just logged in.'))
setTimeout(() => {
this.props.dispatch(hideNotification())
}, 5000)
當(dāng)然，如果我們用了 connect 的第二參數(shù)把這兩個方法綁定到 component 的 ****this.props**** 上流译，在調(diào)用時我們又省了一些代碼量逞怨，就像這樣了：
this.props.showNotification('You just logged in.')
setTimeout(() => {
this.props.hideNotification()
}, 5000)
看起來一切順利，現(xiàn)在有什么問題呢福澡？
- 在每個使用該功能的 component 中都要寫同樣的代碼叠赦。
- 如果兩個 notification 時間很接近，當(dāng)?shù)谝粋€結(jié)束了之后，dispatch 了 ****HIDE_NOTIIFICATION**** 把第二個也錯誤的關(guān)閉了除秀。
// actions.js
function showNotification(id, text) {
return { type: 'SHOW_NOTIFICATION', id, text }
}
function hideNotification(id) {
return { type: 'HIDE_NOTIFICATION', id }
}
let nextNotificationId = 0
export function showNotificationWithTimeout(dispatch, text) {
// Assigning IDs to notifications lets reducer ignore HIDE_NOTIFICATION
// for the notification that is not currently visible.
// Alternatively, we could store the interval ID and call
// clearInterval(), but we’d still want to do it in a single place.
const id = nextNotificationId++
dispatch(showNotification(id, text))
setTimeout(() => {
dispatch(hideNotification(id))
}, 5000)
}
為了解決上述問題糯累，我們把這部分邏輯也放到了 action ，并引入了 ID 來解決問題2.
我們愉快的用下面的代碼調(diào)用起來：
// component.js
showNotificationWithTimeout(this.props.dispatch, 'You just logged in.')
// otherComponent.js
showNotificationWithTimeout(this.props.dispatch, 'You just logged out.')
我們通過參數(shù)把 ****dispatch****傳入了進去册踩，實際上一般 component 都會有 ****this.props.dispatch ****泳姐，但是通常為了測試和 mock 方便，還是傳入進去比較好一點暂吉。
// store.js
export default createStore(reducer)
// actions.js
import store from './store'
// ...
let nextNotificationId = 0
export function showNotificationWithTimeout(text) {
const id = nextNotificationId++
store.dispatch(showNotification(id, text))
setTimeout(() => {
store.dispatch(hideNotification(id))
}, 5000)
}
// component.js
showNotificationWithTimeout('You just logged in.')
// otherComponent.js
showNotificationWithTimeout('You just logged out.')
如果你的 store 是全局的也可以這么干胖秒，不過這樣在 server render 中就不好用了，server render 一般是一個 request 一個 store慕的。
而且一樣的對測試和 mock 都不友好阎肝。
引入 redux-thunk
到目前為止，我們還沒有引入 redux-thunk 呢肮街，那我們?yōu)槭裁匆?redux-thunk 呢风题？如果你是個小應(yīng)用，那大可不必使用嫉父，如果是個大應(yīng)用俯邓，接著往下看，we talk about redux-thunk.
問題在哪熔号？
我們一定要傳入**** dispatch**** 稽鞭，參考 separate container and presentational components ，我們很難在一個 presentational component 中使用 ****showNotificationWithTimeout()**** ,因為不一定有 ****this.props.dispatch****引镊。
****showNotificationWithTimeout()**** 不能被 connect 方法綁定到 ****this.props****朦蕴，因為他不返回一個 redux action.
****showNotificationWithTimeout()**** 僅僅是一個 helper 方法，他和 ****showNotification**** 同時存在弟头，很容就用錯了吩抓。
redux-thunk 怎么做的？
/ actions.js
function showNotification(id, text) {
return { type: 'SHOW_NOTIFICATION', id, text }
}
function hideNotification(id) {
return { type: 'HIDE_NOTIFICATION', id }
}
let nextNotificationId = 0
export function showNotificationWithTimeout(text) {
return function (dispatch) {
const id = nextNotificationId++
dispatch(showNotification(id, text))
setTimeout(() => {
dispatch(hideNotification(id))
}, 5000)
}
}
- 如果 redux-thunk 發(fā)現(xiàn) dispatch 了一個函數(shù) ****dispatch(showNotificationWithTimeout('log in'))****赴恨，他會傳給函數(shù)一個****dispatch**** 參數(shù)疹娶，這解決了 dispatch 不好獲取的問題。
- 他會自己「吃掉」這個函數(shù)伦连，不會傳遞給 reduces雨饺，防止 reduces 遇到一個函數(shù)而不知所措。
我們怎么調(diào)用 ****showNotificationWithTimeout()****呢惑淳？
// component.js
this.props.dispatch(showNotificationWithTimeout('You just logged in.'))
我們可以看到额港，dispatch 一個異步 action 和 dispatch 一個同步的 action 是一致的，component 不用關(guān)系這個 action 是異步還是同步的歧焦，你可以在任何時間修改他移斩。
通過 connect 綁定了這個方法后，完整的例子如下：
// actions.js
function showNotification(id, text) { return { type: 'SHOW*NOTIFICATION', id, text } } function hideNotification(id) { return { type: 'HIDE*NOTIFICATION', id } }
let nextNotificationId = 0 export function showNotificationWithTimeout(text) { return function (dispatch) { const id = nextNotificationId++ dispatch(showNotification(id, text))
setTimeout(() => {
dispatch(hideNotification(id))
}, 5000)
}}
// component.js
import { connect } from 'react-redux'
// ...
this.props.showNotificationWithTimeout('You just logged in.')
// ...
export default connect( mapStateToProps, { showNotificationWithTimeout } )(MyComponent) ```
#在 Trunk 中讀取狀態(tài)
有時我們會遇到需要知道當(dāng)前狀態(tài)的情況，除了傳入 ****dispatch****參數(shù), 還會把 ****getState****作為第二個參數(shù)傳入向瓷，放個例子感受一下：
let nextNotificationId = 0
export function showNotificationWithTimeout(text) {
return function (dispatch, getState) {
// Unlike in a regular action creator, we can exit early in a thunk
// Redux doesn’t care about its return value (or lack of it)
if (!getState().areNotificationsEnabled) {
return
}
const id = nextNotificationId++
dispatch(showNotification(id, text))
setTimeout(() => {
dispatch(hideNotification(id))
}, 5000)
}
}
一般場景是斷路器的場景肠套，如果某個遠程調(diào)用之前查詢一下 cache 等，如果僅僅是用來區(qū)分 dispatch 哪個 action猖任，還是把他放到 reducers 更適合你稚。