Redux中間件與異步操作

glumes 發布于2019-08-20 18:18 / 1003人閱讀

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

基本流程

1.創建store,帶有三個方法:store.dispatch,store.subscribe,store.getState

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

2.view發出dispatch->action

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

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

export default (state = {}, action) => {
    switch (action.type) {  // state即返回的新狀態,新的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()方法設置監聽函數,一旦state發生變化,就會自定執行這個函數.
在這個函數里setState,就會觸發整個組件的render.

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

異步操作

1.用戶發出Action,Reducer函數算出新的State,View重新渲染.
2.異步操作怎么辦? Action發出以后,Reducer立即算出State,這叫做同步;Action發出以后,過一段時間再執行Reducer,這就是異步.
怎樣才能Reducer在異步操作結束后自動執行呢?這就要用到新的工具:中國件(middleware)
3.中間件
只有發送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進行了重定義,在發送Action前后添加了打印功能,這就是中間件的雛形.
中間件就是一個函數,對store.dispatch方法進行了改造,在發出Action和執行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的原生方法,作用是將所有中間件組成一個數組,依次執行.
6.異步操作的基本思路
操作開始時,送出一個Action,觸發State更新為"正在操作"狀態,重新渲染.
操作結束后,再送出一個Action,觸發State更新為"操作結束",view再一次重新渲染.

redux-thunk中間件

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

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

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

使用redux-thunk發Async Action的例子

1.首先,這是個關于action creator的解釋.
什么是action creator? 返回action的函數.
為什么要用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返回一個函數,而且這個函數第一個參數是dispatch.
所以不光改造action creator,如果你要用thunk,你還要把它放進middleware里去,這樣函數類型的action就被thunk middleware捕獲,
根據你的函數邏輯,再去dispatch常規的action.
這樣Async Action其實就是發Ajax之前dispatch一發,收到服務器響應后dispatch一發,
報錯的話再來dispatch一發.

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

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

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

Redux中間件與異步Action

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

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

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

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

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

darcrand 2019-08-23 13:41 評論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
企業級后臺react-redux異步操作實踐

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

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