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

文章目录

  • react-redux
    • 理解
    • react-redux模型图
    • react-redux将所有组件分成两大类
    • 连接容器组件与UI组件

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

初步探索react-redux拆分组件——connect()_第1张图片

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拆分组件——connect()_第2张图片

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

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

初步探索react-redux拆分组件——connect()_第3张图片

原因是容器组件里的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>
    )
  }
}

打开页面,控制台也不报错了…
初步探索react-redux拆分组件——connect()_第4张图片

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

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

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

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

你可能感兴趣的:(React,Redux,react.js,javascript,前端)