Interpretation des Redux-Saga-Prinzips (Codebeispiel)

Der Inhalt dieses Artikels befasst sich mit der Interpretation der Redux-Saga-Prinzipien (Codebeispiele). Ich hoffe, dass er für Freunde in Not hilfreich ist.

Der Autor hat kürzlich an einigen Backend-Projekten gearbeitet und dabei Ant Design Pro verwendet, das Redux-Saga zur Verarbeitung des asynchronen Datenflusses verwendet. In diesem Artikel wird eine einfache Interpretation des Prinzips von Redux-Saga gegeben und ein implementiert Eine einfache Version der Redux-Saga.

Automatische Prozesssteuerung der Generatorfunktion

In Redux-Saga bezieht sich Saga auf einige langfristige Vorgänge, dargestellt durch Generatorfunktionen. Die Stärke der Generatorfunktion besteht darin, dass sie die Ausführung manuell anhalten und fortsetzen und mit Daten außerhalb der Funktion interagieren kann. Siehe das folgende Beispiel:

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'

Dies ist ersichtlich, wenn die Generatorfunktion den nächsten Vorgang ausführt hängt vollständig davon ab: Der externe Planungszeitpunkt und sein interner Ausführungsstatus werden auch durch externe Eingaben bestimmt, wodurch die Generatorfunktion für die asynchrone Prozesssteuerung praktisch ist. Beispielsweise lesen wir zunächst den Inhalt einer Datei als Abfrageparameter, fordern dann eine Abfrageschnittstelle an und drucken den zurückgegebenen Inhalt aus:

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);
}

Wir können die Ausführung der Gen-Funktion manuell steuern:

const g = gen();
g.next().value.then(params => {
  g.next(params).value.then(content => {
    g.next(content);
  })
})

Das Obige kann unseren Zweck erreichen, ist aber zu umständlich. Wir möchten, dass die Generatorfunktion wie folgt automatisch ausgeführt wird:

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);

Zu diesem Zeitpunkt , die Generatorfunktion kann automatisch ausgeführt werden. Tatsächlich können wir feststellen, dass der interne Zustand des Generators vollständig durch nextWithYieldType bestimmt wird, und wir können je nach Ertragstyp unterschiedliche Verarbeitungslogiken ausführen.

Effekt

Tatsächlich kann sagaMiddleware.run(saga) als genRun(saga) betrachtet werden, und saga besteht aus Effekten, dann ist der Effekt Was? Erklärung der offiziellen Redux-Saga-Website: eins Der Effekt ist ein Plain-Object-JavaScript-Objekt, das einige Elemente enthält, die von der Saga-Middleware verwendet werden Anweisungen zur Ausführung. redux-saga bietet viele Effektersteller wie Call, Put, Take usw., Call wird als Beispiel verwendet:

function saga*() {
  const result = yield call(genPromise);
  console.log(result);
}

call(genPromise) erzeugt einen Effekt, der dem folgenden ähneln kann:

{
  isEffect: true,
  type: 'CALL',
  fn: genPromise
}

Tatsächlich zeigt der Effekt nur die Absicht an und das tatsächliche Verhalten wird durch nextWithYieldType vervollständigt, ähnlich wie oben, zum Beispiel:

function nextWithYieldType(value, next) {
  ...
  if(isCallEffect(value)) {
    value.fn(). then(success => next(null, success)).catch(error => next(error))  
  } 
}

Wenn das von der genPromise-Funktion zurückgegebene Versprechen aufgelöst wird, wird das Das Ergebnis wird ausgedruckt.

Produzenten und Verbraucher

Beobachten Sie das folgende Beispiel

function *saga() {
  yield take('TEST');
  console.log('test...');
}

sagaMiddleware.run(test);

Saga wird bei take('TEST') blockiert, nur der Versand wird ausgeführt ({type : 'TEST'}), bevor Saga weiter ausgeführt werden kann (Hinweis: Die Dispatch-Methode wird zu diesem Zeitpunkt von sagaMiddleware gepackt). Das fühlt sich sehr an, als wäre Take ein Produzent, der auf den Disaptch-Verbrauch wartet. Tatsächlich ist Take nur ein Effektgenerator, und die spezifische Verarbeitungslogik wird immer noch in nextWithYieldType vervollständigt, ähnlich wie:

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 ist eine Aufgabe Generator. Es gibt zwei Methoden: take zum Generieren von Aufgaben und put zum Konsumieren von Aufgaben:

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
  }
}

Offensichtlich wird die Aufgabe verbraucht, wenn der Versand ausgeführt wird. Diese Arbeit wird in sagaMiddleware ausgeführt, ähnlich wie folgt:

const sagaMiddleware = store => {
  return next => action => {
    next(action);
    
    const { type, ...payload } = action;
    channel.put(type, payload);
  }
}

Angesichts dessen können wir feststellen, dass wir die Funktion nextWithYieldType kontinuierlich verbessern müssen. Nach Abschluss der Logik, die Put, Fork und TakeEvery entspricht, wurde eine Redux-Saga mit Grundfunktionen geboren, also habe ich gewonnen. Wir gehen nicht näher auf die Implementierung dieser Funktionen ein.

Das obige ist der detaillierte Inhalt vonInterpretation des Redux-Saga-Prinzips (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!