本文介紹了關(guān)于redux-saga中take使用方法詳解，分享給大家，具體如下：

帶來一個自己研究好久的API使用方法.

redux-saga中effect中take這個API使用方式,用的多的是call,put,select,但take這個平常還真沒什么機會用上,也不清楚在哪里使用才好,不管怎么樣,既然是redux-saga寫出來的,肯定是有他的用法的,不管37 21,先學會使用方法再說.

先看看介紹:

take

take的表現(xiàn)同takeEvery一樣，都是監(jiān)聽某個action，但與takeEvery不同的是，他不是每次action觸發(fā)的時候都相應，而只是在執(zhí)行順序執(zhí)行到take語句時才會相應action。

當在genetator中使用take語句等待action時，generator被阻塞，等待action被分發(fā)，然后繼續(xù)往下執(zhí)行。

takeEvery只是監(jiān)聽每個action，然后執(zhí)行處理函數(shù)。對于何時相應action和 如何相應action，takeEvery并沒有控制權(quán)。

而take則不一樣，我們可以在generator函數(shù)中決定何時相應一個action，以及一個action被觸發(fā)后做什么操作。

最大區(qū)別：take只有在執(zhí)行流達到時才會響應對應的action，而takeEvery則一經(jīng)注冊，都會響應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 (
  <div style={{position: 'relative'}}>
   <Input onChange={this.changeHandle.bind(this)} onBlur={this.blur.bind(this)}/> 
  </div>
  )
}

頁面上有一個input,綁定了兩個方法,第一個是onchange方法,一個是onBlur方法,

當input值改變 的時候,通過 this.props.dispatch({type:'takeInputChange'}),調(diào)用此函數(shù),但是因為遇到了take的方法,不能往下繼續(xù)執(zhí)行了(暫停了),如果這里的take換成了takeEvery則大有不同,函數(shù)會繼續(xù)執(zhí)行,就是下面的兩個console會執(zhí)行,

而takeEvery執(zhí)行的方法則放在它的回調(diào)里了,看下面代碼

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

需要強調(diào)的是每次input改變的時候都會觸發(fā)這個函數(shù),所以每次改變的時候,會看到控制臺都會打印一次console里的值.

接下來,如果input失去焦點后,則會執(zhí)行onBlur方法,此時調(diào)用this.props.dispatch({type:'takeBlur'});

在takeInputChange里的take因為監(jiān)聽到了takeBlur這個action,那么就會繼續(xù)執(zhí)行需要執(zhí)行的內(nèi)容.

這個take反正是研究了還算長的時間,不知道這個東西在哪些時候能夠派的上用場

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論