首頁  >  文章  >  web前端  >  redux-saga原理的解讀(程式碼範例)

redux-saga原理的解讀(程式碼範例)

不言
不言轉載
2018-10-29 14:34:043188瀏覽

這篇文章帶給大家的內容是關於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中文網其他相關文章!

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除