課程
/前端開發(fā)
/React.JS
/在React中使用Redux數(shù)據(jù)流
state.id為什么要和action.id作比較,這個(gè)地方不太明白
2017-01-02
源自:在React中使用Redux數(shù)據(jù)流 5-2
正在回答
不知道你懂不懂?dāng)?shù)組的map方法,如果懂可能會(huì)更好理解。
這里的reducer拆分成了todo函數(shù)與todos函數(shù)
對(duì)于todo函數(shù)來說,它希望返回一個(gè)小對(duì)象,結(jié)構(gòu)大概是這樣的
{ ????id?:?1, ????text?:?learn1111, ????completed?:?false }
而對(duì)于todos函數(shù)來說,它希望返回一個(gè)數(shù)組,里面包含著像上面差不多的一個(gè)一個(gè)小對(duì)象
[{},?{},?{},?{}]
只不過返回的這個(gè)數(shù)組跟傳進(jìn)來的數(shù)組的相比肯定有了些變動(dòng),比如這里我們點(diǎn)擊其中的一個(gè)todo,肯定希望這個(gè)todo的complete從false變成true
所以下面的todos函數(shù)里面就用了map方法,
state.map((t)?=>?todo(t,?action)?)
這里的state其實(shí)是傳進(jìn)來的數(shù)組,t是傳進(jìn)來數(shù)組中的每一個(gè)小對(duì)象,這樣每個(gè)小對(duì)象都會(huì)傳進(jìn)todo函數(shù)執(zhí)行一遍,todo函數(shù)中如果發(fā)現(xiàn)action.id !== state.id 說明這個(gè)小對(duì)象不是我們點(diǎn)擊的,那這個(gè)小對(duì)象就應(yīng)該不變,原樣返回,如果相等,則說明這是我們點(diǎn)擊的那個(gè)小對(duì)象,則這個(gè)對(duì)象中的completed屬性就應(yīng)該取反,再把這個(gè)對(duì)象返回。
比如原先是這樣的一個(gè)數(shù)組
[ {id:1,text:1,completed:false},? {id:2,text:2,completed:false},? {id:3,text:3,completed:false} ]
我們點(diǎn)擊了第二項(xiàng),
這個(gè)數(shù)組被傳進(jìn)todos函數(shù)的state中,調(diào)用state.map((t) => todo(t, action))
然后第一個(gè)對(duì)象 {id:1,text:1,completed:false} 被當(dāng)作參數(shù) t 傳入 todo(t,?action)中,發(fā)現(xiàn)點(diǎn)擊的不是這個(gè)對(duì)象,則將?{id:1,text:1,completed:false} 原樣返回,
然后第二個(gè)對(duì)象被傳入todo函數(shù)中,發(fā)現(xiàn)是被點(diǎn)擊的對(duì)象所以改變其compted屬性然后返回
{id:2,text:2,completed:true},
第三個(gè)同樣,
這樣被返回的新數(shù)組就是下面這樣的
[ {id:1,text:1,completed:false},? {id:2,text:2,completed:true},? {id:3,text:3,completed:false} ]
啰啰嗦嗦寫一大堆,不知道你能不能看得懂,順便一提,這老師講成這樣,理解不了才是正常的。。。
我想問一下,你對(duì)react了解的多嗎,我有個(gè)問題想請(qǐng)教下
state.id 表示reducer里面的id, 而action.id 表示操作的那條todo的id。如果不相同,則不操作,相同則是要操作的那條todo,做取反操作。 ? 不知道說沒說錯(cuò)!
舉報(bào)
在react中使用redux數(shù)據(jù)流,通過一個(gè)樣例工程的開發(fā)了解具體原理
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2017-01-13
不知道你懂不懂?dāng)?shù)組的map方法,如果懂可能會(huì)更好理解。
這里的reducer拆分成了todo函數(shù)與todos函數(shù)
對(duì)于todo函數(shù)來說,它希望返回一個(gè)小對(duì)象,結(jié)構(gòu)大概是這樣的
而對(duì)于todos函數(shù)來說,它希望返回一個(gè)數(shù)組,里面包含著像上面差不多的一個(gè)一個(gè)小對(duì)象
只不過返回的這個(gè)數(shù)組跟傳進(jìn)來的數(shù)組的相比肯定有了些變動(dòng),比如這里我們點(diǎn)擊其中的一個(gè)todo,肯定希望這個(gè)todo的complete從false變成true
所以下面的todos函數(shù)里面就用了map方法,
這里的state其實(shí)是傳進(jìn)來的數(shù)組,t是傳進(jìn)來數(shù)組中的每一個(gè)小對(duì)象,這樣每個(gè)小對(duì)象都會(huì)傳進(jìn)todo函數(shù)執(zhí)行一遍,todo函數(shù)中如果發(fā)現(xiàn)action.id !== state.id 說明這個(gè)小對(duì)象不是我們點(diǎn)擊的,那這個(gè)小對(duì)象就應(yīng)該不變,原樣返回,如果相等,則說明這是我們點(diǎn)擊的那個(gè)小對(duì)象,則這個(gè)對(duì)象中的completed屬性就應(yīng)該取反,再把這個(gè)對(duì)象返回。
比如原先是這樣的一個(gè)數(shù)組
我們點(diǎn)擊了第二項(xiàng),
這個(gè)數(shù)組被傳進(jìn)todos函數(shù)的state中,調(diào)用state.map((t) => todo(t, action))
然后第一個(gè)對(duì)象 {id:1,text:1,completed:false} 被當(dāng)作參數(shù) t 傳入 todo(t,?action)中,發(fā)現(xiàn)點(diǎn)擊的不是這個(gè)對(duì)象,則將?{id:1,text:1,completed:false} 原樣返回,
然后第二個(gè)對(duì)象被傳入todo函數(shù)中,發(fā)現(xiàn)是被點(diǎn)擊的對(duì)象所以改變其compted屬性然后返回
{id:2,text:2,completed:true},
第三個(gè)同樣,
這樣被返回的新數(shù)組就是下面這樣的
啰啰嗦嗦寫一大堆,不知道你能不能看得懂,順便一提,這老師講成這樣,理解不了才是正常的。。。
2017-01-03
我想問一下,你對(duì)react了解的多嗎,我有個(gè)問題想請(qǐng)教下
2017-01-02
state.id 表示reducer里面的id, 而action.id 表示操作的那條todo的id。如果不相同,則不操作,相同則是要操作的那條todo,做取反操作。 ? 不知道說沒說錯(cuò)!