redux學(xué)習(xí)筆記

基本介紹

  • 單向數(shù)據(jù)流:從父組件流向子組件盹廷,兄弟組件無(wú)法共享數(shù)據(jù)
  • State:React中的狀態(tài)砰碴,是只讀對(duì)象(react可以用個(gè)setState更改)
  • Reducer: 基本函數(shù)荐吵,用于對(duì)State的業(yè)務(wù)處理
  • Action: 普通對(duì)象,用于描述事件行為,改變State

store(數(shù)據(jù)源)=> component => action => reducer =>store(全新數(shù)據(jù)源)

安裝

    yarn add redux --save
    yarn add react-redux --save 

redux集成

  • 創(chuàng)建Action模塊
  • 創(chuàng)建Reducer模塊
  • 創(chuàng)建Store模塊
  • 通過(guò)connect方法將React組件和Redux連接起來(lái)
  • 添加Provider作為項(xiàng)目的根組件食侮,用于數(shù)據(jù)的存儲(chǔ)x

Redux調(diào)試工具安裝

  • 在Chrome中安裝Redux Devtools擴(kuò)展

      yarn add redux-devtools-extension 
    

項(xiàng)目中使用(基于react學(xué)習(xí)筆記的項(xiàng)目==reactAntBike => 編寫(xiě)菜單切換文字)

1. 在src中創(chuàng)建redux的文件夾荷并,并添加index.js文件

image.png
  • 第一步: 創(chuàng)建action行為合砂,在action目錄下創(chuàng)建index.js


    image.png
  • 第二步:創(chuàng)建對(duì)action數(shù)據(jù)源的數(shù)據(jù)處理,在reducer下創(chuàng)建index.js


    image.png
  • 第三步:創(chuàng)建數(shù)據(jù)源store源织,在store文件夾下創(chuàng)建index.js


    image.png
  • 第四步:在總index.js下引入provider翩伪,將react與redux的數(shù)據(jù)相結(jié)合


    image.png

這樣在控制臺(tái)就可以查看react


image.png

2. 在菜單中添加選中高亮

  • 第一步:獲取當(dāng)前地址


    image.png
  • 第二步:給menu組件綁定點(diǎn)擊事件以及設(shè)置選中值


    image.png

    image.png

3. 將點(diǎn)擊的菜單名稱記錄在redux中

  • 第一步:引入redux

      import { connect } from 'react-redux'  // 通過(guò)connect將react和redux相連
      import { switchMenu } from './../../redux/action' // 引用觸發(fā)事件行為
    
  • 第二步:將組件放進(jìn)redux里

      去掉定義NavLeft的export default,在低端導(dǎo)出
    
image.png
  • 第三步:在菜單點(diǎn)擊事件中谈息,將點(diǎn)擊的菜單名稱存儲(chǔ)在redux中
    注意缘屹,item變成對(duì)象,所以當(dāng)前選中高亮要變成item.props.eventKey


    image.png

4. 在header組件中獲取redux的數(shù)據(jù)源

  • 第一步:在組件中引用redux,并將export換成connect方式侠仇,并從redux中獲取數(shù)據(jù)


    image.png
image.png
  • 第二步:賦值


    image.png

這樣就可以切換+高亮了

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末轻姿,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌踢代,老刑警劉巖盲憎,帶你破解...
    沈念sama閱讀 223,126評(píng)論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異胳挎,居然都是意外死亡饼疙,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門(mén)慕爬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)窑眯,“玉大人,你說(shuō)我怎么就攤上這事医窿“跛Γ” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,941評(píng)論 0 366
  • 文/不壞的土叔 我叫張陵姥卢,是天一觀的道長(zhǎng)卷要。 經(jīng)常有香客問(wèn)我,道長(zhǎng)独榴,這世上最難降的妖魔是什么僧叉? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,294評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮棺榔,結(jié)果婚禮上瓶堕,老公的妹妹穿的比我還像新娘。我一直安慰自己症歇,他們只是感情好郎笆,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,295評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著忘晤,像睡著了一般宛蚓。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上德频,一...
    開(kāi)封第一講書(shū)人閱讀 52,874評(píng)論 1 314
  • 那天苍息,我揣著相機(jī)與錄音,去河邊找鬼壹置。 笑死竞思,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的钞护。 我是一名探鬼主播盖喷,決...
    沈念sama閱讀 41,285評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼难咕!你這毒婦竟也來(lái)了课梳?” 一聲冷哼從身側(cè)響起距辆,我...
    開(kāi)封第一講書(shū)人閱讀 40,249評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎暮刃,沒(méi)想到半個(gè)月后跨算,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,760評(píng)論 1 321
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡椭懊,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,840評(píng)論 3 343
  • 正文 我和宋清朗相戀三年诸蚕,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片氧猬。...
    茶點(diǎn)故事閱讀 40,973評(píng)論 1 354
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡背犯,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出盅抚,到底是詐尸還是另有隱情漠魏,我是刑警寧澤,帶...
    沈念sama閱讀 36,631評(píng)論 5 351
  • 正文 年R本政府宣布妄均,位于F島的核電站柱锹,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏丛晦。R本人自食惡果不足惜奕纫,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,315評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望烫沙。 院中可真熱鬧,春花似錦隙笆、人聲如沸锌蓄。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,797評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)瘸爽。三九已至,卻和暖如春铅忿,著一層夾襖步出監(jiān)牢的瞬間剪决,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,926評(píng)論 1 275
  • 我被黑心中介騙來(lái)泰國(guó)打工檀训, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留柑潦,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,431評(píng)論 3 379
  • 正文 我出身青樓峻凫,卻偏偏與公主長(zhǎng)得像渗鬼,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子荧琼,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,982評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容