So verwenden Sie Take in Redux-Saga

Dieses Mal zeige ich Ihnen, wie Sie take in redux-saga verwenden. Was sind die Vorsichtsmaßnahmen bei der Verwendung von take in redux-saga?

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 obige Code:

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 (angehalten) werden Ein großer Unterschied besteht darin, dass takeEvery durch takeEvery ersetzt wird. Die Funktion wird weiterhin ausgeführt, d

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

Was hervorzuheben ist, ist, dass diese Funktion jedes Mal ausgelöst wird, wenn sich die Eingabe ändert. Sie werden also bei jeder Änderung sehen, dass die Konsole den Wert in der Konsole druckt.

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

Der Take in takeInputChange hat takeBlur überwacht Aktion, dann wird der Inhalt, der ausgeführt werden muss, weiterhin ausgeführt

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

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

Ich glaube, ich habe den Fall in diesem Artikel gelesen. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So implementieren Sie eine Back-Force-Aktualisierung auf dem WeChat-Webclient

Legen Sie den Cookie-Ablauf für die automatische Aktualisierung fest und automatische Erfassung

So verwenden Sie das React BootStrap-Framework

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!