redux react-redux 理論理解

概念

首頁鳴謝黑馬程序員，以此記錄筆記 redux是javaScript狀態容器，提供可預測化的狀態管理。
Redux除了和react一塊兒使用，還支持其餘界面庫。它體積小精悍（只有2KB，包括依賴）

redux 三大核心

• 1.單一數據源
  
• 2.State是隻讀的
  
• 3.使用純函數類執行修改

核心理解

• 首先component中已經導入store、action。組件經過store.dispatch(action)發送一個action，一但發送action就會觸發reducer，reducer經過相應的actionType執行具體邏輯，經過return返回state，並把state傳給store。store通知（經過 store.subscribe(callback) 註冊監聽器）具體的component;subscribe回調函數裏經過store.getState()就能夠拿到更新後的state了

react-redux

• 緣由：在redux中，若是要發送action，必須先導入store，action，再經過dispatch發送，就會觸發reducer，reducer返回state。
  當組件須要獲取最新state時，首先得導入store，再經過 store.subscribe(callback) 註冊監聽器，在subscribe回調函數裏經過store.getState()就能夠拿到更新後的state了。若是到真是開發中使用redux太複雜了。
  於是Redux官方出了React-redux可以使你React組件從Redux store中很方便的讀取數據，而且向store中分發action以此來更新數據 React這個UI框架是以組件來進行驅動的，因此react-redux中有兩個重要的部分。
  

• Provider: 這個組件可以使你整個app都能獲取到store中的數據
  
  • 1.Provider包裹在根組件最外層，使全部子組件均可以拿到State
  • 2.Provider接收store做爲props，而後經過context往下傳，這樣react中任何組件均可以經過context獲取store
  • 解決了容器組件可能存在很深的層級，防止一層一層的傳store，provider做用在於讓組件方便拿到state，其原理運用了react中的context。
• connect: 這個方法可以使組件和store進行關聯
  • 1.Provider內部組件若是想要使用state中的數據，就必需要connect進行一層包裹封裝，換句話說就是必需要被connect進行增強
  • 2.connect就是方便咱們組件獲取store中state

react-redux 簡單購物車加減計算實現(思路總結)

demo

Provider組件實踐（app.js）

• 1.導入Provider組件，在react-redux中進行導入
  
• 2.須要利用Provider組件，對咱們整個結構進行導入
  
• 3.給咱們Provider組件設置store的屬性，而這個值就是咱們經過createStore構建出來的store實例對象

connect

ComA組件 加法 發送action

• 1.導入connect
• 2.利用connect對組件進行增強
  connect(要接受數據的函數， 要發送action的函數)(放入要增強的組件)
• 3.構建了一個函數 mapDispatchToProps(dispatch),dispatch就是用來發送action的
• 4.在這個函數裏面就能夠返回一個對象，key是方法名，value：調用dispatch去發送action
• 5. 在組件裏的內容 就能夠經過 this.props來拿到這個方法
     

ComB組件 展現數據 接收最新state

• 1.導入connect
• 2.利用connect對組件進行增強
• 3.ComB屬於接受數據，就須要實現connect的第一個參數
• 4.mapStateTpProps裏面的一個參數就是咱們關心的 state
• 5.把這個state進行return才能在組件的內部獲取到 最新的數據
• 6. ComB是否能拿到數據，關鍵點是 reducer
• 7.只有reducer裏面返回了新的state的時候，咱們組件ComB才能獲取到最新state