初步探索react-redux拆分组件——connect()，2024年最新大数据开发开发人员不得不收集的代码

由于UI组件中不能使用任何redux的api，所以要把原先Count组件里所有redux相关的api都删掉。

src=> components=> Count => index.jsx：

import React, { Component } from 'react'

export default class Count extends Component {

  // 加法
  increment = () => {
    // 获取用户输入
    const { value } = this.selectNumber
  }

  // 减法
  decrement = () => {
    // 获取用户输入
    const { value } = this.selectNumber
  }

  // 奇数再加
  incrementIfOdd = () => {
    // 获取用户输入
    const { value } = this.selectNumber
  }

  // 异步加
  incrementAsync = () => {
    // 获取用户输入
    const { value } = this.selectNumber
  }

  render() {
    return (
      <div>
        <h1>当前求和为：??</h1>
        <select ref={c => this.selectNumber = c}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>&nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>
      </div>
    )
  }
}

创建一个存放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 (
      <div>
        <Count />
      </div>
    )
  }
}

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

原因是容器组件里的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 (
      <div>
        <Count store={store} />
      </div>
    )
  }
}

打开页面，控制台也不报错了…

今天的分享就到这里啦✨

\textcolor{red}{今天的分享就到这里啦✨}

今天的分享就到这里啦✨

原创不易，还希望各位大佬支持一下

\textcolor{blue}{原创不易，还希望各位大佬支持一下}

原创不易，还希望各位大佬支持一下

🤞

点赞，你的认可是我创作的动力！

\textcolor{green}{点赞，你的认可是我创作的动力！}

点赞，你的认可是我创作的动力！

⭐️

收藏，你的青睐是我努力的方向！

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取