Redux中間件與異步操作

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

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

基本流程

1.創(chuàng)建store,帶有三個方法: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ù),即一個新的state.
所以state是一個對象,每次都是上次返回的值.
所以用Object.assign({}, state, {count: action.data})

export default (state = {}, action) => {
    switch (action.type) {  // state即返回的新狀態(tài),新的state即本次的返回值,所以每次都是往空的對象里,先推state,再新增屬性或改變原來屬性的值
        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層通過store.subscribe()方法設置監(jiān)聽函數(shù),一旦state發(fā)生變化,就會自定執(zhí)行這個函數(shù).
在這個函數(shù)里setState,就會觸發(fā)整個組件的render.

store.subscribe(() => { // subscribe即,每一次dispatch,都會觸發(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ā)出以后,過一段時間再執(zhí)行Reducer,這就是異步.
怎樣才能Reducer在異步操作結束后自動執(zhí)行呢?這就要用到新的工具:中國件(middleware)
3.中間件
只有發(fā)送Action的這個步驟,即store.dispatch()方法,可以添加功能.
可以對store.dispatch進行如下改造.

let next = store.dispatch;

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

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

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

redux-thunk中間件

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

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

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

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

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/84314.html

Redux中間件與異步Action

摘要：中間件對異步的實現(xiàn)非常重要，因為在之前的文章中我們談到，是一個行為抽象，只是一個對象，是一個純函數(shù)，不應該有調(diào)用和副作用的操作。這個函數(shù)并不需要保持純凈，它還可以帶有副作用，包括執(zhí)行異步請求。那么如何在中進行網(wǎng)絡請求標準的做法是使用。在之前的淺談Flux架構及Redux實踐一文中我們初步的談及了Redux的數(shù)據(jù)流思想，并做了一個簡單的加減器。但是還沒有接觸到Redux更多常用的場景，...

paney129 2019-08-20 10:35 評論0 收藏0
Redux 進階 - react 全家桶學習筆記（二）

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

Godtoy 2019-08-23 10:58 評論0 收藏0
React專題：react，redux以及react-redux常見一些面試題

摘要：我們可以為元素添加屬性然后在回調(diào)函數(shù)中接受該元素在樹中的句柄，該值會作為回調(diào)函數(shù)的第一個參數(shù)返回。使用最常見的用法就是傳入一個對象。單向數(shù)據(jù)流，比較有序，有便于管理，它隨著視圖庫的開發(fā)而被概念化。面試中問框架，經(jīng)常會問到一些原理性的東西，明明一直在用，也知道怎么用，但面試時卻答不上來，也是挺尷尬的，就干脆把react相關的問題查了下資料，再按自己的理解整理了下這些答案。 reac...

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

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

JouyPub 2019-08-19 18:36 評論0 收藏0
企業(yè)級后臺react-redux異步操作實踐

摘要：一種通知請求成功的。對于這種，可能會把接收到的新數(shù)據(jù)合并到中，并重置。另外，有些會保存這些失敗信息，并在里顯示出來。一、redux基礎 redux 通過 dispatch(action) -> 中間件 -> reducer處理數(shù)據(jù) -> 改變store -> 使用subscribe()監(jiān)聽store改變更新視圖的方式管理狀態(tài) 將所有狀態(tài)存儲在一個store對象里面 reducer...

duan199226 2019-08-26 12:11 評論0 收藏0