redux-sagaでのtakeの使い方

この記事では、redux-saga の take の詳しい使い方を中心に紹介していますが、編集者がとても良いと思ったので、参考としてシェアさせていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

私がずっと研究してきたAPIの使用方法を持ってきます

redux-sagaのエフェクト内のtake APIの使用方法は主にcall、put、selectに使われますが、takeはあまり使いません。どこで使用するかわかりません。とにかく、redux-saga によって書かれているので、その使い方があるはずです。まず、使い方を学びましょう:

take

take のパフォーマンスは takeEvery と同じですが、takeEvery とは異なり、アクションがトリガーされるたびに応答するのではなく、実行シーケンスで take ステートメントが実行されたときにのみアクションに応答します。

ジェネレーターで take ステートメントを使用してアクションを待機する場合、ジェネレーターはブロックされ、アクションが配布されるのを待ってから実行を続行します。

takeEvery は各アクションをリッスンして、処理関数を実行するだけです。 takeEvery は、いつどのように応答するかを制御できません。

しかし、take は異なります。アクションにいつ応答するか、アクションがトリガーされた後に何をするかをジェネレーター関数で決定できます。

最大の違い: take は実行フローに到達したときにのみ対応するアクションに応答しますが、takeEvery は登録されたアクションに応答します。

上記のコード:

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

入力値が変更されたとき, pass this.props.dispatch({type:'takeInputChange'}) とすると、この関数が呼び出されますが、takeメソッドに遭遇するため、実行を続行できません(一時停止) ここのtakeをtakeEveryに置き換えると非常に大変になります。つまり、次の 2 つのコンソールが実行され、そのコールバックに takeEvery 実行メソッドが配置されます。以下のコードを見てください

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

次に、入力がフォーカスを失うと、onBlur メソッドが実行されます。 this.props.dispatch が呼び出されます。 ({type:'takeBlur'});

takeInputChange のテイクは takeBlur アクションを監視しているため、実行する必要があるコンテンツの実行を継続します。

このテイクはとにかく長い間研究されてきたので、私は知りません、これがいつ役立つでしょうか？

以上がredux-sagaでのtakeの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。