Comment utiliser Take dans Redux-Saga

Cet article vous présente principalement l'explication détaillée de l'utilisation de take dans redux-saga. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

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

La méthode d'utilisation de l'API take en vigueur dans redux-saga est principalement appelée call, put et select, mais take. est plus courant. Je n'ai vraiment pas l'occasion de l'utiliser, et je ne sais pas où l'utiliser. Quoi qu'il en soit, puisqu'il est écrit par redux-saga, il doit y avoir son utilisation. Peu importe 37 21, apprenez. comment l'utiliser en premier.

Jetons d'abord un coup d'œil à l'introduction :

take

Les performances de take sont les mêmes que celles de takeEvery Il surveille un certain. action, mais la différence avec takeEvery est qu'elle n'est pas déclenchée à chaque fois que l'action est déclenchée. Tous correspondent, mais l'action correspondante ne se produira que lorsque la séquence d'exécution atteint l'instruction take.

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, deux des qui sont des méthodes liées, 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 à cause de Lorsque la méthode take est atteinte, l'exécution ne peut pas continuer (en pause). Si la prise ici est remplacée par takeEvery, la fonction continuera à s'exécuter, c'est-à-dire que les deux consoles suivantes le feront. exécuter,

et La méthode d'exécution takeEvery est placée dans son rappel. Regardez le code suivant

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

Il convient de souligner que cette fonction sera. sera déclenché à chaque fois que l'entrée change, donc à chaque fois que vous changez, 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'});

Étant donné que la prise dans takeInputChange a surveillé l'action takeBlur, elle continuera à exécuter le contenu qui doit être exécuté.

Cette prise est de toute façon une bonne chose après recherche. Pendant longtemps, je ne sais pas quand cette chose peut être utile.

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!