react-redux connect连接器

最新推荐文章于 2024-08-16 08:25:40 发布

翻译最新推荐文章于 2024-08-16 08:25:40 发布 · 295 阅读

文章标签：

#reactjs

React 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了React-Redux库中的connect函数用法，它用于将React组件与Redux store连接。通过connect，可以方便地从state中选择数据并绑定到组件props，以及调用action creators。详细讲解了connect的两种传参方式，并展示了如何映射state和actions到组件的props。无论你是初学者还是进阶者，这篇文章都是理解react-redux连接器的宝贵资源。

react-redux connect连接器

ps: 用于记录学习, 持续更新

在使用react-redux的时候会用到connect, 这个会帮我们自动创建容器组件,用法如下:
1. connect()(),第一个(), 传入两个函数

import { connect } from 'react-redux'
class Person extends Components {
	
}

// 这不是简写
const funa = (state) => {
	return {type: state }
	// 这样的写法相当于   <Person type={state }>
}
const funb = (dispatch) => {
	return () => {
		dispatch({type: 'adsf', value: 'adfadsfasdf'})
	}
}

//这是简写
// state 就是 redux存储的所有的总状态对象
export default connext(
	// 映射状态
	// 自定义的字段 用于上面的UI组件
	state => ({ '自定义的字段': state }),
	// 映射操作状态的方法
	{
		自定义的方法名: action方法名,
		zidingyi: dispatch(action方法名)
	}
)(Person)

// 在简写中自定义的字段可以在UI组件中这个使用 this.props.自定义方法名; 或者 this.props.自定义的字段