react-redux中的connect方法解析

最新推荐文章于 2025-06-01 09:07:23 发布

转载最新推荐文章于 2025-06-01 09:07:23 发布 · 1.2k 阅读

【Redux Mobx Saga 点滴知识】专栏收录该内容

178 篇文章

订阅专栏

本文深入探讨了 React-Redux 中的核心方法 connect() 的使用及原理，讲解了如何将 React 组件与 Redux Store 结合，介绍了展示组件与容器组件的区别，并提供了计数器示例来演示 mapStateToProps 和 mapDispatchToProps 的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

connect()是react-redux中的核心方法之一，它将react组件预redux中的Store真正连接在一起

http://www.jianshu.com/p/6bf7ffbcff3b

组件

React-Redux将所有组件分为两大类：展示组件（UI组件），容器组件

展示组件有以下几个特征：

只负责 UI 的呈现，不带有任何业务逻辑
没有状态（即不使用this.state这个变量）
所有数据都由参数（this.props）提供
不使用任何 Redux 的 API

容器组件有以下几个特征：

负责管理数据和业务逻辑，不负责 UI 的呈现
带有内部状态
使用 Redux 的 API

总结为一点：展示组件负责 UI 的呈现，容器组件负责管理数据和逻辑

connect方法解析

下图是connect()的概念图

react-redux connect - connect是什么.jpg

可以简单归纳为以下几点：

mapStateToProps必须是function,作为输入逻辑，
mapDispatchToProps可以是funciton,也可以是对象，作为输出，

connect（）签名
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

参数

[mapStateToProps(state, [ownProps]): stateProps] (Function):

mapStateToProps必须是一个Function,作用是绑定state的指定值到props上
state: 监听Redux store的变化。任何时候只要 Redux store发生改变，mapStateToProps函数就会被调用,该回调函数必须返回一个纯对象，该对象会与相应展示组件的 props 合并。
ownProps: 该参数的值为传递到组件的 props，而且只要组件接收到新的props，mapStateToProps 也会被调用

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function)

mapDispatchToProps可以是一个Function，也可以是Object,作用是绑定action创建函数到props上
dispatch:
- 如果传递的是一个对象，那么每个定义在该对象的函数都将被当作Redux action creator，而且这个对象会与 Redux store绑定在一起，其中所定义的方法名将作为属性名，合并到组件的 props 中;
- 如果传递的是一个函数，该函数将接收一个 dispatch 函数，然后由你来决定如何返回一个对象，这个对象通过 dispatch 函数与 action creator 以某种方式绑定在一起

关于connect（）签名的详细解释可以看API文档

connect（）实例

以计数器为例

component/count.js

import React, { Component } from 'react'

class Counter extends Component {

    increment(){
     this.props.onAdd();
    }

    decrement(){
       this.props.onCut();
    }

    render() {
        return (
            <p>
                Clicked: {this.props.counter} times
                {' '}
                <button onClick={this.increment.bind(this)}>+</button>
                {' '}
                <button onClick={this.decrement.bind(this)}>-</button>
            </p>
        )
    }
}

export default Counter;

containers/count.js

import {connect} from 'react-redux'
import Counter from '../component/count'


//将state绑定到props的counter
const mapStateToProps = (state)=> {
    console.log(state);
    return {
        counter: state
    }
};
//将action的所有方法绑定到props上
const mapDispatchToProps = (dispatch) => {
    return {
        onAdd: ()=> {
            dispatch({type: "INCREMENT_COUNTER"});
        },
        onCut: ()=> {
            dispatch({type: "DECREMENT_COUNTER"});
        }
    };
};

//通过react-redux提供的connect方法将我们需要的state中的数据和actions中的方法绑定到props上

export default connect(mapStateToProps, mapDispatchToProps)(Counter)

reducers/count.js

import { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../actions/count'

//reducer其实也是个方法而已,参数是state和action,返回值是新的state
export default function counter(state = 0, action) {
    switch (action.type) {
        case INCREMENT_COUNTER:
            return state + 1;
        case DECREMENT_COUNTER:
            return state - 1;
        default:
            return state
    }
}