超級易懂的redux-saga原理解析
筆者最近在做一些後臺專案，使用的是ofollow,noindex">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就誕生啦，筆者就不在贅述這些功能的實現了。最後，你可以檢視這裡：tiny-redux-saga
，這是筆者實現的一個簡易版的redux-saga，希望對你有所幫助。
全文完。