文章目录

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

今天来学习一个新的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 (
      

        
当前求和为：??
         this.selectNumber = c}>
          1
          2
          3
         
        + 
        - 
        当前求和为奇数再加 
        异步加
      
    )
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

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

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

安装react-redux库：

npm install react-redux
1

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

// 引入Count的UI组件
import CountUI from '../../components/Count'
// 引入redux
import store from '../../redux/store';
1
2
3
4

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

import { connect } from 'react-redux'
1

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

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

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

暴露Count的容器组件：

export default CountContainer
1

---

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)
1
2
3
4
5
6
7
8
9

这里先将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 (
      

        
      
    )
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

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

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

        
      
    )
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

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

今天的分享就到这里啦 extcolor{red}{今天的分享就到这里啦} 今天的分享就到这里啦

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

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

收藏，你的青睐是我努力的方向！ extcolor{green}{收藏，你的青睐是我努力的方向！} 收藏，你的青睐是我努力的方向！

评论，你的意见是我进步的财富！ extcolor{green}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦