Redux中間件與異步操作

glumes 發(fā)布于2019-08-20 18:18 / 1005人閱讀

摘要：基本流程創(chuàng)建帶有三個(gè)方法發(fā)出處理數(shù)據(jù)每次后的數(shù)據(jù)即得到的數(shù)據(jù)即一個(gè)新的所以是一個(gè)對(duì)象每次都是上次返回的值所以用即返回的新?tīng)顟B(tài)新的即本次的返回值所以每次都是往空的對(duì)象里先推再新增屬性或改變?cè)瓉?lái)屬性的值層通過(guò)方法設(shè)置監(jiān)聽(tīng)函數(shù)一旦發(fā)生變化就會(huì)

基本流程

1.創(chuàng)建store,帶有三個(gè)方法:store.dispatch,store.subscribe,store.getState

import { applyMiddleware ,createStore } from "redux";
const store = createStore(
    reducer,
    applyMiddleware(thunk, logger)
);

2.view發(fā)出dispatch->action

del = () => {
    store.dispatch({
        type: "DEL",
        data: this.state.count - 1
    });
}

3.reducer處理action數(shù)據(jù)
每次dispatch后return的數(shù)據(jù)即store.getState()得到的數(shù)據(jù),即一個(gè)新的state.
所以state是一個(gè)對(duì)象,每次都是上次返回的值.
所以用Object.assign({}, state, {count: action.data})

export default (state = {}, action) => {
    switch (action.type) {  // state即返回的新?tīng)顟B(tài),新的state即本次的返回值,所以每次都是往空的對(duì)象里,先推state,再新增屬性或改變?cè)瓉?lái)屬性的值
        case "ADD":
            return Object.assign({}, state, {count: action.data});
        case "ADD2":
            return Object.assign({}, state, {count: action.data});
        case "ADD3":
            return Object.assign({}, state, {count: action.data});  
        case "DEL":
            return Object.assign({}, state, {count: action.data});
        case "AJAX":
            return Object.assign({}, state, {res: action.data.res});
        default:
            return {
                count: 0,
                res: "aaaa"
            };
    }
}

4.view層通過(guò)store.subscribe()方法設(shè)置監(jiān)聽(tīng)函數(shù),一旦state發(fā)生變化,就會(huì)自定執(zhí)行這個(gè)函數(shù).
在這個(gè)函數(shù)里setState,就會(huì)觸發(fā)整個(gè)組件的render.

store.subscribe(() => { // subscribe即,每一次dispatch,都會(huì)觸發(fā)reducer處理數(shù)據(jù),即觸發(fā)store.subscribe
    this.setState({
        count: store.getState().count,  // reducer返回新的state,即state的值被改變state = 1
        res: store.getState().res
    });
});

異步操作

1.用戶發(fā)出Action,Reducer函數(shù)算出新的State,View重新渲染.
2.異步操作怎么辦? Action發(fā)出以后,Reducer立即算出State,這叫做同步;Action發(fā)出以后,過(guò)一段時(shí)間再執(zhí)行Reducer,這就是異步.
怎樣才能Reducer在異步操作結(jié)束后自動(dòng)執(zhí)行呢?這就要用到新的工具:中國(guó)件(middleware)
3.中間件
只有發(fā)送Action的這個(gè)步驟,即store.dispatch()方法,可以添加功能.
可以對(duì)store.dispatch進(jìn)行如下改造.

let next = store.dispatch;

store.dispatch = function dispatchAndLog(action) {
    console.log("dispatching", action);
    next(action);
    console.log("next state", store.getState());
}

上面代碼中,對(duì)store.dispatch進(jìn)行了重定義,在發(fā)送Action前后添加了打印功能,這就是中間件的雛形.
中間件就是一個(gè)函數(shù),對(duì)store.dispatch方法進(jìn)行了改造,在發(fā)出Action和執(zhí)行Reducer這兩步之間,添加了其他功能.
4.中間件的用法
redux-logger提供一個(gè)生成器createLogger,可以生成日志中間件logger,然后,將它放在applyMiddleware方法中,
傳入createStore方法,就完成了store.dispatch()的功能增強(qiáng).

import { applyMiddleware ,createStore } from "redux";
import { createLogger } from "redux-logger";
import thunk from "redux-thunk";

const logger = createLogger();

const store = createStore(
    reducer,
    applyMiddleware(thunk, logger)
);

5.applyMiddleware
applyMiddleware是Redux的原生方法,作用是將所有中間件組成一個(gè)數(shù)組,依次執(zhí)行.
6.異步操作的基本思路
操作開(kāi)始時(shí),送出一個(gè)Action,觸發(fā)State更新為"正在操作"狀態(tài),重新渲染.
操作結(jié)束后,再送出一個(gè)Action,觸發(fā)State更新為"操作結(jié)束",view再一次重新渲染.

redux-thunk中間件

1.異步操作至少要送出兩個(gè)Action,用戶觸發(fā)第一個(gè)Action,這個(gè)跟同步操作一樣,沒(méi)有問(wèn)題.
如何才能在操作結(jié)束時(shí),系統(tǒng)自動(dòng)送出第二個(gè)Action呢?

add3 = () => {
    store.dispatch(dispatchAction(this.state.count + 3));
}
function dispatchAction(count) {
    return (dispatch) => {
        dispatch({
            type: "ADD3",
            data: count
        });
    }
}

dispatchAction是一個(gè)Action Creater,返回一個(gè)函數(shù),這個(gè)函數(shù)執(zhí)行后,發(fā)出一個(gè)action,然后執(zhí)行異步操作,拿到結(jié)果后,再次dispatch,發(fā)出一個(gè)Action.
dispatchAction返回了一個(gè)函數(shù),而普通的action creator默認(rèn)返回一個(gè)對(duì)象.
返回的函數(shù)的參數(shù)是dispatch和getState這兩個(gè)redux方法.
action是由store.dispatch方法發(fā)送的,而store.dispatch方法正常情況下,參數(shù)只能是對(duì)象,不能是函數(shù).
這時(shí),就使用redux-thunk中間件,改造dispatch,使得后者可以接受函數(shù)作為參數(shù).

使用redux-thunk發(fā)Async Action的例子

1.首先,這是個(gè)關(guān)于action creator的解釋.
什么是action creator? 返回action的函數(shù).
為什么要用action creator?圖個(gè)方便吧.

function changeNum(count) {
    return {
        type: "ADD2",
        data: count
    }
}
add2 = () => {
    store.dispatch(changeNum(this.state.count + 2));
}

2.Thunk的做法就是擴(kuò)展了這個(gè)action creator.
Thunk允許action creator返回一個(gè)函數(shù),而且這個(gè)函數(shù)第一個(gè)參數(shù)是dispatch.
所以不光改造action creator,如果你要用thunk,你還要把它放進(jìn)middleware里去,這樣函數(shù)類(lèi)型的action就被thunk middleware捕獲,
根據(jù)你的函數(shù)邏輯,再去dispatch常規(guī)的action.
這樣Async Action其實(shí)就是發(fā)Ajax之前dispatch一發(fā),收到服務(wù)器響應(yīng)后dispatch一發(fā),
報(bào)錯(cuò)的話再來(lái)dispatch一發(fā).

GPU云服務(wù)器云服務(wù)器 js中的異步操作同步與異步異步通信與同步通信異步與非阻塞

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

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

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

登陸后可評(píng)論

0條評(píng)論

glumes

男|高級(jí)講師

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

TA的文章

hostwinks：$5/月，1Gbps帶寬，SSD硬盤(pán)，可選擇印度VPS（孟買(mǎi)、諾伊達(dá)）/美國(guó)VP

閱讀 1343·2021-09-01 11:40
蘑菇主機(jī)：韓國(guó)特價(jià)獨(dú)服，10M帶寬月付35刀，30M帶寬月付59刀，簡(jiǎn)單測(cè)評(píng)

閱讀 3957·2021-08-05 10:03
自定義滾動(dòng)條

閱讀 984·2019-08-30 15:54
前端面試之CSS3新特性

閱讀 2826·2019-08-29 12:53
2d變換矩陣

閱讀 3191·2019-08-29 12:23
test

閱讀 947·2019-08-26 13:45
WeakMap WeakSet

閱讀 2288·2019-08-26 10:41
Vue組件內(nèi)部實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定

閱讀 2543·2019-08-23 16:44

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

資訊專(zhuān)欄INFORMATION COLUMN

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

Redux中間件與異步操作

相關(guān)文章

Redux中間件與異步Action

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

**React專(zhuān)題：react，redux以及react-redux常見(jiàn)一些面試題**

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

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

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

0條評(píng)論

glumes

男|高級(jí)講師

TA的文章

hostwinks：$5/月，1Gbps帶寬，SSD硬盤(pán)，可選擇印度VPS（孟買(mǎi)、諾伊達(dá)）/美國(guó)VP

蘑菇主機(jī)：韓國(guó)特價(jià)獨(dú)服，10M帶寬月付35刀，30M帶寬月付59刀，簡(jiǎn)單測(cè)評(píng)

自定義滾動(dòng)條

前端面試之CSS3新特性

2d變換矩陣

test

WeakMap WeakSet

Vue組件內(nèi)部實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Redux中間件與異步操作

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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