redux-sagaでのtakeの使い方

今回は、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>
  )
}

ページ上に 2 つのメソッドにバインドされた入力があります。1 つ目は onchange メソッド、もう 1 つは onBlur メソッドです。

入力値が変更されると、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 アクションを監視しているため、実行する必要があるコンテンツは実行され続けます。これがいつ役立つかはわかりません

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Cookieの有効期限、自動更新、自動取得を設定する

React BootStrapフレームワークの使用方法

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