Explication détaillée de l'utilisation de take dans redux-saga

Cet article présente principalement l'explication détaillée de la façon d'utiliser take dans redux-saga. Maintenant, je le partage avec vous et le donne comme référence.

Cet article présente une explication détaillée de la façon d'utiliser take dans redux-saga et la partage avec tout le monde. Les détails sont les suivants :

Apportez-moi une méthode d'utilisation de l'API pour laquelle j'ai étudié. depuis longtemps.

redux -La ​​façon d'utiliser l'API take dans l'effet dans saga est d'appeler, de mettre et de sélectionner. Cependant, il n'y a vraiment aucune chance d'utiliser take, et je ne sais pas où. pour l'utiliser. Quoi qu'il en soit, puisqu'il est redux- Écrit par saga, il doit avoir son utilisation Quel que soit 37 21, apprenez d'abord à l'utiliser

Regardez d'abord l'introduction :

take

performances de take Comme takeEvery, il surveille une action, mais contrairement à takeEvery, il ne répond pas à chaque fois que l'action est déclenchée, mais ne répond à l'action que lorsque l'instruction take est exécutée dans la séquence d'exécution.

Lors de l'utilisation de l'instruction take dans le générateur pour attendre une action, le générateur est bloqué, en attente que l'action soit distribuée, puis continue l'exécution.

takeEvery écoute simplement chaque action puis exécute la fonction de traitement. takeEvery n’a aucun contrôle sur quand et comment répondre.

Mais prendre est différent. Nous pouvons décider dans la fonction générateur quand répondre à une action et quoi faire après le déclenchement d'une action.

La plus grande différence : take ne répondra à l'action correspondante que lorsque le flux d'exécution sera atteint, tandis que takeEvery répondra à l'action une fois enregistrée.

Le code ci-dessus :

effects: {
 * takeDemo1({payload}, {put, call, take}) {

 },
 * takeInputChange({payload}, {put, call, take,takeEvery,takeLatest}) {
  // yield call(delay,1000);
  console.log(takeEvery);
  // for (let i = 0; i < 3; i++) {
   const action = yield take(&#39;takeBlur&#39;});
   console.log(action, &#39;action&#39;);
   console.log(payload.value);
  // }

 },
 * takeBlur() {
  console.log(323)
 },
}

changeHandle(e){
 this.props.dispatch({type:'takeInputChange',payload:{value:e.target.value}})
}
blur(){
 this.props.dispatch({type:'takeBlur'})
}
render() {

 return (
  <p style={{position: &#39;relative&#39;}}>
   <Input onChange={this.changeHandle.bind(this)} onBlur={this.blur.bind(this)}/> 
  </p>
  )
}

Il y a une entrée sur la page, liée à deux méthodes, la première est la méthode onchange, l'autre est la méthode onBlur,

Lorsque la valeur d'entrée change, cette fonction est appelée via this.props.dispatch({type:'takeInputChange'}), mais parce que la méthode take est rencontrée, l'exécution ne peut pas continuer (suspendue). une grande différence lorsque la prise est remplacée par takeEvery. La fonction continuera à s'exécuter, c'est-à-dire que les deux consoles suivantes s'exécuteront,

et la méthode d'exécution de takeEvery est placée dans son rappel, voir le code ci-dessous.

yield takeEvery('takeBlur',()=>{console.log(payload.value)});

Il convient de souligner que cette fonction sera déclenchée à chaque fois que l'entrée change, donc à chaque fois qu'elle change, vous verrez que la console imprimera la valeur dans la console.

Ensuite, si l'entrée perd le focus, la méthode onBlur sera exécutée et this.props.dispatch({type:'takeBlur'}) est appelée

La prise dans takeInputChange a surveillé l'action takeBlur, puis il continuera à exécuter le contenu qui doit être exécuté

Cette prise est étudiée depuis longtemps de toute façon, je ne sais pas quand cette chose sera utile

Le. ci-dessus est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Expliquez en détail les compétences pratiques dans Immutable et React

Comment résoudre la compatibilité de la date et de l'heure easyui box ie Problèmes pratiques (tutoriel détaillé)

Utilisation de Native dans React pour implémenter le composant de visualisation d'images

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!