【React】----react-redux
阿新 • • 發佈:2018-11-02
sta react tor com 重復 s函數 函數 圖片 當前 轉載於https://www.cnblogs.com/nanianqiming/p/9879596.html
1、react-redux 是一個第三方插件使我們在react上更方便的來使用redux這個數據結構
react-redux 提供connect方法,用於UI組件生成容器組件,connect的意思就是將兩種組件連接起來
2、基本用法
1、引入
在跟組件中引入 Provider
import {Provider} from ‘react-redux’
用Provider標簽將所有的跟組建嵌套
Provider的做用就是將Store傳遞給每一個組件,這樣每個組件都可以使用Store中的數據,不需要再重復引入Store
2、connect進行連接
(1)、在子組件中引入connect
import { connect } from ‘react-redux‘
(2)、進行連接
export default connect ( mapStateToProps , mapDispatchToProps )()
connect()():
第一個括號裏面有三個參數
第一個參數:mapStateToProps
解釋:
mapStateToProps其實就是一個規則,把store裏面的state映射到當前組件的 props中
第二個參數:mapDispatchToProps
解釋:
(1)、mapDispatcherToProps 這個方法用來修改數據,這個方法中有一個參數為dispatch.
(2)、如果說mapStateToProps是將store的數據拿到當前組件使用,那麽mapDispatcherToProps就是提高了一些方法讓你如果進行數據的修改(方法需要自己去寫,依舊要把action返回給Store),這個方法被映射的this.props中。dispatch是用來發送action的
第二個括號:需要傳遞組件名稱
mapStateToProps這個函數的主要用途就是將state中的items數據映射到prop中的items中去,簡單來說就是我們調用公共的數據store。但是頻繁的在組件中引入store操作過於麻煩,因此我們將當前list組件進行了一個數據連接,這個數據就是從store中的state映射到props中 mapStateToProps 作用: 建立一個從(外部的)state對象到(UI 組件的)props對象的映射關系。 mapStateToProps會訂閱 Store,每當state更新的時候,就會自動執行,重新計算 UI 組件的參數,從而觸發 UI 組件的重新渲染 調用的時候this.props.【key值】 mapDispatchToProps 作用: 用來建立 UI 組件的參數到store.dispatch方法的映射。也就是說,它定義了哪些用戶的操作應該當作 Action,傳給 Store。它可以是一個函數,也可以是一個對象 mapDispatchProps的用法 const mapDispatchProps = (dispatch)=>({ 函數名稱:function(){ dispatch(action) } }) mapDispatchProps函數需要返回出去一個函數 這個函數中用dispatch傳遞一個action 最終子組件變成了UI組件 connect返回最終的容器組件,react-redux建議我們把所有的數據都放在store中 調用:this.props.函數名稱()
mapStateToProps這個函數的主要用途就是將state中的items數據映射到prop中的items中去,簡單來說就是我們調用公共的數據store。但是頻繁的在組件中引入store操作過於麻煩,因此我們將當前list組件進行了一個數據連接,這個數據就是從store中的state映射到props中 mapStateToProps 作用: 建立一個從(外部的)state對象到(UI 組件的)props對象的映射關系。 mapStateToProps會訂閱 Store,每當state更新的時候,就會自動執行,重新計算 UI 組件的參數,從而觸發 UI 組件的重新渲染 調用的時候this.props.【key值】 mapDispatchToProps 作用: 用來建立 UI 組件的參數到store.dispatch方法的映射。也就是說,它定義了哪些用戶的操作應該當作 Action,傳給 Store。它可以是一個函數,也可以是一個對象 mapDispatchProps的用法 const mapDispatchProps = (dispatch)=>({ 函數名稱:function(){ dispatch(action) } }) mapDispatchProps函數需要返回出去一個函數 這個函數中用dispatch傳遞一個action 最終子組件變成了UI組件 connect返回最終的容器組件,react-redux建議我們把所有的數據都放在store中 調用:this.props.函數名稱()
【React】----react-redux