初步探索react-redux拆分组件——connect()

const { value } = this.selectNumber

}

render() {
return (

当前求和为：??

<select ref={c => this.selectNumber = c}>
1
2
3
 
+ 
- 
当前求和为奇数再加 
异步加

)
}
}

创建一个**存放Count容器组件**的文件夹Containers。


在文件夹Containers下的Count容器组件不需要我们自己写，需要借助react-redux这个插件库。


安装react-redux库：

npm install react-redux

引入Count的UI组件和redux里核心的API对象store：

// 引入Count的UI组件
import CountUI from ‘…/…/components/Count’
// 引入redux
import store from ‘…/…/redux/store’;

还要引入**connect**用于连接Count的UI组件与redux：

import { connect } from ‘react-redux’

将Count的容器组件与Count的UI组件建立联系：

//创建一个Count的容器组件，名为CountContainer，
//这样Count的容器组件可以与Count的UI组件建立起联系
const CountContainer = connect()(CountUI)

> 
> connect()(CountUI)意思是：connect()函数返回一个新函数并调用，传入的参数是CountUI
> 
> 
> 


暴露Count的容器组件：

export default CountContainer

---


`src=> containers=> Count => index.jsx：`

// 引入Count的UI组件
import CountUI from ‘…/…/components/Count’
// 引入redux
import store from ‘…/…/redux/store’;
// 引入connect用于连接UI组件与redux
import { connect } from ‘react-redux’

//使用connect()()创建并暴露一个Count的容器组件
export default connect()(CountUI)

这里先将Count的容器组件与Count的UI组件建立联系。


由于Count的容器组件与Count的UI组件是父子关系，所以App.jsx里不应该渲染Count的UI组件子组件，应该渲染父组件。


`App.jsx：`

import React, { Component } from ‘react’
import Count from ‘./containers/Count’

export default class App extends Component {
render() {
return (

)
}
}

写到这里，打开页面，发现控制台出现了报错：


![在这里插入图片描述](https://img-blog.csdnimg.cn/a65cf73970e14472912b9e09aa69024d.jpeg#pic_center)


原因是**容器组件里的store不能亲自引入**，必须在上一层**通过props的形式**传给容器组件。


`App.jsx：`

import React, { Component } from ‘react’
import Count from ‘./containers/Count’
import store from ‘./redux/store’

export default class App extends Component {
render() {
return (

)
}
}

打开页面，控制台也不报错了…  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/a682e6d7bd5b4203bf7134faded7dcb5.jpeg#pic_center)



> 
>  
>  
>  
>  
>  
>  
>  今天的分享就到这里啦✨ 
>  
>  
>  
>  
>  \textcolor{red}{今天的分享就到这里啦✨} 
>  
>  
>  今天的分享就到这里啦✨   
>   
>   
>  
>  
>  
>  
>  
>  原创不易，还希望各位大佬支持一下 
>  
>  
>  
>  
>  \textcolor{blue}{原创不易，还希望各位大佬支持一下} 
>  
>  
>  原创不易，还希望各位大佬支持一下   
>   
>  🤞  
>  
>  
>  
>  
>  
>  点赞，你的认可是我创作的动力！ 
>  
>  
>  
>  
>  \textcolor{green}{点赞，你的认可是我创作的动力！} 
>  
>  
>  点赞，你的认可是我创作的动力！   
>   
>  ⭐️  
>  
>  
>  
>  
>  


![img](https://img-blog.csdnimg.cn/img_convert/2218476008fe51bf4565940d9301ce81.png)
![img](https://img-blog.csdnimg.cn/img_convert/64f96a9b9b765233e0a7d46dd7782dd5.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**