So verwenden Sie Take in Redux-Saga

Dieser Artikel führt Sie hauptsächlich in die detaillierte Erklärung der Verwendung von take in redux-saga ein. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

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

Die in Redux-Saga geltende Take-API-Nutzungsmethode heißt meistens Call, Put und Select, aber Take ist häufiger. Ich habe wirklich keine Chance, es zu verwenden, und ich weiß nicht, wo ich es verwenden soll. Da es von Redux-Saga geschrieben wurde, muss es seine Verwendung finden Wie man es zuerst verwendet Aktion, aber der Unterschied zu takeEvery besteht darin, dass sie nicht jedes Mal ausgelöst wird, wenn die Aktion ausgelöst wird. Alle entsprechen, aber die entsprechende Aktion wird nur ausgeführt, wenn die Ausführungssequenz die take-Anweisung erreicht.

Wenn Sie die Take-Anweisung im Generator verwenden, 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.

Aber take ist anders. In der Generatorfunktion können wir 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 Code oben:

Es gibt eine Eingabe auf der Seite, zwei davon Das sind gebundene Methoden, die erste ist die onchange-Methode, die andere ist die onBlur-Methode.

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

Wenn sich der Eingabewert ändert, wird diese Funktion über this.props.dispatch({type:'takeInputChange'} aufgerufen. ), aber aufgrund der Wenn die Take-Methode erreicht ist, kann die Ausführung nicht fortgesetzt werden (angehalten). Wenn die Take-Methode hier durch TakeEvery ersetzt wird, wird die Funktion weiterhin ausgeführt, dh die folgenden beiden Konsolen werden ausgeführt ausführen,

und Die takeEvery-Ausführungsmethode wird in ihren Rückruf eingefügt

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 sollte betont werden, dass diese Funktion ausgeführt wird Wird jedes Mal ausgelöst, wenn sich die Eingabe ändert. Bei jeder Änderung sehen Sie, dass die Konsole den Wert in der Konsole ausgibt.

Als nächstes wird die onBlur-Methode ausgeführt, wenn die Eingabe den Fokus verliert this.props.dispatch({ type:'takeBlur'});

Da der Take in takeInputChange die takeBlur-Aktion überwacht hat, wird er weiterhin den Inhalt ausführen, der ausgeführt werden muss.

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

Diese Einstellung ist nach Recherche sowieso eine gute Sache. Ich weiß lange nicht, wann diese Sache nützlich sein kann.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Take in Redux-Saga. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!