【巷子】---react-redux---【react】


一、Redux與組件

 

react-redux是一個第三方插件使我們在react上更方便的來使用redux這個數據架構

 

React-Redux提供connect方法,用於從UI組件生成容器組件,connect的意思就是將兩種組件連起來

 

參考文章:https://github.com/reduxjs/react-redux

 

二、react-redux的基本用法

(1)、引入

import {Provider} from "react-redux";

 

在根組件外層嵌套一個Provider.   Provider的作用就是將store傳遞給每一個子組件,每一個子組件就都可以使用store了,不需要重復的在組件中引入store

(2)、connect進行連接

(1)、在子組件中引入connect

import { connect } from "react-redux";

 

 

(2)進行連接

export default connect(mapStateToProps)(組件名稱)

 

 

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.函數名稱()

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM