您好,登錄后才能下訂單哦!
怎么在redux-saga中使用take?相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個(gè)問題。
redux-saga中effect中take這個(gè)API使用方式,用的多的是call,put,select,但take這個(gè)平常還真沒什么機(jī)會(huì)用上,也不清楚在哪里使用才好,不管怎么樣,既然是redux-saga寫出來的,肯定是有他的用法的,不管37 21,先學(xué)會(huì)使用方法再說.
先看看介紹:
take
take的表現(xiàn)同takeEvery一樣,都是監(jiān)聽某個(gè)action,但與takeEvery不同的是,他不是每次action觸發(fā)的時(shí)候都相應(yīng),而只是在執(zhí)行順序執(zhí)行到take語句時(shí)才會(huì)相應(yīng)action。
當(dāng)在genetator中使用take語句等待action時(shí),generator被阻塞,等待action被分發(fā),然后繼續(xù)往下執(zhí)行。
takeEvery只是監(jiān)聽每個(gè)action,然后執(zhí)行處理函數(shù)。對(duì)于何時(shí)相應(yīng)action和 如何相應(yīng)action,takeEvery并沒有控制權(quán)。
而take則不一樣,我們可以在generator函數(shù)中決定何時(shí)相應(yīng)一個(gè)action,以及一個(gè)action被觸發(fā)后做什么操作。
最大區(qū)別:take只有在執(zhí)行流達(dá)到時(shí)才會(huì)響應(yīng)對(duì)應(yīng)的action,而takeEvery則一經(jīng)注冊(cè),都會(huì)響應(yī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> ) }
頁面上有一個(gè)input,綁定了兩個(gè)方法,第一個(gè)是onchange方法,一個(gè)是onBlur方法,
當(dāng)input值改變 的時(shí)候,通過 this.props.dispatch({type:'takeInputChange'}),調(diào)用此函數(shù),但是因?yàn)橛龅搅藅ake的方法,不能往下繼續(xù)執(zhí)行了(暫停了),如果這里的take換成了takeEvery則大有不同,函數(shù)會(huì)繼續(xù)執(zhí)行,就是下面的兩個(gè)console會(huì)執(zhí)行,
而takeEvery執(zhí)行的方法則放在它的回調(diào)里了,看下面代碼
yield takeEvery('takeBlur',()=>{console.log(payload.value)});
需要強(qiáng)調(diào)的是每次input改變的時(shí)候都會(huì)觸發(fā)這個(gè)函數(shù),所以每次改變的時(shí)候,會(huì)看到控制臺(tái)都會(huì)打印一次console里的值.
接下來,如果input失去焦點(diǎn)后,則會(huì)執(zhí)行onBlur方法,此時(shí)調(diào)用this.props.dispatch({type:'takeBlur'});
在takeInputChange里的take因?yàn)楸O(jiān)聽到了takeBlur這個(gè)action,那么就會(huì)繼續(xù)執(zhí)行需要執(zhí)行的內(nèi)容.
這個(gè)take反正是研究了還算長(zhǎng)的時(shí)間,不知道這個(gè)東西在哪些時(shí)候能夠派的上用場(chǎng)
看完上述內(nèi)容,你們掌握怎么在redux-saga中使用take的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。