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

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'

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

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

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

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

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

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

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

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

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

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

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

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!