ホームページ > 記事 > ウェブフロントエンド > 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('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 ( <p style={{position: 'relative'}}> <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 サイトの他の関連記事に注目してください。
推奨読書:
WeChat Web側でバックフォースリフレッシュを実装する方法以上がredux-sagaでのtakeの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。