Comment utiliser Take dans Redux-Saga

Cette fois, je vais vous montrer comment utiliser take in redux-saga. Quelles sont les précautions lors de l'utilisation de take in redux-saga. Voici un cas pratique, jetons un coup d'oeil.

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

Lorsque l'instruction take est utilisée 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 comme 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 suivant

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

Ce qu'il faut souligner, c'est 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é le takeBlur ; action, alors 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

Comment implémenter l'actualisation de force arrière sur le client Web WeChat

Définir l'expiration des cookies pour la mise à jour automatique et acquisition automatique

Comment utiliser le framework React BootStrap

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!