Redux 續(xù)集 | 如何搞定其中的異步操作？
(????)??嗨，我是你穩(wěn)定更新、持續(xù)輸出的勾勾。
做 React 開發(fā)的小伙伴，Redux 操作肯定特別熟練。
那么問題來了，如果此時(shí)的 action 是個(gè)異步方法，你該怎么辦？
答案是中間件解決方案。
很開心的是，Redux 本身也考慮了這一點(diǎn)，它給我們提供了 applyMiddleware 這個(gè)中間件接口。
而對于中間件的理解，它就是一個(gè)代碼管道。代碼在執(zhí)行的過程會(huì)經(jīng)過這個(gè)管道，那這樣的話，在管道里我們就可以做很多很多自己想做的事。
統(tǒng)一標(biāo)準(zhǔn)
Redux 作者也很聰明，不可能讓開發(fā)者隨意去寫入代碼，因此他給了統(tǒng)一寫法，不按照該寫法是要報(bào)錯(cuò)哦。
該中間件是一個(gè)高階函數(shù)，它的返回值必須是一個(gè)函數(shù)
中間件函數(shù)以 store 中的 dispatch 和 getState 作為函數(shù)參數(shù)
一個(gè)簡易的中間件代碼如下：
let logger = function({getState,dispatch}){ //中間件函數(shù)return function(next){return function(action){console.log('will dispatch', action)let asd = next(action)}}}
簡化后的代碼：
let logger = ({getState,dispatch}) => (next) => (action) =>{console.log('will dispatch', action)next(action)}
那對于異步的代碼我們放在這個(gè)函數(shù)內(nèi)執(zhí)行就行。
如何使用 applyMiddleware
對于 applyMiddleware 的使用就更簡單了，使用方法如下：
let store = createStore(reducers,applyMiddleware(logger))
就是把 applyMiddleware 當(dāng)作 createStore 的第二個(gè)參數(shù)。
這里提示一下，applyMiddleware 的參數(shù)可以傳入很多中間件函數(shù)，他們的執(zhí)行順序是從左往右，逐個(gè)函數(shù)執(zhí)行。
代碼雖少，卻是 Redux 中的一道坎，希望可以幫助正在頭疼 Redux 異步如何處理的小伙伴們(? ?_?)?。
推薦閱讀：
技術(shù)人年度總結(jié) | 2020，注定不平凡
前端人因?yàn)?Vue3 的 Ref-sugar 提案打起來了！
點(diǎn)點(diǎn)“贊”和“在看”，保護(hù)頭發(fā)，減少bug。