redux-sagaでのtakeの使い方を詳しく解説

今回はredux-sagaのtakeの詳しい使い方を中心に紹介しますので、参考にしてください。

この記事では、redux-saga での take の使い方を詳しく説明し、皆さんに共有します。詳細は次のとおりです:

長い間研究してきた API の使用方法を紹介します。 redux-sagaで有効なtake APIを使う ほとんどがcall、put、selectですが、takeは普段使う機会がなく、とにかく書いたのでどこで使うのかわかりません。 redux-saga によると、37 21 に関係なく、その使い方があるはずです。

最初にその使い方を見てみましょう:

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('takeBlur'});
   console.log(action, 'action');
   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 (
  

    
  
  )
}

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

以上があなたのために役立つことを願っています。

関連記事:

easyuiの日付とタイムボックスのIEの互換性に関する実践的な問題を解決する方法（詳細なチュートリアル）

Reactでネイティブを使用する画像表示コンポーネントを実装するには

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