本文主要和大家介紹了關於redux-saga中take使用方法詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
帶來一個自己研究好久的API使用方法.
redux-saga中effect中take這個API使用方式,用的多的是call,put,select,但take這個平常還真沒什麼機會用上,也不清楚在哪裡使用才好,不管怎麼樣,既然是redux-saga寫出來的,肯定是有他的用法的,不管37 21,先學會使用方法再說.
先看看介紹:
take
take的表現同takeEvery一樣，都是監聽某個action，但與takeEvery不同的是，他不是每次action觸發的時候都相應，而只是在執行順序執行到take語句時才會相應action。
當在genetator中使用take語句等待action時，generator被阻塞，等待action被分發，然後繼續往下執行。
takeEvery只是監聽每個action，然後執行處理函數。對於何時對應action和 如何對應action，takeEvery並沒有控制權。
而take則不一樣，我們可以在generator函數中決定何時對應一個action，以及一個action被觸發後做什麼操作。
最大差異：take只有在執行流達到時才會回應對應的action，而takeEvery則一經註冊，都會回應action。
上程式碼:
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>
)
}頁面上有一個input,綁定了兩個方法,第一個是onchange方法,一個是onBlur方法,
當input值改變的時候,透過this.props.dispatch({type:'takeInputChange'}),呼叫此函數,但是因為遇到了take的方法,不能往下繼續執行了(暫停了),如果這裡的take換成了takeEvery則大有不同,函數會繼續執行,就是下面的兩個console會執行,
而takeEvery執行的方法則放在它的回呼裡了,看下面代碼
yield takeEvery('takeBlur',()=>{console.log(payload.value)});需要強調的是每次input改變的時候都會觸發這個函數,所以每次改變的時候,會看到控制台都會印出一次console裡的值.
接下來,如果input失去焦點後,則會執行onBlur方法,此時呼叫this.props.dispatch({type:'takeBlur'} );
在takeInputChange裡的take因為監聽到了takeBlur這個action,那麼就會繼續執行需要執行的內容.
這個take反正是研究了還算長的時間,不知道這個東西在哪些時候能夠派的上用場。
以上是redux-saga中take如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
