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

今天来学习一个新的react插件库react-redux
感兴趣的小伙帮一起来看看吧~

react-redux

理解

1. 一个react插件库
2. 专门用来简化react应用中使用redux

react-redux模型图

1. 所有的UI组件都应该包裹一个容器组件，他们是父子关系。
2. 容器组件是真正和redux打交道的，里面可以随意的使用redux的api。
3. UI组件中不能使用任何redux的api。
4. 容器组件会传给UI组件：(1).redux中所保存的状态。(2).用于操作状态的方法。
5. 备注：容器给UI传递：状态、操作状态的方法，均通过props传递。

react-redux将所有组件分成两大类

1️⃣ UI组件

• 只负责 UI 的呈现，不带有任何业务逻辑
• 通过props接收数据(一般数据和函数)
• 不使用任何 Redux 的 API
• 一般保存在components文件夹下

2️⃣ 容器组件

• 负责管理数据和业务逻辑，不负责UI的呈现
• 使用 Redux 的 API
• 一般保存在containers文件夹下

连接容器组件与UI组件

还是根据之前的求和案例来进行分析：

由于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>
    )
  }
}

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

$今天的分享就到这里啦✨$

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

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

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

✏️ $评论，你的意见是我进步的财富！$