簡單粗暴實現redux的thunk和promise中間件

jzman 發布于2019-08-21 17:19 / 3119人閱讀

摘要：改造基于我們之前實現的簡單對于它的函數進行處理。我們規定要把對象放入屬性中。一個簡易的異步處理方法已經實現了。但是反觀對的改造沒有什么統一性代碼很難維護和擴展是可以配置中間件來擴展配置的。

文章地址

異步處理

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

改造 dispatch

基于我們之前實現的簡單 redux, 對于它的 dispatch 函數進行處理。使它具有處理我們異步邏輯的能力。

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

加入 Thunk 能力

    
    ...
    const dispatch1 = store.dispatch
    store.dispatch = arg => {
        if (typeof arg === "function") return arg(store.dispatch, getState)
        dispatch1(arg)
    }
    ...

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

加入處理 Promise 能力

其實上面的 thunk 我們已經有了處理異步的能力, 但是每次我們要自己去手動觸發三個 action, 工作量還是很大的。現在 ajax 很多都會包裝為 promise 對象, 因此我們可以對與 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)
        }
    }
    ...

我們規定 action 要把 promise 對象放入 payload 屬性中。當接收到 payload 屬性為 promise 對象的 action 時候, 我們這里硬編碼直接觸發該 type 加 _PENDDING 事件。等到該 promise 狀態改變后, 我們根據它成功與否分別觸發 _SUCCESS 和 _ERROR 事件, 這樣我們就可以把異步邏輯包裝為 promise 對象放在 action 中, 然后我們在 reducer 中分別處理這幾種類型的事件即可。

測試和思考

我們現在可以在項目(reacts-ggsddu)中分別去 dispatch 一個函數和一個帶有 promise 對象的 action 可以看到分別的請求效果。一個簡易的異步處理方法已經實現了。

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

GPU云服務器云服務器 jquery_promise實現 js實現的簡單特效用c實現簡單的shell java實現簡單的web服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89380.html

Redux 進階 - react 全家桶學習筆記（二）

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

Godtoy 2019-08-23 10:58 評論0 收藏0
精益 React 學習指南（Lean React）- 3.4 掌控 redux 異步

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

JouyPub 2019-08-19 18:36 評論0 收藏0
Redux異步中間件

摘要：是官方文檔中用到的異步組件，實質就是一個中間件，簡單來說就是一個封裝表達式的函數，封裝的目的是延遲執行表達式。這時我們需要對一般異步中間件進行處理。曾經前端的革新是以Ajax的出現為分水嶺，現代應用中絕大部分頁面渲染會以異步流的方式進行。在Redux中，如果要發起異步請求，最合適的位置是在action creator中實現。但我們之前了解到的action都是同步情況，因此需要引入中間...

wums 2019-08-22 16:09 評論0 收藏0
react+redux+router異步數據獲取教程

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

Arno 2019-08-20 12:31 評論0 收藏0
重新設計 Redux

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

kidsamong 2019-08-22 18:06 評論0 收藏0