日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

react-redux的connect用法詳解_React

作者：一杯清泉 ? 更新時間： 2023-03-28 編程語言

一、UI組件和容器組件

React-Redux 將所有組件分成兩大類：UI 組件和容器組件。

  • UI 組件：只負責 UI 的呈現，不帶有任何業務邏輯，沒有狀態state值的使用，所以的參數是通過this.props獲取。
  • 容器組件：負責管理數據和業務邏輯，不負責 UI 的呈現，有業務邏輯，并且使用Redux提供的API。

對于上面的AppUI就是一UI組件，App就是一個容器組件。

二、connect

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

1、導入

import { connect } from 'react-redux'

2、使用

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

connect方法可以省略mapStateToProps參數，那樣的話，UI 組件就不會訂閱Store，就是說 Store 的更新不會引起 UI 組件的更新。

  • mapStateToProps：更新props————>作為輸入源。返回一個對象，key為UI界面對應的名稱，value為state處理的結果
  • mapDispatchToProps：更新action————>作為輸出源。觸發action更新reducer，進而更新state，從而驅動參數1變化，引起UI數據的變化

通過這個兩參數的自動調用方式，將UI和業務邏輯分開，UI組件通過props顯示，沒有任何業務邏輯，容器組件負責邏輯業務。下面詳解這兩個參數

三、mapStateToProps

建立一個從（外部的）state對象到（UI 組件的）props對象的映射關系。作為函數，mapStateToProps執行后應該返回一個對象，里面的每一個鍵值對就是一個映射。

mapStateToProps會訂閱 Store，每當state更新的時候，就會自動執行，重新計算 UI 組件的參數，從而觸發 UI 組件的重新渲染。

mapStateToProps的第一個參數總是state對象，還可以使用第二個參數，代表容器組件的props對象。使用ownProps作為參數后，如果容器組件的參數發生變化，也會引發 UI 組件重新渲染。

下面以加減數字為例說明：

<div>
    <button style={{width: 40, height: 40}} onClick={onIncreaseClick}>+</button>
    <text style={{padding: 40}}>{value}</text>
    <button style={{width: 40, height: 40}} onClick={onReduceClick}>-</button>
</div>

1、一個參數

const mapStateToProps = (state) => {
    return {
         value: state.count //UI組件中需要什么參數，對象中就寫哪些參數
     }
}

2、兩個參數

const mapStateToProps = (state, ownProps) => {
    return {
        value: state.count //UI組件中需要什么參數，對象中就寫哪些參數
    }
}

四、mapDispatchToProps

mapDispatchToProps是connect函數的第二個參數，用來建立 UI 組件的參數到store.dispatch方法的映射。也就是說，它定義了哪些用戶的操作應該當作 Action，傳給 Store。它可以是一個函數，也可以是一個對象。

1、作為函數

如果mapDispatchToProps是一個函數，會得到dispatch和ownProps（容器組件的props對象）兩個參數。作為函數，應該返回一個對象，該對象的每個鍵值對都是一個映射，定義了 UI 組件的參數怎樣發出 Action。

dispach(action)發出消息。

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        onIncreaseClick: () => dispatch({type: 'increase'}),
        onReduceClick: () => dispatch({type: 'reduce'})
    }
}

2、作為對象

const mapDispatchToProps = {
    onIncreaseClick: () => ({type: 'increase'}),
    onReduceClick: () => ({type: 'reduce'})
};
const mapDispatchToProps = (dispatch) => ({
    onIncreaseClick() {
       dispatch({type: 'increase'})
    },
    onReduceClick() {
        dispatch({type: 'reduce'})
    }
})

這兩個使用的效果一樣。通過connect，store.subscribe也不需要了。通過connnect方法，最終的代碼：

import React, {Component} from 'react'
import {connect} from "react-redux";
 
class App extends Component {
 
    render() {
        const {value, onIncreaseClick, onReduceClick} = this.props
        return (
            <div>
                <button style={{width: 40, height: 40}} onClick={onIncreaseClick}>+</button>
                <text style={{padding: 40}}>{value}</text>
                <button style={{width: 40, height: 40}} onClick={onReduceClick}>-</button>
            </div>
        );
 
    }
}
 
const mapStateToProps = (state) => {
        return {
            value: state.count
        }
}
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        onIncreaseClick: () => dispatch({type: 'increase'}),
        onReduceClick: () => dispatch({type: 'reduce'})
    }
}
 
export default connect(mapStateToProps, mapDispatchToProps)(App);

五、Provider

1、導入

import {Provider} from "react-redux";

2、使用

Provider在根組件外面包了一層，這樣一來，App的所有子組件就默認都可以拿到state了

 <Provider store={store}>
            <App/>
 </Provider>

效果如下：http://localhost:3000/

原文鏈接：https://blog.csdn.net/yoonerloop/article/details/112058929

欄目分類
最近更新