国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

簡單介紹redux的中間件

philadelphia / 1725人閱讀

摘要:改地方就是將塞進所有的中間件中,然后返回一個函數,而中間件的形式后面會說到。流程圖異步信息說道這里應該會對中間件有個大致的認識,接下來介紹一下常用的中間件以及自己寫一個中間件。

用過react的同學都知道在redux的存在,redux就是一種前端用來存儲數據的倉庫,并對改倉庫進行增刪改查操作的一種框架,它不僅僅適用于react,也使用于其他前端框架。研究過redux源碼的人都覺得該源碼很精妙,而本博文就針對redux中對中間件的處理進行介紹。

在講redux中間件之前,先用兩張圖來大致介紹一下redux的基本原理:

圖中就是redux的基本流程,這里就不細說。

一般在react中不僅僅利用redux,還利用到react-redux:

react-redux這里也不細說。

redux中間件
一般情況下,redux是不具備處理異步請求的能力,稚嫩溝通過間接或者添加中間件的方式,加強了對dispatch的能力,是的redux具備異步的能力;
一般來說,redux處理異步的方式有兩種:間接方式和中間件方式;

間接方式:

間接方式就死自定義異步的行為,保留dispatch同步的功能。
思路:就是講異步返回的結果塞進action中,然后在通過dispatch同步到reduce中,再改變state;

demo:

request.get(API)
       .then(d => {
           store.dispatch(type: xxx, playload: d)
       })

這種方式沒有破壞dispatch的同步機制,原汁原味的使用dispatch將數據同步到state中,但不好的地方就是每次調用都會寫很長的一段。

中間件方式

中間件方式中核心部分就是redux提供的applyMiddleWare這個高階函數,它通過多層調用后悔返回一個全新的store對象,全新的store對象和原來對象中,唯一的不同就是dispatch具備了異步的功能;
源碼:

const applyMiddleWare = (...middlewares) => createStore => (reducer, initState) =>{
    const store = createStore(reducer, initState);
    const _dispatch = store.dispatch;
    const MiddleWareAPI = {
        getState: store.getState,
        dispatch: action => _dispatch(action)   1)
    };
    const chain = [];
    chain = middlewares.map(middleware => {middleware(MiddleWareAPI)});  2)
    let dispatch = compose(...chain)(store.dispatch);   3)
    return {
        dispatch,
        ...store
    }
}

短短十幾行代碼,其中卻蘊含著不少精妙之處,博主選擇了其中三處地方進行分析其精妙之處:
1)MiddleWareAPI主要是通過塞進中間件,從而最終塞進action中,讓action能具備dispatch的能力,而這里為什么要用匿名函數,主要原因是因為要讓MiddleWareAPI.dispatch中的store和applyMiddleWare最終返回的store保持一致,要注意的是MiddleWareAPI.dispatch不是真正讓state改變,它可以理解為是action和中間件的一個橋梁。

2)改地方就是將MiddleWareAPI塞進所有的中間件中,然后返回一個函數,而中間件的形式后面會說到。

3)該地方是最為精妙之處,compose會將chain數組從右到左一次地柜注入到前一個中間件,而store.dispatch會注入到最右邊的一個的中間件。其實這里可以將compose理解為reduce函數。
eg:

M = [M1,M2,M3] ----> M1(M2(M3(store.dispatch)));

從這里其實就知道中間件大致是什么樣子的了:
中間件基本形式:

const MiddleWare = store => next => action => {
    ...
}

參數解釋:

store:其實就是MiddleWareAPI;

next: 這里有兩種情況,如果改中間件是在middlewares數組里最右邊,則next就是store.dispatch;否則就是它相鄰左邊的一個中間件返回值(閉包函數,就是action => {}這個函數);

action:可以是函數,也可以是含有promise的對象;

到這里可能會有些糊涂,糊涂的地方可能就是next和store.dispatch的區別分不清;
區別:
next(最右邊的中間件):其實是真正觸發reducer,改變state的dispatch,這里的dispatch和state是同步關系的;這里的action必須是一個對象,不能含有異步信息;

next(非最右邊的中間件):其實就是相鄰前一個中間件返回的函數(action => {...});這里的action就是上一級中間件next(action)中的action,第一個中間件的action就是項目中store.dispatch(action)中的action。

中間件中的store.dispatch:其實就是用來塞進action的,這里就理解為action和中間件通信的渠道吧。

流程圖:

demo:

export const MiddleForTest = store => next => action => {
    if (typeof action === "function") {
        action(store);
    } else {
        next(action);
    }
};

export const MiddleForTestTwo = store => next => action => {
    next(action);
};

export function AjaxAction(store) {
    setTimeout(function () {
        store.dispatch({
            type: "up",
            playload: "異步信息"
        })
    }, 1000)
}

store.dispatch(AjaxAction);

說道這里應該會對中間件有個大致的認識,接下來介紹一下常用的中間件以及自己寫一個中間件。

redux-thunk:主要是適用于action是一個函數的情況,它是對原有的中間件模式再封裝多一層,原則上是支持promise為主的action函數;

export function AjaxThunk (url, type) {
    return dispatch => {
        Ajax(url)
            .then(d => {
                dispatch({
                    type,
                    playload: d
                })
            })
    }
}
store.dispatch(AjaxThunk(url1, "add"));

redux-promise:主要就是針對action對象,action對象是一個promise的異步請求函數:

它的大概實現思路是:

const promiseAction = store => next => action => {
        const {type, playload} = action;
        if (playload && typeof playload.then === "function") {
            playload.then(result => {
                store.dispatch({type, playload: result});
            }).catch(e => {})
        } else {
            next(action);
        }
}

action = {
  type: "xxx",
  playload: Ajax(url)
}

自定義中間件:很多時候網上的redux中間件可能不太符合項目中的需要,所以這時候可以自己寫一套適合項目的中間件,以下指示本博主的一個demo,形式不唯一:

export const PromiseWares = store => next => action => {
    next({type: "right", playload: "loading"});
    if (typeof action === "function") {
        const {dispatch} = store;
        action(dispatch);
    } else {
        const {type, playload} = action;
        if (playload && typeof playload.then === "function") {
            playload.then(result => {
                store.dispatch({type, playload: result});
            }).catch(e => {})
        } else {
            next(action);
            next({type: "right", playload: "noLoading"});
        }
    }
};

以上就是本博主對redux中間件的理解,如有不對,請指出。

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

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

相關文章

  • Redux 進階 - react 全家桶學習筆記(二)

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

    Godtoy 評論0 收藏0
  • 精益 React 學習指南 (Lean React)- 3.4 掌控 redux 異步

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

    JouyPub 評論0 收藏0
  • React 進階設計與控制權問題

    摘要:盤點一下,模式反應了典型的控制權問題。異步狀態管理與控制權提到控制權話題,怎能少得了這樣的狀態管理工具。狀態管理中的控制主義和極簡主義了解了異步狀態中的控制權問題,我們再從全局角度進行分析。 控制權——這個概念在編程中至關重要。比如,輪子封裝層與業務消費層對于控制權的爭奪,就是一個很有意思的話題。這在 React 世界里也不例外。表面上看,我們當然希望輪子掌控的事情越多越好:因為抽象層...

    superw 評論0 收藏0
  • React 進階設計與控制權問題

    摘要:盤點一下,模式反應了典型的控制權問題。異步狀態管理與控制權提到控制權話題,怎能少得了這樣的狀態管理工具。狀態管理中的控制主義和極簡主義了解了異步狀態中的控制權問題,我們再從全局角度進行分析。 控制權——這個概念在編程中至關重要。比如,輪子封裝層與業務消費層對于控制權的爭奪,就是一個很有意思的話題。這在 React 世界里也不例外。表面上看,我們當然希望輪子掌控的事情越多越好:因為抽象層...

    rubyshen 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<