成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

簡(jiǎn)單粗暴實(shí)現(xiàn)redux的thunk和promise中間件

jzman / 3122人閱讀

摘要：改造基于我們之前實(shí)現(xiàn)的簡(jiǎn)單對(duì)于它的函數(shù)進(jìn)行處理。我們規(guī)定要把對(duì)象放入屬性中。一個(gè)簡(jiǎn)易的異步處理方法已經(jīng)實(shí)現(xiàn)了。但是反觀對(duì)的改造沒有什么統(tǒng)一性代碼很難維護(hù)和擴(kuò)展是可以配置中間件來擴(kuò)展配置的。

文章地址

異步處理

我們使用 redux 處理數(shù)據(jù)流時(shí)候, 一個(gè)比較令人頭疼的問題就是關(guān)于異步操作。Action 發(fā)出以后，過一段時(shí)間再執(zhí)行 Reducer，這就是異步。在哪個(gè)階段處理異步, Reducer 作為一個(gè)純函數(shù), 不適合承擔(dān)此類功能, 理論上也承擔(dān)不了, Action 存放一個(gè)對(duì)象, 作為消息的載體自己更不能進(jìn)行異步操作。想一想就發(fā)現(xiàn)可以在 dispatch 這個(gè)發(fā)送 Action 的方法上做文章。如果我們能在異步操作的不同階段發(fā)送不同的 Action 我們就可以完成異步操作了。

改造 dispatch

基于我們之前實(shí)現(xiàn)的簡(jiǎn)單 redux, 對(duì)于它的 dispatch 函數(shù)進(jìn)行處理。使它具有處理我們異步邏輯的能力。

有時(shí)候看源碼總能感覺到作者對(duì)代碼邏輯處理的很優(yōu)雅, 以及對(duì)于功能的可擴(kuò)展性把握的很好，但是往往這些優(yōu)美的代碼，理解起來需要很多其他方面的知識(shí)基礎(chǔ), 這也是很多人看源碼困難很大的原因。我們這里對(duì)與 redux 中間件的處理在后續(xù)再去討論, 這里我們就以一種比較蠢的方法簡(jiǎn)單粗暴的實(shí)現(xiàn)我們想要的功能

加入 Thunk 能力 
    
    ...
    const dispatch1 = store.dispatch
    store.dispatch = arg => {
        if (typeof arg === "function") return arg(store.dispatch, getState)
        dispatch1(arg)
    }
    ...

這里邏輯異常簡(jiǎn)單, 先把原來的 dispatch 函數(shù)存儲(chǔ)起來, 判斷 dispatch 傳入的參數(shù)類型, 如果參數(shù)類型為 function 則執(zhí)行改函數(shù)并返回, 傳入 store 的 dispatch 和 getState 作為參數(shù), 使得 dispatch 具有處理函數(shù)參數(shù)的能力。

加入處理 Promise 能力

其實(shí)上面的 thunk 我們已經(jīng)有了處理異步的能力, 但是每次我們要自己去手動(dòng)觸發(fā)三個(gè) action, 工作量還是很大的。現(xiàn)在 ajax 很多都會(huì)包裝為 promise 對(duì)象, 因此我們可以對(duì)與 dispatch 增加一層判斷, 使得它具有處理具有 promise 屬性的 action 的能力。

    
    ...
    const dispatch2 = store.dispatch
    
    store.dispatch = action => {
        if (isPromise(action.payload)) {
            const { type, payload, params } = action
            dispatch2({
                type: `${type}_PENDDING`,
                params
            })
            payload.then(
                resolve => {
                    dispatch2({
                        type: `${type}_SUCCESS`,
                        content: resolve,
                        params
                    })
                },
                reject => {
                    dispatch2({
                        type: `${type}_ERROR`,
                        content: reject,
                        params
                    })
                }
            )
        } else {
            dispatch2(action)
        }
    }
    ...

我們規(guī)定 action 要把 promise 對(duì)象放入 payload 屬性中。當(dāng)接收到 payload 屬性為 promise 對(duì)象的 action 時(shí)候, 我們這里硬編碼直接觸發(fā)該 type 加 _PENDDING 事件。等到該 promise 狀態(tài)改變后, 我們根據(jù)它成功與否分別觸發(fā) _SUCCESS 和 _ERROR 事件, 這樣我們就可以把異步邏輯包裝為 promise 對(duì)象放在 action 中, 然后我們?cè)?reducer 中分別處理這幾種類型的事件即可。

測(cè)試和思考

我們現(xiàn)在可以在項(xiàng)目(reacts-ggsddu)中分別去 dispatch 一個(gè)函數(shù)和一個(gè)帶有 promise 對(duì)象的 action 可以看到分別的請(qǐng)求效果。 一個(gè)簡(jiǎn)易的異步處理方法已經(jīng)實(shí)現(xiàn)了。

但是反觀對(duì) dispatch 的改造沒有什么統(tǒng)一性, 代碼很難維護(hù)和擴(kuò)展, redux 是可以配置中間件來擴(kuò)展配置的。我們后面再去研究。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89380.html

相關(guān)文章

  • Redux 進(jìn)階 - react 全家桶學(xué)習(xí)筆記（二）

    摘要：在函數(shù)式編程中，異步操作修改全局變量等與函數(shù)外部環(huán)境發(fā)生的交互叫做副作用通常認(rèn)為這些操作是邪惡骯臟的，并且也是導(dǎo)致的源頭。 注：這篇是17年1月的文章，搬運(yùn)自本人 blog... https://github.com/BuptStEve/... 零、前言 在上一篇中介紹了 Redux 的各項(xiàng)基礎(chǔ) api。接著一步一步地介紹如何與 React 進(jìn)行結(jié)合，并從引入過程中遇到的各個(gè)痛點(diǎn)引出 ...

    Godtoy 評(píng)論0 收藏0

  • 精益 React 學(xué)習(xí)指南 （Lean React）- 3.4 掌控 redux 異步

    摘要：舉例來說一個(gè)異步的請(qǐng)求場(chǎng)景，可以如下實(shí)現(xiàn)任何異步的邏輯都可以，如等等也可以使用的和。實(shí)際上在中，一個(gè)就是一個(gè)函數(shù)。 書籍完整目錄 3.4 redux 異步 showImg(https://segmentfault.com/img/bVyou8); 在大多數(shù)的前端業(yè)務(wù)場(chǎng)景中，需要和后端產(chǎn)生異步交互，在本節(jié)中，將詳細(xì)講解 redux 中的異步方案以及一些異步第三方組件，內(nèi)容有： redu...

    JouyPub 評(píng)論0 收藏0

  • Redux異步中間件

    摘要：是官方文檔中用到的異步組件，實(shí)質(zhì)就是一個(gè)中間件，簡(jiǎn)單來說就是一個(gè)封裝表達(dá)式的函數(shù)，封裝的目的是延遲執(zhí)行表達(dá)式。這時(shí)我們需要對(duì)一般異步中間件進(jìn)行處理。 曾經(jīng)前端的革新是以Ajax的出現(xiàn)為分水嶺，現(xiàn)代應(yīng)用中絕大部分頁(yè)面渲染會(huì)以異步流的方式進(jìn)行。在Redux中，如果要發(fā)起異步請(qǐng)求，最合適的位置是在action creator中實(shí)現(xiàn)。但我們之前了解到的action都是同步情況，因此需要引入中間...

    wums 評(píng)論0 收藏0

  • react+redux+router異步數(shù)據(jù)獲取教程

    摘要：寫法一，返回值是一個(gè)對(duì)象。我們已經(jīng)知道，中間件只關(guān)注函數(shù)的傳遞，而且也不關(guān)心函數(shù)的返回值，所以只需要讓認(rèn)識(shí)這個(gè)函數(shù)就可以了。 react的FLUX數(shù)據(jù)流一直搞不清楚，他不像Angular的雙向數(shù)據(jù)綁定，做一個(gè)model獲取數(shù)據(jù)，然后通過controller來管理view上的數(shù)據(jù)顯示就可以了。單項(xiàng)數(shù)據(jù)流引入了太多的概念，state、action、reducer、dispatch。就算看的...

    Arno 評(píng)論0 收藏0

  • 重新設(shè)計(jì) Redux

    摘要：相關(guān)狀態(tài)父組件傳遞給子組件的狀態(tài)。外部狀態(tài)狀態(tài)是可以從視圖庫(kù)中移出來的，然后可以使用提供者消費(fèi)者模式把狀態(tài)重新連接回視圖庫(kù)。重新設(shè)計(jì)在我看來，重寫是有其必要性的，至少有以下個(gè)方面可以改進(jìn)得更友好。 Redux 學(xué)習(xí)起來很困難？寫起代碼來很啰嗦？一起來看看 Rematch 的作者對(duì) Redux 的思考和簡(jiǎn)化吧~ 原文：《Redesigning Redux》, Shawn McKay 都過...

    kidsamong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<