redux中的connect()

Redux的connect方法用于将React组件与store连接,实现数据和操作的绑定。mapStateToProps用于从store中选择需要的数据并注入组件props,mapDispatchToProps则让组件能够触发action。mergeProps可自定义props合并方式,options允许定制connector行为。示例展示了如何使用这两个方法将state和action绑定到组件上。

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

一、作用

connect()方法的作用是将store和组件联系到一起,但是它并不会改变它连接的connect组价,而是提供一个经过包裹的connect组件

二、参数详解

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

(1)mapStateToProps

   该方法允许我们将store中的数据作为props绑定到组件中,只要store发生了变化就会调用mapStateToProps方法,mapStateProps返回的结果必须是一个纯对象,这个对象会与组件的props合并

实例:

const mapStateToProps = (state) => {
	return({
		//第一个list是自己在组件中定义的,将来在组件中通过 this.props.list来引入
		//第二个list则是你在store中的存入的list
		list:state.list
	})
}

//之后一定记得将这个属性放到connect中
export default connect(mapStateToProps)(TodoList);

(2)mapDispatchToProps

   该方法允许我们将action作为props绑定到组件中,用于建立组件跟store.dispatch的映射关系,可以是一个object,也可以是一个函数 如果传递的是一个对象,那么每个定义在该对象的函数都将被当作 Redux action creator,对象所定义的方法名将作为属性名;每个方法将返回一个新的函数,函数中 dispatch 方法会将 action creator 的返回值作为参数执行。这些属性会被合并到组件的 props 中;
如果传递的是一个函数,可以直接传入dispatch,ownProps,定义UI组件如何发出action,实际上就是要调用dispatch方法

实例:

//在大型项目中,一般会将这action,单独放一个组件里
const mapDispatchToProps = (dispatch) => {
	inputChange(e) {
            // console.log(e.target.value);
            let action ={
                type:'change_input',
                value:e.target.value
            }
            dispatch(action)//主要是用于发送一个action
}

//之后一定记得将这个属性放到connect中
export default connect(mapStateToProps,mapDispatchToProps)(TodoList);

(3)mergeProps

如果指定了这个参数,mapStateToProps() 与 mapDispatchToProps() 的执行结果和组件自身的 props 将传入到这个回调函数中。该回调函数返回的对象将作为 props 传递到被包装的组件中。你也许可以用这个回调函数,根据组件的 props 来筛选部分的 state 数据,或者把 props 中的某个特定变量与 action creator 绑定在一起。如果你省略这个参数,默认情况下返回 Object.assign({}, ownProps, stateProps, dispatchProps) 的结果。

(4)option

如果指定这个参数,可以定制connector的行为

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值