react-redux

一乾忱、什么是react-redux

React-Redux是Redux的官方React綁定消玄。 它允許您的React組件從Redux存儲中讀取數(shù)據(jù)脚翘,并將操作分派給存儲以更新數(shù)據(jù)贪绘。
它由二個重要的部分組成徘键,一個是<Provider />組件芳誓,另一個是connect()是react-redux提供的一個柯里化的函數(shù), 用于連接redux

二、學習網(wǎng)址

https://react-redux.js.org/docs/getting-started react-redux官網(wǎng)

三啊鸭、如何使用

npm install --save react-redux 安裝
import { Provider } from 'react-redux' Provider 的引入
import { connect } from 'react-redux' connect的引入

四锹淌、關(guān)于Provider

Provider是react-redux提供的一個組件,把這個組件包在最外層赠制,這個組件接收一個參數(shù)赂摆,就是store, store是通過redux提供的createStore方法創(chuàng)建的钟些。任何一個內(nèi)部組件烟号,需要用到store里的state或者其它就直接通過connect一下即可。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';

import store from './store';
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>, 
document.getElementById('root'));

五政恍、關(guān)于connect

connect有兩個括號汪拥, connect有兩個括號,第一個括號傳mapStateToProps和mapDispatchToProps篙耗,用于把這兩個方法的返回值注入到當前組件的props, 第二個括號為當前組件迫筑。

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

connect的第一個括號也可以直接傳(mapStateToProps, actionCreators), actionsCreators里的每個creator就會被映射到組件的props上宪赶,并且,這些creators就自動具備了dispatch的功能

export default connect(mapStateToProps, { add, reduce, addAsync })(Counter);

mapStateToProps:
意思是把store里的state遷移到當前組件的props上脯燃,返回一個對象

// mapStateToProps搂妻,意思是把store里的state遷移到當前組件的props上,返回一個對象
const mapStateToProps = (state) => {
  const {
    count,
    isLoading
  } = state.cart;
  return {
    count,
    isLoading
  }
}

mapStateToProps:
意思是把actionCreator里創(chuàng)建的action dispatch辕棚,并且做為一個方法映射到當前組件的props上欲主,返回一個對象. 可以不這樣用

const mapDispatchToProps = (dispatch) => {
  return {
    reduceCount: () => {
      dispatch(reduce())
    },
    addCount: () => {
      dispatch(add())
    }
  }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市逝嚎,隨后出現(xiàn)的幾起案子扁瓢,更是在濱河造成了極大的恐慌,老刑警劉巖补君,帶你破解...
    沈念sama閱讀 216,997評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件涤妒,死亡現(xiàn)場離奇詭異,居然都是意外死亡赚哗,警方通過查閱死者的電腦和手機她紫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,603評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來屿储,“玉大人贿讹,你說我怎么就攤上這事」宦樱” “怎么了民褂?”我有些...
    開封第一講書人閱讀 163,359評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長疯潭。 經(jīng)常有香客問我赊堪,道長,這世上最難降的妖魔是什么竖哩? 我笑而不...
    開封第一講書人閱讀 58,309評論 1 292
  • 正文 為了忘掉前任哭廉,我火速辦了婚禮,結(jié)果婚禮上相叁,老公的妹妹穿的比我還像新娘遵绰。我一直安慰自己,他們只是感情好增淹,可當我...
    茶點故事閱讀 67,346評論 6 390
  • 文/花漫 我一把揭開白布椿访。 她就那樣靜靜地躺著,像睡著了一般虑润。 火紅的嫁衣襯著肌膚如雪成玫。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,258評論 1 300
  • 那天,我揣著相機與錄音哭当,去河邊找鬼猪腕。 笑死,一個胖子當著我的面吹牛荣病,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播渗柿,決...
    沈念sama閱讀 40,122評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼个盆,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了朵栖?” 一聲冷哼從身側(cè)響起颊亮,我...
    開封第一講書人閱讀 38,970評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎陨溅,沒想到半個月后终惑,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,403評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡门扇,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,596評論 3 334
  • 正文 我和宋清朗相戀三年雹有,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片臼寄。...
    茶點故事閱讀 39,769評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡霸奕,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出吉拳,到底是詐尸還是另有隱情质帅,我是刑警寧澤,帶...
    沈念sama閱讀 35,464評論 5 344
  • 正文 年R本政府宣布留攒,位于F島的核電站煤惩,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏炼邀。R本人自食惡果不足惜魄揉,卻給世界環(huán)境...
    茶點故事閱讀 41,075評論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望拭宁。 院中可真熱鬧什猖,春花似錦、人聲如沸红淡。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,705評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽在旱。三九已至摇零,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間桶蝎,已是汗流浹背驻仅。 一陣腳步聲響...
    開封第一講書人閱讀 32,848評論 1 269
  • 我被黑心中介騙來泰國打工谅畅, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人噪服。 一個月前我還...
    沈念sama閱讀 47,831評論 2 370
  • 正文 我出身青樓毡泻,卻偏偏與公主長得像,于是被迫代替她去往敵國和親粘优。 傳聞我的和親對象是個殘疾皇子仇味,可洞房花燭夜當晚...
    茶點故事閱讀 44,678評論 2 354

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