首頁 > web前端 > js教程 > 主體

關於在redux-saga中詳細講解take使用方法

亚连
發布: 2018-06-04 10:48:55
原創
2249 人瀏覽過

本篇文章主要介紹了關於redux-saga中take使用方法詳解,現在分享給大家,也給大家做個參考。

本文介紹了關於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(&#39;takeBlur&#39;});
   console.log(action, &#39;action&#39;);
   console.log(payload.value);
  // }

 },
 * takeBlur() {
  console.log(323)
 },
}
登入後複製
changeHandle(e){
 this.props.dispatch({type:&#39;takeInputChange&#39;,payload:{value:e.target.value}})
}
blur(){
 this.props.dispatch({type:&#39;takeBlur&#39;})
}
render() {

 return (
  <p style={{position: &#39;relative&#39;}}>
   <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(&#39;takeBlur&#39;,()=>{console.log(payload.value)});
登入後複製

需要強調的是每次input改變的時候都會觸發這個函數,所以每次改變的時候,會看到控制台都會打印一次console裡的值.

接下來,如果input失去焦點後,則會執行onBlur方法,此時呼叫this.props.dispatch({type:'takeBlur'});

在takeInputChange裡的take因為監聽到了takeBlur這個action,那麼就會繼續執行需要執行的內容.

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

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

詳細為你講解Immutable及React 中實踐技巧

如何解決easyui日期時間框ie的兼容的實際問題(詳細教學)

使用React中的Native實作圖片檢視元件

以上是關於在redux-saga中詳細講解take使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!