Maison > interface Web > js tutoriel > Interprétation du principe redux-saga (exemple de code)

Interprétation du principe redux-saga (exemple de code)

不言
Libérer: 2018-10-29 14:34:04
avant
3205 Les gens l'ont consulté

Le contenu de cet article concerne l'interprétation des principes de redux-saga (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

L'auteur a récemment travaillé sur certains projets backend, en utilisant Ant Design Pro, qui utilise redux-saga pour traiter le flux de données asynchrone. Cet article donnera une interprétation simple du principe de redux-saga et implémentera un. Une version simple de redux-saga.

Contrôle automatique du processus de la fonction générateur

Dans redux-saga, saga fait référence à certaines opérations à long terme, représentées par des fonctions de générateur. La puissance de la fonction génératrice est qu'elle peut suspendre et reprendre manuellement l'exécution, et interagir avec des données en dehors du corps de la fonction. Voir l'exemple suivant :

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'
Copier après la connexion

Vous pouvez voir quand la fonction génératrice termine la fonction suivante. Cela dépend du calendrier de planification externe et son état d'exécution interne est également déterminé par une entrée externe, ce qui rend la fonction du générateur pratique pour le contrôle de processus asynchrone. Par exemple, nous lisons d'abord le contenu d'un fichier en tant que paramètre de requête, puis demandons une interface de requête et imprimons le contenu renvoyé :

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);
}
Copier après la connexion

Nous pouvons contrôler manuellement l'exécution de la fonction gen :

const g = gen();
g.next().value.then(params => {
  g.next(params).value.then(content => {
    g.next(content);
  })
})
Copier après la connexion

Ce qui précède peut atteindre notre objectif, mais c'est trop fastidieux. Ce que nous voulons, c'est que la fonction génératrice puisse être exécutée automatiquement. Nous pouvons écrire une fonction d'exécution automatique simple comme suit :

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);
Copier après la connexion

À ce moment, la fonction du générateur peut être exécutée automatiquement. En fait, nous pouvons constater que l'état interne du générateur est entièrement déterminé par nextWithYieldType Nous pouvons exécuter différentes logiques de traitement selon le type de rendement.

Effet

En fait, sagaMiddleware.run(saga) peut être considéré comme genRun(saga), et saga est composée d'effets, alors l'effet est Quoi ? Explication du site officiel de redux-saga : un L'effet est un objet JavaScript Plain Object contenant certains éléments qui seront utilisés par le middleware de la saga. instructions à exécuter. redux-saga propose de nombreux créateurs d'effets, tels que call, put, take, etc., call est utilisé comme exemple :

function saga*() {
  const result = yield call(genPromise);
  console.log(result);
}
Copier après la connexion

call(genPromise) génère un effet, qui peut être similaire au suivant :

{
  isEffect: true,
  type: 'CALL',
  fn: genPromise
}
Copier après la connexion

En fait, l'effet n'indique que l'intention, et le comportement réel est complété par nextWithYieldType similaire à celui ci-dessus, par exemple :

function nextWithYieldType(value, next) {
  ...
  if(isCallEffect(value)) {
    value.fn(). then(success => next(null, success)).catch(error => next(error))  
  } 
}
Copier après la connexion

Lorsque la promesse renvoyée par le La fonction genPromise est résolue, le résultat sera imprimé.

Producteurs et consommateurs

Observez l'exemple suivant

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

sagaMiddleware.run(test);
Copier après la connexion

saga se bloquera à la prise('TEST') et seule l'exécution de Saga pourra continuer à exécuter uniquement après l'exécution de dispatch({type: 'TEST'}) (remarque : la méthode de dispatch à ce stade est packagée par sagaMiddleware). Cela donne l'impression que take est un producteur, en attente de consommation d'expédition. En fait, take n'est qu'un générateur d'effets, et la logique de traitement spécifique est toujours complétée dans nextWithYieldType, similaire à :

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)})  
  } 
}
Copier après la connexion

channel is. un générateur de tâches. Il a deux méthodes : take pour générer des tâches et put pour consommer des tâches :

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
  }
}
Copier après la connexion

Évidemment, la tâche est consommée lors de l'exécution de la répartition. Ce travail est effectué dans Ce qui se fait dans sagaMiddleware est similaire. à ce qui suit :

const sagaMiddleware = store => {
  return next => action => {
    next(action);
    
    const { type, ...payload } = action;
    channel.put(type, payload);
  }
}
Copier après la connexion

En voyant cela, nous pouvons constater que ce que nous devons faire est d'améliorer continuellement la fonction nextWithYieldType après avoir terminé la logique correspondant à put, fork et takeEvery, une saga redux. avec des fonctions de base est né, et je n'entrerai pas dans les détails de l'implémentation de ces fonctions.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:segmentfault.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal