第三十四章 使用react-redux进一步管理状态

news2024/11/24 2:32:43

react-redux和redux是两个不同的概念。

redux是一个重要的数据管理库。redux的作用是帮助处理应用程序中复杂的数据管理和状态管理，它可以让你的应用程序更加可维护和可扩展。

react-redux是一个react库，它可以帮助react开发者在react应用程序中集成redux。它通过提供一组特定于react的API来简化了redux的使用。

使用react-redux，你可以在react组件中直接操作redux中的状态和数据，而无需使用繁琐的API和命令。这样可以使代码更加简洁和易于维护。 总之，react-redux是一个非常有用的库，它可以使react开发者更加轻松地处理复杂的数据管理和状态管理。

在这里插入图片描述

根据模型图，改造求和案例

  • 步骤1：清除Count组件里面的redux的所有API
import React, { Component } from 'react'

export default class Count extends Component {

  increment = () => {
    // 普通加
    // 1、获取用户选择的值
    const { value } = this.selectNumber

  }

  decrement = () => {
    // 普通减
    // 1、获取用户选择的值
    const { value } = this.selectNumber

  }

  incrementIfOdd = () => {
    // 当前求和为奇数为
    // 1、获取用户选择的值
    const { value } = this.selectNumber

  }

  incrementAsync = () => {
    // 异步加
    // 1、获取用户选择的值
    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>&nbsp;
      </div>
    )
  }
}
  • 步骤2：创建Count-UI组件的容器组件

文件：src/containers/Count/index.jsx

// 引入Count的UI组件
import CountUI from '../../components/Count'

// 引入react-redux中的connect用于连接UI组件和容器组件
import { connect } from 'react-redux'

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

这里我们需要使用react-redux来连接我们的UI组件，所以我们需要安装依赖：

npm i react-redux

现在我们在App.jsx里面将Count的UI组件替换为容器组件

import React, { Component } from 'react'
// import Count from './components/Count'
// 引入Count的容器组件
import Count from './containers/Count'
// 引入store，用于传入容器组件
import store from './redux/store'

export default class App extends Component {
  render() {
    return (
      <div>
        <Count  store={store}/>
      </div>
    )
  }
}

这里需要将store通过props的方式引入，否则会报错：

Could not find "store" in the context of "Connect(Count)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Count) in connect options.

现在运行我们可以正常看见修改后的页面：

在这里插入图片描述

  • 步骤3：在容器组件里面传递UI组件状态和操作状态的方法

在这里我们就直接说了，在connect方法第一次执行的时候需要传递两个方法：mapStateToProps和mapDispatchToProps.

  1. mapStateToProps方法是用于传递UI组件状态
  2. mapDispatchToProps方法是用于传递UI组件操作状态的方法

文件：src/containers/Count/index.jsx

// 引入Count的UI组件
import CountUI from '../../components/Count'

// 引入action
import {
  createIncrementAction,
  createDecrementAction,
  createIncrementAsyncAction
} from '../../redux/count_action'

// 引入react-redux中的connect用于连接UI组件和容器组件
import { connect } from 'react-redux'

/**
 * 1.mapStateToProps函数返回的是一个对象
 * 2.返回对象中的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value
 * 3.mapStateToProps用于传递状态
 * @param {*} state 
 * @returns 
 */
function mapStateToProps (state) {
  return {count: state}
}

/**
 * 1.mapDispatchToProps函数返回的是一个对象
 * 2.返回对象中的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value
 * 3.mapDispatchToProps用于传递操作状态的方法
 * @param {*} dispatch 
 * @returns 
 */
function mapDispatchToProps (dispatch) {
  return {
    jia: num => dispatch(createIncrementAction(num)),
    jian: num => dispatch(createDecrementAction(num)),
    jiaAsync: (num,time) => dispatch(createIncrementAsyncAction(num,time))
  }
}

// 创建并暴露一个容器组件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)
  • 步骤4：在UI组件里面使用容器组件传递过来的状态与操作状态的方法

文件：src/components/Count/index.jsx

import React, { Component } from 'react'

export default class Count extends Component {

  increment = () => {
    // 普通加
    // 1、获取用户选择的值
    const { value } = this.selectNumber
    this.props.jia(value*1)
  }

  decrement = () => {
    // 普通减
    // 1、获取用户选择的值
    const { value } = this.selectNumber
    this.props.jian(value*1)
  }

  incrementIfOdd = () => {
    // 当前求和为奇数为
    // 1、获取用户选择的值
    const { value } = this.selectNumber
    if (this.props.count %2 !== 0) {
      this.props.jia(value*1)
    }
  }

  incrementAsync = () => {
    // 异步加
    // 1、获取用户选择的值
    const { value } = this.selectNumber
    this.props.jiaAsync(value*1,500)
  }

  render() {
    return (
      <div>
        <h1>当前求和为：{this.props.count}</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>&nbsp;
      </div>
    )
  }
}
  • 最后查看效果

在这里插入图片描述

  • 小节总结

(1). 明确两个概念：

  1). UI组件：不能使用任何redux的api，只负责页面的呈现、交互等。

  2). 容器组件：负责和redux通信，将结果交给UI组件。

(2). 如何创建一个容器组件——靠react-redux的connect函数

  connect(mapStateToProps,mapDispatchToProps)(UI组件)

  -mapStateToProps: 映射状态，返回值是一个对象

  -mapDispatchToProps: 映射操作状态的方法，返回值是一个对象

(3). 备注1：容器组件中的store是靠props传进去的，而不是在容器组件中直接引入。

(4). 备注2：mapDispatchToProps可以是一个函数，也可以是一个对象。

优化代码

1、优化容器组件

将容器组件的connect函数先使用箭头函数进行优化：

(1). 将普通函数改为箭头函数, src/containers/Count/index.jsx

// 引入Count的UI组件
import CountUI from '../../components/Count'

// 引入action
import {
  createIncrementAction,
  createDecrementAction,
  createIncrementAsyncAction
} from '../../redux/count_action'

// 引入react-redux中的connect用于连接UI组件和容器组件
import { connect } from 'react-redux'

// function mapStateToProps (state) {
//   return {count: state}
// }
const mapStateToProps = state => ({count:state})

// function mapDispatchToProps (dispatch) {
//   return {
//     jia: num => dispatch(createIncrementAction(num)),
//     jian: num => dispatch(createDecrementAction(num)),
//     jiaAsync: (num,time) => dispatch(createIncrementAsyncAction(num,time))
//   }
// }
const mapDispatchToProps = dispatch => ({
    jia: num => dispatch(createIncrementAction(num)),
    jian: num => dispatch(createDecrementAction(num)),
    jiaAsync: (num,time) => dispatch(createIncrementAsyncAction(num,time))
})

// 创建并暴露一个容器组件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)

(2). 直接将箭头函数体作为connect函数的参数

// 引入Count的UI组件
import CountUI from '../../components/Count'

// 引入action
import {
  createIncrementAction,
  createDecrementAction,
  createIncrementAsyncAction
} from '../../redux/count_action'

// 引入react-redux中的connect用于连接UI组件和容器组件
import { connect } from 'react-redux'

// 创建并暴露一个容器组件
export default connect(
  state => ({count: state}),
  dispatch => ({
    jia: num => dispatch(createIncrementAction(num)),
    jian: num => dispatch(createDecrementAction(num)),
    jiaAsync: (num,time) => dispatch(createIncrementAsyncAction(num,time))
  })
  )(CountUI)

(3). 将mapDispacthToProps直接写为一个对象

// 引入Count的UI组件
import CountUI from '../../components/Count'

// 引入action
import {
  createIncrementAction,
  createDecrementAction,
  createIncrementAsyncAction
} from '../../redux/count_action'

// 引入react-redux中的connect用于连接UI组件和容器组件
import { connect } from 'react-redux'

// 创建并暴露一个容器组件
export default connect(
  state => ({count: state}),
  {
    jia:createIncrementAction,
    jian:createDecrementAction,
    jiaAsync:createIncrementAsyncAction
  }
  )(CountUI)

这里可以有一点困惑，其实该对象被传递给UI组件使用时，简要的流程是这样的：

UI组件 ===> this.props.jia(value*1) // 但是jia对应的值其实是createIncrementAction这个函数
实际调用 ===> createIncrementAction(value*1) // 这时返回给store的值是一个action对象，而不是函数
最后store监测到值是一个action对象，直接调用reducer修改更新状态的值。

2、关闭redux的监听

原来我们修改redux的状态，需要使用一个API：store.subscribe来监听状态的改变，再次渲染页面，现在使用了react-redux，它已经帮我们做了状态变化的监听，不需要我们自己写了：

关闭在入口文件的监听事件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
// import store from './redux/store';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// store.subscribe(() => {
 
//   root.render(
//     <React.StrictMode>
//       <App />
//     </React.StrictMode>
//   );
// })

3、使用Provider组件优化store对容器组件的传递

原来我们传递给容器组件的方式是在App组件里面通过props的方式将store传递给容器组件的，但是这样有一个问题：

import React, { Component } from 'react'
// 引入Count的容器组件
import Count from './containers/Count'
// 引入store，用于传入容器组件
import store from './redux/store'

export default class App extends Component {
  render() {
    return (
      <div>
        {/* 给容器组件传递store */}
        <Count  store={store} />
        <Count1  store={store} />
        <Count2  store={store} />
        <Count3  store={store} />
        <Count4  store={store} />
      </div>
    )
  }
}

假设如上代码，我们有很多个容器组件，难道我们需要一个一个的这样手写props吗？这样很不合理，所以react-redux提供了一个Provider组件帮我们实现了对整个应用的容器组件传递store，无需我们一个一个的props手写传递。

(1). 将原来在APP组件传递store的方式去掉

import React, { Component } from 'react'
// 引入Count的容器组件
import Count from './containers/Count'

export default class App extends Component {
  render() {
    return (
      <div>
        <Count/>
      </div>
    )
  }
}

(2). 在入口文件引入并使用Provider组件

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import store from './redux/store'
import { Provider } from 'react-redux'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
)

至此，无论有多少个容器组件，都无需我们手写props进行传递store了，非常人性化。

4、将容器组件与UI组件整合为一个文件

为了避免文件过多，将容器组件和UI组件合并为一个组件可以使代码更加简洁和易于维护。这样可以将UI组件的状态和属性与容器组件的状态和属性分离，使得组件之间的通信更加明确和紧密。此外，将容器组件和UI组件合并为一个组件也可以减少组件的数量，使得代码结构更加清晰和易于理解。

合并非常简单，就是将UI组件的代码搬到容器组件里面来即可。

// 引入action
import {
  createIncrementAction,
  createDecrementAction,
  createIncrementAsyncAction
} from '../../redux/count_action'

// 引入react-redux中的connect用于连接UI组件和容器组件
import { connect } from 'react-redux'
import React, { Component } from 'react'

class Count extends Component {

  increment = () => {
    // 普通加
    // 1、获取用户选择的值
    const { value } = this.selectNumber
    this.props.jia(value*1)
  }

  decrement = () => {
    // 普通减
    // 1、获取用户选择的值
    const { value } = this.selectNumber
    this.props.jian(value*1)
  }

  incrementIfOdd = () => {
    // 当前求和为奇数为
    // 1、获取用户选择的值
    const { value } = this.selectNumber
    if (this.props.count %2 !== 0) {
      this.props.jia(value*1)
    }
  }

  incrementAsync = () => {
    // 异步加
    // 1、获取用户选择的值
    const { value } = this.selectNumber
    this.props.jiaAsync(value*1,500)
  }

  render() {
    return (
      <div>
        <h1>当前求和为：{this.props.count}</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>&nbsp;
      </div>
    )
  }
}


// 创建并暴露一个容器组件
export default connect(
  state => ({count: state}),
  /*dispatch => ({
    jia: num => dispatch(createIncrementAction(num)),
    jian: num => dispatch(createDecrementAction(num)),
    jiaAsync: (num,time) => dispatch(createIncrementAsyncAction(num,time))
  })*/
  {
    jia:createIncrementAction,
    jian:createDecrementAction,
    jiaAsync:createIncrementAsyncAction
  }
  )(Count)

使用的时候，引入容器组件即可。

小节总结

  • 优化connect函数的代码逻辑
  • 引入Provider组件优化容器组件的store传递
  • 引入react-redux后无需自己监测redux的变化
  • mapDispatchToProps也可以简化写成对象形式
  • 一个组件要和redux“打交道”要经过几个步骤：
(1).定义好UI组件——不暴露
(2).引入connect函数生成一个容器组件，并暴露，写法如下：
	connect(
		state => ({key:value}), // 映射状态
		{key:value} // 映射操作状态的方法
	)(UI组件)
(3).在UI组件中通过this.props.xxxx读取和操作状态

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/540469.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Java经典笔试题—day11

Java经典笔试题—day11

Java经典笔试题—day11 &#x1f50e;选择题&#x1f50e;编程题&#x1f95d;最近公共祖先&#x1f95d;最大连续bit数 &#x1f50e;结尾 &#x1f50e;选择题 (1)下面哪个标识符是合法的&#xff1f; A.9HelloWorld B._Hello World C.Hello*World D.Hello$World D Java中标…
阅读更多...
操作符讲解1---C语言

操作符讲解1---C语言

目录 前言&#xff1a; 1.什么是操作符 2.算术操作符 3.移位操作符 4.位操作符 5.逻辑操作符 5.1逻辑与 5.2逻辑或 5.3练习 5.4逻辑非 前言&#xff1a; 博主这几天都在积累知识&#xff0c;俗话说&#xff1a;”只有多输入才能有输出”。在写博客之前&#xff0c;也…
阅读更多...
一文1000字从0到1实现Jenkins+Allure+Pytest的持续集成

一文1000字从0到1实现Jenkins+Allure+Pytest的持续集成

一、配置 allure 环境变量 1、下载 allure是一个命令行工具&#xff0c;可以去 github 下载最新版&#xff1a;https://github.com/allure-framework/allure2/releases 2、解压到本地 3、配置环境变量 复制路径如&#xff1a;F:\allure-2.13.7\bin 环境变量、Path、添加 F:\…
阅读更多...
【硬核】C语言指针是什么？深入浅出带你掌握C语言指针！

【硬核】C语言指针是什么？深入浅出带你掌握C语言指针！

指针与底层硬件联系紧密&#xff0c;使用指针可操作数据的地址&#xff0c;实现数据的间接访问&#xff0c;本文章内容如下 1、C语言指针的作用 2、计算机的存储机制 3、如何定义指针 4、如何操作指针 5、数组与指针的关系 6、指针使用中的一些注意事项 1、C语言指针有什么作用…
阅读更多...
企业级架构设计原则（含架构管理原则、业务架构设计原则、应用架构设计原则、数据架构设计原则、技术架构设计原则）

企业级架构设计原则（含架构管理原则、业务架构设计原则、应用架构设计原则、数据架构设计原则、技术架构设计原则）

Togaf中的架构原则是一组用于指导企业架构设计和决策的基本准则。这些原则旨在支持组织的目标、价值观和战略&#xff0c;并提供一致性、可持续性和可扩展性的架构方案。 Togaf中提供了一些常见的架构原则&#xff0c;比如&#xff1a;保持一致性&#xff1a;确保架构与组织的目…
阅读更多...
MySQL 性能调优及生产实战篇（二）

MySQL 性能调优及生产实战篇（二）

前言数据结构HASHBinary Search Trees、AVL TreesRed/Black TreesB TreesB Trees 数据存储InnoDBMyISAM 索引优化索引匹配方式哈希索引组合索引聚簇、非聚簇索引覆盖索引 优化细节&#xff08;important&#xff09;数据库勿做计算尽量主键查询前缀索引索引扫描排序子查询范围列…
阅读更多...
干货满满---90条简单实用的Python编程技巧

干货满满---90条简单实用的Python编程技巧

对于Python&#xff0c;想必大家都不陌生&#xff0c;自从它问世以来得到了广大编程爱好者的追捧和喜爱&#xff0c;但是再好的东西都需要讲究技巧和策略方法&#xff0c;才能达到事半功倍的效果&#xff0c;下面是我近几年的学习心得和总结&#xff0c;希望能对大家带来一定帮…
阅读更多...
不懂就要问，现在的物联卡还有人用吗？

不懂就要问，现在的物联卡还有人用吗？

很多朋友私信小编&#xff0c;现在的物联卡还能买吗&#xff1f; 当然&#xff0c;对于企业设备来讲&#xff0c;物联卡是一直可以使用的&#xff0c;而且非常稳定。 如果是用在个人手机上面&#xff0c;可以说也是可以用的&#xff0c;只不过是使用时间长短的问题。 ​ 下面…
阅读更多...
ChatGPT为企业应用赋能

ChatGPT为企业应用赋能

chatgpt-on-wechat和bot-on-anything两个项目都支持企业微信部署&#xff0c;其中前者功能比较丰富&#xff0c;推荐&#xff01; 如需帮助&#xff0c;可以搜索wx&#xff1a;Youngerer 找到我&#xff01; 功能展示&#xff1a; ![在这里插入图片描述](https://img-blog.csd…
阅读更多...
【Linux升级之路】3_Linux进程概念

【Linux升级之路】3_Linux进程概念

&#x1f31f;hello&#xff0c;各位读者大大们你们好呀&#x1f31f; &#x1f36d;&#x1f36d;系列专栏&#xff1a;【Linux升级之路】 ✒️✒️本篇内容&#xff1a;认识冯诺依曼系统&#xff0c;操作系统概念与定位&#xff0c;深入理解进程概念&#xff08;了解PCB&…
阅读更多...
C语言函数大全-- m 开头的函数（2）

C语言函数大全-- m 开头的函数（2）

C语言函数大全 本篇介绍C语言函数大全-- m 开头的函数 1. mkdirat 1.1 函数说明 函数声明函数功能int mkdirat(int dirfd, const char *pathname, mode_t mode);它是一个 Linux 系统下的系统调用函数&#xff0c;用于在指定目录下创建新的子目录 参数&#xff1a; dirfd &a…
阅读更多...
推荐一个一键AI抠图网站

推荐一个一键AI抠图网站

一键去除图片背景 在这个数字化的世界里&#xff0c;我们经常需要处理各种图片&#xff0c;无论是用于个人的社交媒体&#xff0c;还是用于商业的广告设计。 然而&#xff0c;图片处理往往需要专业的技能和复杂的软件&#xff0c;这对许多人来说可能是个挑战。但现在&#xf…
阅读更多...
3. Python字符串

3. Python字符串

文章目录 一、修改字符串大小写1.1 将字符串中每个单词的首字母改为大写1.2 将字符串中所有的字母改为大写1.3 将字符串中所有的字母改为小写 二、拼接字符串三、添加空白3.1 使用制表符添加空白3.2 使用换行符添加空白3.3 制表符和换行符同时使用 四、删除空白4.1 仅去掉字符串…
阅读更多...
redis单机安装

redis单机安装

1. 安装gcc 2.下载并编译redis wget http://download.redis.io/releases/redis-7.0.4.tar.gz 直接下载到虚拟机中解压 编译 安装redis 执行命令&#xff1a; make install PREFIX/usr/local/redis/ &#xff0c;会将redis安装到指定目录下,在这个目录下会生产bin目录 在安…
阅读更多...
《花雕学AI》人类推理能力对AI来说是什么？用ChatGPT来检验一下

《花雕学AI》人类推理能力对AI来说是什么？用ChatGPT来检验一下

”这里有一本书、九个鸡蛋、一台笔记本电脑、一个瓶子和一个钉子&#xff0c;请告诉我如何把它们稳定地堆叠在一起&#xff1f;“ 这是去年提出的一道测试推理能力的题目&#xff0c;当微软的计算机科学家开始试验一种新的AI系统时&#xff0c;他们要求AI解决这个难题&#xf…
阅读更多...
【Java 并发编程】CAS 原理解析

【Java 并发编程】CAS 原理解析

CAS 原理解析 1. 什么是 CAS&#xff1f;1.1 悲观锁与乐观锁1.2 CAS 是什么&#xff1f; 2. CAS 核心源码3. CAS 实现原子操作的三大问题3.1 ABA 问题3.2 循环性能开销3.3 只能保证一个变量的原子操作 4. synchronized、volatile、CAS 比较 1. 什么是 CAS&#xff1f; 1.1 悲观…
阅读更多...
物业企业多种类型合同，用泛微今承达实现统一数字化管理

物业企业多种类型合同，用泛微今承达实现统一数字化管理

随着物业业务的不断发展&#xff0c;物业服务越来越精细化、专业化&#xff0c;旨在为居民社区提供更便利的服务。 物业企业提供多种形态、全方位、立体式的综合服务&#xff0c;包括基础物业服务、业主增值服务(空间运营收入、房屋经纪、电商服务、社区金融、家政服务及养老服…
阅读更多...
手撕-扫雷

手撕-扫雷

一、前言-认识扫雷 二、打印菜单 三、创建棋盘并初始化 四、打印棋盘 五、布置雷 六、排查雷&#xff08;统计坐标周围雷的个数&#xff09; 七、扫雷代码全析&#xff08;game.h game.c test.c&#xff09; 铁汁们&#xff0c;今天给大家分享一篇扫雷游戏的实现&#…
阅读更多...
Python快速批量修改图片尺寸

Python快速批量修改图片尺寸

之前我们写过快速批量获取图片的大小&#xff0c;该文章链接在这里&#xff1a;Python每日一个知识点9----批量输出图片尺寸 今天我们分享一个快速批量修改图片尺寸的小脚本&#xff0c;我们一下看一下 先看一下目录结构&#xff1a; 文件夹&#xff1a;【原始图片】&#xf…
阅读更多...
在阿里做了6年软件测试，4月无情被辞，想给划水的兄弟提个醒

在阿里做了6年软件测试，4月无情被辞，想给划水的兄弟提个醒

先简单交代一下背景吧&#xff0c;某不知名 985 的本硕&#xff0c;17 年毕业加入阿里&#xff0c;以“人员优化”的名义无情被裁员&#xff0c;之后跳槽到了有赞&#xff0c;一直从事软件测试的工作。之前没有实习经历&#xff0c;算是6年的工作经验吧。 这6年之间完成了一次…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023