精益 React 学习指南 (Lean React)- 3.4 掌控 redux 异步
書籍完整目錄
3.4 redux 異步
在大多數的前端業務場景中,需要和后端產生異步交互,在本節中,將詳細講解 redux 中的異步方案以及一些異步第三方組件,內容有:
redux 異步流
redux-thunk
redux-promise
redux-saga
3.4.1 redux 異步流
前面講的 redux 中的數據流都是同步的,流程如下:
view -> actionCreator -> action -> reducer -> newState -> container component
但同步數據不能滿足真實業務開發,真實業務中異步才是主角,那如何將異步處理結合到上邊的流程中呢?
3.4.2 實現異步的方式
其實 redux 并未有和異步相關的概念,我們可以用任何原來實現異步的方式應用到 redux 數據流中,最簡單的方式就是延遲 dispatch action,以 setTimeout 為例:
this.dispatch({ type: 'SYNC_SOME_ACTION'}) window.setTimeout(() => {this.dispatch({ type: 'ASYNC_SOME_ACTION' }) }, 1000)這種方式最簡單直接,但是有如下問題:
如果有多個類似的 action 觸發場景,異步邏輯不能重用
異步處理代碼不能統一處理,最簡單的例子就是節流
解決上面兩個問題的辦法很簡單,把異步的代碼剝離出來:
someAction.js
function dispatchSomeAction(dispatch, payload) {// ..調用控制邏輯...dispatch({ type: 'SYNC_SOME_ACTION'})window.setTimeout(() => {dispatch({ type: 'ASYNC_SOME_ACTION' })}, 1000) }然后組件只需要調用:
import {dispatchSomeAction} from 'someAction.js'dispatchSomeAction(dispatch, payload);基于這種方式上面的流程就改為了:
view -> asyncActionDispatcher -> wait -> action -> reducer -> newState -> container component
asyncActionDispatcher 和 actionCreator 是十分類似的, 所以簡單而言就可以把它理解為 asyncActionCreator , 所以新的流程為:
view -> asyncActionCreator -> wait -> action -> reducer -> newState -> container component
但是上面的方法有一些缺點
同步調用和異步調用的方式不相同:
同步的情況: store.dispatch(actionCreator(payload))
異步的情況: asyncActionCreator(store.dispatch, payload)
幸運的是在 redux 中通過 middleware 機制可以很容易的解決上面的問題
通過 middleware 實現異步
我們已經很清楚一個 middleware 的結構 ,其核心的部分為
function(action) {// 調用后面的 middlewarenext(action) }middleware 完全掌控了 reducer 的觸發時機, 也就是 action 到了這里完全由中間件控制,不樂意就不給其他中間件處理的機會,而且還可以控制調用其他中間件的時機。
舉例來說一個異步的 ajax 請求場景,可以如下實現:
function (action) {// async call fetch('....').then(function resolver(ret) {newAction = createNewAction(ret, action)next(newAction)},function rejector(err) {rejectAction = createRejectAction(err, action)next(rejectAction)})}); }任何異步的 javascript 邏輯都可以,如: ajax callback, Promise, setTimeout 等等, 也可以使用 es7 的 async 和 await。
第三方異步組件
上面的實現方案只是針對具體的場景設計的,那如果是如何解決通用場景下的問題呢,其實目前已經有很多第三方 redux 組件支持異步 action,其中如:
redux-thunk
redux-promise
redux-saga
這些組件都有很好的擴展性,完全能滿足我們開發異步流程的場景,下面來一一介紹
3.4.3 redux-thunk
redux-thunk 介紹
redux-thunk 是 redux 官方文檔中用到的異步組件,實質就是一個 redux 中間件,thunk 聽起來是一個很陌生的詞語,先來認識一下什么叫 thunk
A thunk is a function that wraps an expression to delay its evaluation.
簡單來說一個 thunk 就是一個封裝表達式的函數,封裝的目的是延遲執行表達式
// 1 + 2 立即被計算 = 3 let x = 1 + 2;// 1 + 2 被封裝在了 foo 函數內 // foo 可以被延遲執行 // foo 就是一個 thunk let foo = () => 1 + 2;redux-thunk 是一個通用的解決方案,其核心思想是讓 action 可以變為一個 thunk ,這樣的話:
同步情況:dispatch(action)
異步情況:dispatch(thunk)
我們已經知道了 thunk 本質上就是一個函數,函數的參數為 dispatch, 所以一個簡單的 thunk 異步代碼就是如下:
this.dispatch(function (dispatch){setTimeout(() => {dispatch({type: 'THUNK_ACTION'}) }, 1000) })之前已經講過,這樣的設計會導致異步邏輯放在了組件中,解決辦法為抽象出一個 asyncActionCreator, 這里也一樣,我們就叫 thunkActionCreator 吧,上面的例子可以改為:
//actions/someThunkAction.js export function createThunkAction(payload) {return function(dispatch) {setTimeout(() => {dispatch({type: 'THUNK_ACTION', payload: payload}) }, 1000)} }// someComponent.js this.dispatch(createThunkAction(payload))安裝和使用
第一步:安裝
$ npm install redux-thunk第二步: 添加 thunk 中間件
import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import rootReducer from './reducers/index';const store = createStore(rootReducer,applyMiddleware(thunk) );第三步:實現一個 thunkActionCreator
//actions/someThunkAction.js export function createThunkAction(payload) {return function(dispatch) {setTimeout(() => {dispatch({type: 'THUNK_ACTION', payload: payload}) }, 1000)} }第三步:組件中 dispatch thunk
this.dispatch(createThunkAction(payload));擁有 dispatch 方法的組件為 redux 中的 container component
thunk 源碼
說了這么多,redux-thunk 是不是做了很多工作,實現起來很復雜,那我們來看看 thunk 中間件的實現
function createThunkMiddleware(extraArgument) {return ({ dispatch, getState }) => next => action => {if (typeof action === 'function') {return action(dispatch, getState, extraArgument);}return next(action);}; }const thunk = createThunkMiddleware(); thunk.withExtraArgument = createThunkMiddleware;export default thunk;就這么簡單,只有 14 行源碼,但是這簡短的實現卻能完成復雜的異步處理,怎么做到的,我們來分析一下:
判斷如果 action 是 function 那么執行 action(dispatch, getState, ...)
action 也就是一個 thunk
執行 action 相當于執行了異步邏輯
action 中執行 dispatch
開始新的 redux 數據流,重新回到最開始的邏輯(thunk 可以嵌套的原因)
把執行的結果作為返回值直接返回
直接返回并沒有調用其他中間件,也就意味著中間件的執行在這里停止了
可以對返回值做處理(后面會講如果返回值是 Promise 的情況)
如果不是函數直接調用其他中間件并返回
理解了這個過后是不是對 redux-thunk 的使用思路變得清晰了
thunk 的組合
根據 redux-thunk 的特性,可以做出很有意思的事情
可以遞歸的 dispatch(thunk) => 實現 thunk 的組合;
thunk 運行結果會作為 dispatch返回值 => 利用返回值為 Promise 可以實現多個 thunk 的編排;
thunk 組合例子:
function thunkC() {return function(dispatch) {dispatch(thunkB())} } function thunkB() {return function (dispatch) {dispatch(thunkA())} } function thunkA() {return function (dispatch) {dispatch({type: 'THUNK_ACTION'})} }Promise 例子
function ajaxCall() {return fetch(...); }function thunkC() {return function(dispatch) {dispatch(thunkB(...)).then(data => dispatch(thunkA(data)),err => dispatch(thunkA(err)))} } function thunkB() {return function (dispatch) {return ajaxCall(...)} }function thunkA() {return function (dispatch) {dispatch({type: 'THUNK_ACTION'})} }3.4.4 redux-promise
另外一個 redux 文檔中提到的異步組件為 redux-promise, 我們直接分析一下其源碼吧
import { isFSA } from 'flux-standard-action';function isPromise(val) {return val && typeof val.then === 'function'; }export default function promiseMiddleware({ dispatch }) {return next => action => {if (!isFSA(action)) {return isPromise(action)? action.then(dispatch): next(action);}return isPromise(action.payload)? action.payload.then(result => dispatch({ ...action, payload: result }),error => {dispatch({ ...action, payload: error, error: true });return Promise.reject(error);}): next(action);}; }大概的邏輯就是:
如果不是標準的 flux action,那么判斷是否是 promise, 是執行 action.then(dispatch),否執行 next(action)
如果是標準的 flux action, 判斷 payload 是否是 promise,是的話 payload.then 獲取數據,然后把數據作為 payload 重新 dispatch({ ...action, payload: result}) , 否執行 next(action)
結合 redux-promise 可以利用 es7 的 async 和 await 語法,簡化異步的 promiseActionCreator 的設計, eg:
export default async (payload) => {const result = await somePromise;return {type: "PROMISE_ACTION",payload: result.someValue;} }如果對 es7 async 語法不是很熟悉可以看下面兩個例子:
async 關鍵字可以總是返回一個 Promise 的 resolve 結果或者 reject 結果
在 async 關鍵字中可以使用 await 關鍵字,其目的是 await 一個 promise, 等待 promise resolve 和 reject
eg:
async function foo(aPromise) {const a = await new Promise(function(resolve, reject) {// This is only an example to create asynchronismwindow.setTimeout(function() {resolve({a: 12});}, 1000);})console.log(a.a)return a.a }// in console > foo() > Promise {_c: Array[0], _a: undefined, _s: 0, _d: false, _v: undefined…} > 12可以看到在控制臺中,先返回了一個 promise,然后輸出了 12
async 關鍵字可以極大的簡化異步流程的設計,避免 callback 和 thennable 的調用,看起來和同步代碼一致。
3.4.5 redux-saga
redux-saga 介紹
redux-saga 也是解決 redux 異步 action 的一個中間件,不過和之前的設計有本質的不同
redux-saga 完全基于 Es6 的 Generator Function
不使用 actionCreator 策略,而是通過監控 action, 然后在自動做處理
所有帶副作用的操作(異步代碼,不確定的代碼)都被放到 saga 中
那到底什么是 saga
redux-saga 實際也沒有解釋什么叫 saga ,通過引用的參考:
The term saga is commonly used in discussions of CQRS to refer to a piece of code that coordinates and routes messages between bounded contexts and aggregates.
這個定義的核心就是 CQRS-查詢與責任分離 ,對應到 redux-sage 就是 action 與 處理函數的分離。 實際上在 redux-saga 中,一個 saga 就是一個 Generator 函數。
eg:
import { takeEvery, takeLatest } from 'redux-saga' import { call, put } from 'redux-saga/effects' import Api from '...'/** 一個 saga 就是一個 Generator Function ** 每當 store.dispatch `USER_FETCH_REQUESTED` action 的時候都會調用 fetchUser.*/ function* mySaga() {yield* takeEvery("USER_FETCH_REQUESTED", fetchUser); }/*** worker saga: 真正處理 action 的 saga* * USER_FETCH_REQUESTED action 觸發時被調用* @param {[type]} action [description]* @yield {[type]} [description]*/ function* fetchUser(action) {try {const user = yield call(Api.fetchUser, action.payload.userId);yield put({type: "USER_FETCH_SUCCEEDED", user: user});} catch (e) {yield put({type: "USER_FETCH_FAILED", message: e.message});} }一些基本概念
watcher saga
負責編排和派發任務的 saga
worker saga
真正負責處理 action 的函數
saga helper
如上面例子中的 takeEvery,簡單理解就是用于監控 action 并派發 action 到 worker saga 的輔助函數
Effect
redux-saga 完全基于 Generator 構建,saga 邏輯的表達是通過 yield javascript 對象來實現,這些對象就是Effects。
這些對象相當于描述任務的規范化數據(任務如執行異步函數,dispatch action 到一個 store),這些數據被發送到 redux-saga 中間件中執行,如:
put({type: "USER_FETCH_SUCCEEDED", user: user}) 表示要執行 dispatch({{type: "USER_FETCH_SUCCEEDED", user: user}}) 任務
call(fetch, url) 表示要執行 fetch(url)
通過這種 effect 的抽象,可以避免 call 和 dispatch 的立即執行,而是描述要執行什么任務,這樣的話就很容易對 saga 進行測試,saga 所做的事情就是將這些 effect 編排起來用于描述任務,真正的執行都會放在 middleware 中執行。
安裝和使用
第一步:安裝
$ npm install --save redux-saga第二步:添加 saga 中間件
import { createStore, applyMiddleware } from 'redux' import createSagaMiddleware from 'redux-saga'import reducer from './reducers' import mySaga from './sagas'// 創建 saga 中間件 const sagaMiddleware = createSagaMiddleware()// 添加到中間件中 const store = createStore(reducer,applyMiddleware(sagaMiddleware) )// 立即運行 saga ,讓監控器開始監控 sagaMiddleware.run(mySaga)第三步:定義 sagas/index.js
import { takeEvery } from 'redux-saga' import { put } from 'redux-saga/effects'export const delay = ms => new Promise(resolve => setTimeout(resolve, ms))// 將異步執行 increment 任務 export function* incrementAsync() {yield delay(1000)yield put({ type: 'INCREMENT' }) }// 在每個 INCREMENT_ASYNC action 調用后,派生一個新的 incrementAsync 任務 export default function* watchIncrementAsync() {yield* takeEvery('INCREMENT_ASYNC', incrementAsync) }第四步:組件中調用
this.dispatch({type: 'INCREMENT_ASYNC'})redux-saga 基于 Generator 有很多高級的特性, 如:
基于 take Effect 實現更自由的任務編排
fork 和 cancel 實現非阻塞任務
并行任何和 race 任務
saga 組合 ,yield* saga
因篇幅有限,這部分內容在下一篇講解
總結
以上是生活随笔為你收集整理的精益 React 学习指南 (Lean React)- 3.4 掌控 redux 异步的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 避免每个类中都初始化日志类
- 下一篇: 新JSON绑定库JSON-B发布公开预览