這篇文章帶給大家的內容是關於redux-saga原理的解讀(程式碼範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
筆者最近在做一些後台項目,使用的是Ant Design Pro,其使用了redux-saga處理非同步資料流,本文將對redux-saga的原理做一個簡單的解讀,並將實現一個簡易版的redux-saga。
Generator函數的自動流程控制
在redux-saga中,saga是指一些長時操作,用generator函數表示。 generator函數的強大之處在於其可以手動的暫停、恢復執行,並且可以與函數體外進行數據交互,看如下例子:
function *gen() { const a = yield 'hello'; console.log(a); } cont g = gen(); g.next(); // { value: 'hello', done: false } setTimeout(() => g.next('hi'), 1000) // 此时 a => 'hi' 一秒后打印‘hi'
可以看出來genrator函數何時進行下一步操作完全取決於外部的調度時機,且其內部執行狀態也由外部的輸入決定,這使得generator函數可以很方便的做非同步流程控制。舉個例子,我們先讀取一個檔案的內容作為查詢參數,然後請求一個查詢介面並把傳回的內容印出來:
function getParams(file) { return new Promise(resolve => { fs.readFile(file, (err, data) => { resolve(data) }) }) } function getContent(params) { // request返回promise return request(params) } function *gen() { const params = yield getParams('config.json'); const content = yield getContent(params); console.log(content); }
我們可以手動控制gen函數的執行:
const g = gen(); g.next().value.then(params => { g.next(params).value.then(content => { g.next(content); }) })
以上可以達到我們的目的,但是過於繁瑣,我們想要的是generator函數可以自動的執行,可以寫一個簡易的自動執行函數如下:
function genRun(gen) { const g = gen(); next(); function next(err, pre) { let temp; (err === null) && (temp = g.next(pre)); (err !== null) && (temp = g.throw(pre)); if(!temp.done) { nextWithYieldType(temp.value, next); } } } function nextWithYieldType(value, next) { if(isPromise(value)) { value .then(success => next(null, success)) .catch(error => next(error)) } } genRun(gen);
此時generator函數便可以自動執行,事實上我們可以發現,generator的內部狀態完全是由nextWithYieldType
決定的,我們可以根據yield的類型執行不同的處理邏輯。
Effect
事實上sagaMiddleware.run(saga)可以類似看做genRun(saga),而saga是由一個個的effect組成的,那麼effect是什麼? redux-saga官網的解釋:一個 effect 就是一個 Plain Object JavaScript 對象,包含一些會被 saga middleware 執行的指令。 redux-saga提供了許多Effect創建器,如call、put、take等,已call為例:
function saga*() { const result = yield call(genPromise); console.log(result); }
call(genPromise)
生成的就是一個effect,它可能類似如下:
{ isEffect: true, type: 'CALL', fn: genPromise }
事實上effect只表明了意圖,而實際的行為由類似於上文的nextWithYieldType完成,例如:
function nextWithYieldType(value, next) { ... if(isCallEffect(value)) { value.fn(). then(success => next(null, success)).catch(error => next(error)) } }
當genPromise函數返回的promise被resolve後便會打印出結果。
生產者與消費者
觀察下面的例子
function *saga() { yield take('TEST'); console.log('test...'); } sagaMiddleware.run(test);
saga會在take('TEST')處阻塞,只有執行了dispatch ({type: 'TEST'})後saga才能繼續運作(注意:此時的dispatch方法是經過sagaMiddleware包裝過的)。這給我們的感覺似乎很像是take是一個生產者,在等待disaptch的消費,事實上take只是一個Effect生成器,具體的處理邏輯依然是在nextWithYieldType完成的,類似於:
function nextWithYieldType(value, next) { ... // take('TEST')生成的effect简单的认为是 {isEffect: true, type: 'TAKE', name: 'TEST'} if(isTakeEffect(value)) { channel.take({pattern: value.name, cb: params => next(null, params)}) } }
channel是一個任務產生器,它有兩個方法:take生成任務,put消費任務:
function channel() { /* task = { pattern, cb } */ let _task = null; function take(task) { _task = task; } function put(pattern, args) { if(!_task) return; if(pattern == _task.pattern) _task.cb.call(null, args); } return { take, put } }
#顯然任務是在執行dispatch的時候被消費掉的,這個工作是在sagaMiddleware中做的,類似於如下:
const sagaMiddleware = store => { return next => action => { next(action); const { type, ...payload } = action; channel.put(type, payload); } }
看到這裡我們可以發現,需要我們做的就是不斷的完善nextWithYieldType這個函數,當完成了put、fork、takeEvery對應的邏輯後,一個具備基本功能的redux -saga就誕生啦,就不在贅述這些功能的實現了。
#以上是redux-saga原理的解讀(程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!