企業(yè)級后臺react-redux異步操作實(shí)踐

duan199226 發(fā)布于2019-08-26 12:11 / 1906人閱讀

摘要：一種通知請求成功的。對于這種，可能會把接收到的新數(shù)據(jù)合并到中，并重置。另外，有些會保存這些失敗信息，并在里顯示出來。

一、redux基礎(chǔ) redux

通過 dispatch(action) -> 中間件 -> reducer處理數(shù)據(jù) -> 改變store -> 使用subscribe()監(jiān)聽store改變更新視圖的方式管理狀態(tài)

將所有狀態(tài)存儲在一個(gè)store對象里面

reducer為純函數(shù)，而異步操作由于結(jié)果的不確定性所以含有副作用，所以需要特殊處理

react-redux

容器組件，負(fù)責(zé)管理數(shù)據(jù)和業(yè)務(wù)邏輯，不負(fù)責(zé)UI呈現(xiàn)

UI組件，提供UI呈現(xiàn)，無狀態(tài)即不使用this.state，狀態(tài)全部由this.props提供

由connect生成容器組件，每次store改變會調(diào)用connect，connect接收兩個(gè)參數(shù): mapStateToProps, mapDispatchToProps

mapStateToProps，將狀態(tài)映射到UI組件的props

mapDispatchToProps，將dispatch方法映射到UI組件的props

Provider組件，使用content API將store從頂層開始傳到每一層component供connect使用

二、redux處理異步的中間件 redux-thunk

redux-thunk中間件允許action是一個(gè)方法

中間件收到action后會執(zhí)行action方法并將結(jié)果提供給reducer

action混亂導(dǎo)致不易維護(hù)

redux-saga

saga會監(jiān)聽action并基于這個(gè)action執(zhí)行Effects操作

Effects提供靈活的API，包括阻塞、非阻塞調(diào)用，取消、等待、race等操作

方便隔離并執(zhí)行異步操作，并易于測試

三、redux-request-async-middleware 先從redux文檔中的異步action說起，每個(gè)接口調(diào)用需要dispatch三個(gè)同步action，分別是:

一種通知 reducer 請求開始的 action。對于這種 action，reducer 可能會切換一下 state 中的 isFetching 標(biāo)記。以此來告訴 UI 來顯示加載界面。

一種通知 reducer 請求成功的 action。對于這種 action，reducer 可能會把接收到的新數(shù)據(jù)合并到 state 中，并重置 isFetching。UI 則會隱藏加載界面，并顯示接收到的數(shù)據(jù)。

一種通知 reducer 請求失敗的 action。對于這種 action，reducer 可能會重置 isFetching。另外，有些 reducer 會保存這些失敗信息，并在 UI 里顯示出來。

也就是一個(gè)接口發(fā)起是這樣的

dispatch(fetchPostsRequest(subject));
fetch(url).then(res => {
    dispatch(fetchPostsSuccess(subject, res));
}).catch(e => {
    dispatch(fetchPostsFailure(subject, e));
})

而我做的事情只是將這個(gè)操作封裝進(jìn)中間件里，特殊的地方在于:

所有的異步請求共用這三個(gè)action

用subject來區(qū)分是哪一個(gè)請求

將所有的結(jié)果都放到store.requests里

中間件源碼

export const reduxRequest = store => next => action => {
    let result = next(action);
    let { type, subject, model } = action;
    let _next = action.next;
    if(type === FETCH_POSTS_REQUEST) {
        model().then(response => {
            _next && _next(response);
            store.dispatch(fetchPostsSuccess(subject, response));
        }).catch(error => {
            console.error(error);
            store.dispatch(fetchPostsFailure(subject, error));
        });
    }
    return result
};

和redux-thunk一樣，將方法放進(jìn)action里

中間件攔截FETCH_POSTS_REQUEST action，并進(jìn)行異步處理

reducer源碼

export const requests = (state = {}, action) => {
    switch (action.type) {
        case FETCH_POSTS_REQUEST:
            return assign({},
                state,
                {
                    [action.subject]: {
                        isFetching: true,
                        state: "loading",
                        subject: action.subject,
                        response: null,
                        error: null,
                    }
                }
            );
        case FETCH_POSTS_FAILURE:
            return assign({},
                state,
                {
                    [action.subject]: {
                        isFetching: false,
                        state: "error",
                        subject: action.subject,
                        response: state[action.subject].response,
                        error: action.error,
                    }
                }
            );
        case FETCH_POSTS_SUCCESS:
            return assign({},
                state,
                {
                    [action.subject]: {
                        isFetching: false,
                        state: "success",
                        subject: action.subject,
                        response: action.response,
                    }
                }
            );
        case FETCH_POSTS_CLEAR:
            return assign({},
                state,
                {
                    [action.subject]: {
                        isFetching: false,
                        state: "cleared",
                        subject: null,
                        response: null,
                        error: null,
                    }
                }
            );
        default:
            return state;
    }
}

將結(jié)果放入該subject對應(yīng)下的response，如果錯誤的話將錯誤信息放入error當(dāng)中

isFetching表示當(dāng)前的請求狀態(tài)

另外還加入了當(dāng)前的狀態(tài)state和subject信息

將請求進(jìn)行封裝

const request = (subject, model, next) => {
    _dispatch(fetchPostsRequest(subject, model, next));
    return true;
};

寫一個(gè)方法來發(fā)起FETCH_POSTS_REQUEST action

也就是說寫請求的時(shí)候不用再管action這東西了，直接調(diào)用request方法

將結(jié)果進(jìn)行封裝

const getResponse = state =>
    state
    && state.response !== null
    && state.response;

const getLoading = (states = []) =>
    states.reduce((pre, cur) =>
        pre || (cur && cur.isFetching)
        , false)
    || false;

可以獲取結(jié)果和多個(gè)請求下loading的狀態(tài)

有更多的操作或者格式還可以繼續(xù)封裝，比如列表

使用方法redux-request-async-middleware 四、總結(jié)

使用了redux來進(jìn)行狀態(tài)管理，而并不需要編寫redux那一套復(fù)雜邏輯，最大程度的減少異步操作的復(fù)雜度

適用于前端通過接口來處理和存儲數(shù)據(jù)的項(xiàng)目

接口由redux處理，而視圖組件由內(nèi)部state來處理，而外部只暴露簡單的接口來進(jìn)行操作，分離業(yè)務(wù)層和視圖層

對比react 16.3 new content API，redux的優(yōu)勢在于熱插播的中間件和純函數(shù)reducer寫法

更多文章 yjy5264.github.io

云服務(wù)器 GPU云服務(wù)器 ecs自定義鏡像操作實(shí)踐異步調(diào)用后臺代碼 js中的異步操作企業(yè)級域名安全實(shí)踐

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

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

發(fā)表評論

登陸后可評論

0條評論

duan199226

男|高級講師

我要關(guān)注我要私信

TA的文章

tiktok海外直播，如何選擇網(wǎng)絡(luò)線路？

閱讀 4183·2022-09-16 13:49
#yyds干貨盤點(diǎn)#安全管理制度管理辦法范文

閱讀 1410·2021-11-22 15:12
開學(xué)了，計(jì)算機(jī)的大學(xué)生們，送你們一篇經(jīng)書，希望你們的四年不負(fù)年華！

閱讀 1532·2021-09-09 09:33
割裂的前端工程師--- 2017年前端生態(tài)窺探

閱讀 1049·2019-08-30 13:15
react實(shí)現(xiàn)選中的li高亮

閱讀 1737·2019-08-29 15:30
JavaScript JavaScript與XML——“XPath”的注意要點(diǎn)

閱讀 668·2019-08-27 10:52
數(shù)組常用 API

閱讀 2651·2019-08-26 17:41
企業(yè)級后臺react-redux異步操作實(shí)踐

閱讀 1907·2019-08-26 12:11

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

企業(yè)級后臺react-redux異步操作實(shí)踐

相關(guān)文章

**react+react-router+react-redux全家桶小項(xiàng)目開發(fā)過程分享**

尚學(xué)堂 react -后臺管理系統(tǒng)開發(fā)流程

**React 實(shí)踐項(xiàng)目（二） redux + immutable + redux-saga**

干貨 | React技術(shù)棧耕耘 —— Redux

react-redux初探理解

發(fā)表評論

0條評論

duan199226

男|高級講師

TA的文章

tiktok海外直播，如何選擇網(wǎng)絡(luò)線路？

#yyds干貨盤點(diǎn)#安全管理制度管理辦法范文

開學(xué)了，計(jì)算機(jī)的大學(xué)生們，送你們一篇經(jīng)書，希望你們的四年不負(fù)年華！

割裂的前端工程師--- 2017年前端生態(tài)窺探

react實(shí)現(xiàn)選中的li高亮

JavaScript JavaScript與XML——“XPath”的注意要點(diǎn)

數(shù)組常用 API