Ausführliche Erklärung zur Verwendung von take in redux-saga

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung zur Verwendung von take in redux-saga vor. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Dieser Artikel stellt eine detaillierte Erklärung zur Verwendung von take in redux-saga vor und teilt sie mit allen. Die Details sind wie folgt:

Bringen Sie mir eine API-Nutzungsmethode, die ich studiert habe eine lange Zeit.

redux – Die Möglichkeit, die Take-API im Effekt in Saga zu verwenden, ist Call, Put und Select. Es gibt jedoch wirklich keine Möglichkeit, Take zu verwenden, und ich weiß nicht, wo Wie auch immer, da es von Saga geschrieben wurde, muss es seine Verwendung haben. Lernen Sie zuerst, wie man es verwendet:

take

takes Leistung Wie takeEvery überwacht es eine Aktion, reagiert aber im Gegensatz zu takeEvery nicht jedes Mal, wenn die Aktion ausgelöst wird, sondern nur auf die Aktion, wenn die take-Anweisung in der Ausführungssequenz ausgeführt wird.

Wenn die Take-Anweisung im Generator verwendet wird, um auf eine Aktion zu warten, wird der Generator blockiert, wartet auf die Verteilung der Aktion und setzt dann die Ausführung fort.

takeEvery hört sich einfach jede Aktion an und führt dann die Verarbeitungsfunktion aus. takeEvery hat keine Kontrolle darüber, wann und wie reagiert wird.

Doch take ist anders. Wir können in der Generatorfunktion entscheiden, wann wir auf eine Aktion reagieren und was wir tun, nachdem eine Aktion ausgelöst wurde.

Der größte Unterschied: take reagiert erst auf die entsprechende Aktion, wenn der Ausführungsfluss erreicht ist, während takeEvery auf die Aktion reagiert, sobald sie registriert ist.

Der obige Code:

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

Es gibt eine Eingabe auf der Seite, die an zwei Methoden gebunden ist, die erste ist die onchange-Methode, die andere ist die onBlur-Methode,

Wenn sich der Eingabewert ändert, wird diese Funktion über this.props.dispatch({type:'takeInputChange'}) aufgerufen, aber da die Take-Methode angetroffen wird, kann die Ausführung nicht fortgesetzt werden (angehalten). Wenn der Take hier durch takeEvery ersetzt wird ist ganz anders. Die Funktion wird weiterhin ausgeführt, d Hervorzuheben ist, dass diese Funktion jedes Mal ausgelöst wird, wenn sich die Eingabe ändert. Sie werden also jedes Mal sehen, dass die Konsole den Wert in der Konsole ausgibt.

Als nächstes wird die Eingabe verloren focus, Die onBlur-Methode wird ausgeführt. This.props.dispatch({type:'takeBlur'}) wird aufgerufen.

Da die takeInputChange-Aktion die takeBlur-Aktion überwacht hat, wird sie fortgesetzt um auszuführen, was ausgeführt werden muss.

Diese Einstellung wurde sowieso schon lange untersucht. Ich weiß nicht, wann sich dieses Ding als nützlich erweisen wird.

Das Obige ist, was ich Für alle zusammengestellt. Ich hoffe, dass es in Zukunft nützlich sein wird.

Verwandte Artikel:

Erläutern Sie ausführlich die praktischen Fähigkeiten in Immutable und React

So lösen Sie die Kompatibilität von Easyui-Datum und -Uhrzeit box dh Praktische Probleme (ausführliches Tutorial)

Native in React verwenden, um die Bildanzeigekomponente zu implementieren

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung von take in redux-saga. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!