当前位置: 首页 > news >正文

【前端知识】React 基础巩固(三十三)——Redux的使用详解

React 基础巩固(三十三)——Redux的使用详解

Redux的使用详解

  1. 针对React 基础巩固(三十二)中的案例,我们希望抽取页面中共有的代码(例如下方的代码),使用高阶组件统一拦截。

    constructor() {super();this.state = {counter: store.getState().counter,};
    }
    componentDidMount() {store.subscribe(() => {const state = store.getState();this.setState({counter: state.counter,});});
    }
    
  2. 为了让react和redux产生联系,安装一款工具react-redux

    npm install react-redux
    
  3. 使用react-redux ,在index.js中统一注入store

    import React from "react";
    import ReactDOM from "react-dom/client";
    import App from "./App";
    import { Provider } from "react-redux";
    import store from './store'const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(<React.StrictMode><Provider store={store}><App /></Provider>
    </React.StrictMode>
    );
  4. 新建about.js页面,通过react-redux引入store

    import React, { PureComponent } from "react";
    import { connect } from "react-redux";export class about extends PureComponent {render() {const { counter } = this.props;return (<div><div>About: {counter}</div></div>);}
    }// connect()的返回值是一个高阶函数
    const mapStateToProps = (state) => ({counter: state.counter,
    });export default connect(mapStateToProps)(about);
  5. 在App.jsx中引入新的about.jsx页面,查看运行效果

    import React, { PureComponent } from "react";
    import Home from "./pages/home";
    import Profile from "./pages/profile";
    import About from "./pages/about";
    import "./style.css";
    import store from "./store";export class App extends PureComponent {constructor() {super();this.state = {counter: store.getState().counter,};}componentDidMount() {store.subscribe(() => {const state = store.getState();this.setState({counter: state.counter,});});}render() {const { counter } = this.state;return (<div><h2>App Counter: {counter}</h2><div className="pages"><Home /><Profile /><About /></div></div>);}
    }export default App;

运行效果
6. 继续优化代码,利用react-redux中的connect对state和dispatch进行解耦。在基础巩固(三二)中的home.jsx页面中,state和dispatch如下表示:

import React, { PureComponent } from "react";
import store from "../store";
import { addNumberAction } from "../store/actionCreators";
export class home extends PureComponent {constructor() {super();this.state = {counter: store.getState().counter,};}componentDidMount() {store.subscribe(() => {const state = store.getState();this.setState({counter: state.counter,});});}addNumber(num) {store.dispatch(addNumberAction(num));}render() {const { counter } = this.state;return (<div>home counter:{counter}<div><button onClick={(e) => this.addNumber(1)}>+1</button><button onClick={(e) => this.addNumber(5)}>+5</button><button onClick={(e) => this.addNumber(8)}>+8</button></div></div>);}
}export default home;

为了将页面与store解耦,在about.jsx中,我们不再使用home.jsx的方式使用state和dispatch,优化如下:

import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { addNumberAction, subNumberAction } from "../store/actionCreators";export class about extends PureComponent {calcNumber(num, isAdd) {if (isAdd) {this.props.addNumber(num);} else {this.props.subNumber(num);}}render() {const { counter } = this.props;return (<div><h2>About: {counter}</h2><div><button onClick={(e) => this.calcNumber(6, true)}>+6</button><button onClick={(e) => this.calcNumber(6, false)}>-6</button><button onClick={(e) => this.calcNumber(8, true)}>+8</button><button onClick={(e) => this.calcNumber(8, false)}>-8</button></div></div>);}
}// connect()的返回值是一个高阶函数
// 映射state到props
const mapStateToProps = (state) => ({counter: state.counter,
});// 映射dispatch到props
const mapDispatchToProps = (dispatch) => ({addNumber(num) {dispatch(addNumberAction(num));},subNumber(num) {dispatch(subNumberAction(num));},
});export default connect(mapStateToProps, mapDispatchToProps)(about);
  1. 查看运行结果
    运行结果

相关文章:

【前端知识】React 基础巩固(三十三)——Redux的使用详解

React 基础巩固(三十三)——Redux的使用详解 Redux的使用详解 针对React 基础巩固&#xff08;三十二&#xff09;中的案例&#xff0c;我们希望抽取页面中共有的代码&#xff08;例如下方的代码&#xff09;&#xff0c;使用高阶组件统一拦截。 constructor() {super();this.…...

如何进行SQL优化

一、SQL优化的主要步骤 在应用的的开发过程中&#xff0c;由于初期数据量小&#xff0c;开发人员写 SQL 语句时更重视功能上的实现&#xff0c;但是当应用系统正式上线后&#xff0c;随着生产数据量的急剧增长&#xff0c;很多 SQL 语句开始逐渐显露出性能问题&#xff0c;对生…...

docker 部署 mysql8.0 无法访问

文章目录 &#x1f5fd;先来说我的是什么情况&#x1fa81;问题描述&#x1fa81;解决方法&#xff1a;✔️1 重启iptables✔️2 重启docker &#x1fa81;其他有可能连不上的原因✔️1 客户端不支持caching_sha2_password的加密方式✔️2 my.conf 配置只有本机可以访问 &#…...

理解构建LLM驱动的聊天机器人时的向量数据库检索的局限性 - (第1/3部分)

本博客是一系列文章中的第一篇&#xff0c;解释了为什么使用大型语言模型&#xff08;LLM&#xff09;部署专用领域聊天机器人的主流管道成本太高且效率低下。在第一篇文章中&#xff0c;我们将讨论为什么矢量数据库尽管最近流行起来&#xff0c;但在实际生产管道中部署时从根本…...

IntersectionObserver实现小程序长列表优化

IntersectionObserver实现小程序长列表优化 关于 IntersectionObserver 思路 这里以一屏数据为单位【一个分页的10条数据&#xff0c;最好大于视口高度】&#xff0c; 监听每一屏数据和视口的相交比例&#xff0c;即用户能不能看到它 只将可视范围的数据渲染到页面上&#x…...

Nginx动静分离、资源压缩、负载均衡、黑白名单、防盗链等实战

一、前言 Nginx是目前负载均衡技术中的主流方案&#xff0c;几乎绝大部分项目都会使用它&#xff0c;Nginx是一个轻量级的高性能HTTP反向代理服务器&#xff0c;同时它也是一个通用类型的代理服务器&#xff0c;支持绝大部分协议&#xff0c;如TCP、UDP、SMTP、HTTPS等。 二、…...

Rust之枚举与模式匹配

枚举类型&#xff0c;简称枚举&#xff0c;允许列举所有可能的值来定义一个类型。 1、定义枚举&#xff1a; 枚举类型&#xff1a;已知所有可能的值&#xff0c;并且所有值的出现是互斥的&#xff0c;即每次只能取一种可能的值&#xff0c;才使用枚举类型。 示例&#xff1a;…...

nfs服务器的描述,搭建和使用

前言 这是我在这个网站整理的笔记&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;RodmaChen nfs服务器的描述&#xff0c;搭建和使用 NFS概述工作原理优缺点 nfs服务器搭建服务端客户端 NFS概述 NFS&#xff08;Network File System&#xff09;是一种基…...

libuv库学习笔记-filesystem

Filesystem 简单的文件读写是通过uv_fs_*函数族和与之相关的uv_fs_t结构体完成的。 note libuv 提供的文件操作和 socket operations 并不相同。套接字操作使用了操作系统本身提供了非阻塞操作&#xff0c;而文件操作内部使用了阻塞函数&#xff0c;但是 libuv 是在线程池中调…...

记录vue的一些踩坑日记

记录vue的一些踩坑日记 安装Jq npm install jquery --save vue列表跳转到详情页&#xff0c;再返回列表的时候不刷新页面并且保持原位置不变&#xff1b; 解决&#xff1a;使用keepAlive 在需要被缓存的页面的路由中添加&#xff1a;keepAlive: true, {path: /viewExamine,nam…...

Mybatis学习笔记

Mybatis 文章目录 Mybatis搭建环境创建Maven工程将数据库中的表转换为对应的实体类配置文件核心配置文件mybatis-config.xml创建Mapper接口映射文件xxxMapper.xmllog4j日志功能 Mybatis操纵数据库示例及要点说明获取参数的两种方式${}#{} 各种类型的参数处理单个字面量参数多个…...

网络编程(11):三次握手和四次挥手部分细节(后续补充)

关于listen 服务器如果不listen&#xff0c;TCP协议栈就无法从CLOSED状态变成LISTEN状态&#xff0c;客户端发起连接&#xff0c;TCP协议栈会直接返回RST报文&#xff0c;从而导致客户端连接失败 关于accept accept发送在三次握手完成之后&#xff0c;从全连接队列中取出一个节…...

MySQL学习笔记 ------ 子查询

#进阶7&#xff1a;子查询 /* 含义&#xff1a; 出现在其他语句中的select语句&#xff0c;称为子查询或内查询 外部的查询语句&#xff0c;称为主查询或外查询 分类&#xff1a; 按子查询出现的位置&#xff1a; select后面&#xff1a; 仅仅支持标量子查询 …...

自然语言处理应用程序设计

原文地址&#xff1a;https://zhanghan.xyz/posts/22426/ 文章目录 一、摘要二、数据集三、相关环境四、功能展示1.系统主界面2.中文分词3.命名实体识别4.文本分类5.文本聚类6.其他界面 五、源码链接 一、摘要 将自然语言处理课程设计中实现的模型集成到自然语言处理应用程序…...

LeetCode 436. Find Right Interval【排序,二分;双指针,莫队】中等

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…...

正则表达式 —— Sed

Sed Sed 类似于vim就是一个文本编辑器&#xff0c;按行来进行编辑和排序 Sed的原理&#xff1a;读取&#xff0c;执行&#xff0c;显示 读取&#xff1a;读取文本内容之后&#xff0c;读取到的内容存放到临时的缓冲区—模式空间 执行&#xff1a;在模式空间&#xff0c;根据…...

TypeScript中数组,元组 和 枚举类型

数组 方式一 let arr: number[] [1, 2, 3, 4]方式二&#xff0c;使用泛型定义 let arr: Array<number> [1, 2, 3, 4]方式三&#xff0c;使用any let arr: any[] [12, string, true] console.log(arr[1]) // string元组 可以定义不同类型定义类型顺序需保持一直 …...

MyBatis-Plus-Join 多表查询的扩展

文章目录 网站使用方法安装使用Lambda形式用法&#xff08;MPJLambdaWrapper&#xff09;简单的连表查询一对多查询 网站 官方网站&#xff1a;https://mybatisplusjoin.com/Github地址&#xff1a;https://github.com/yulichang/mybatis-plus-joinGitee地址&#xff1a;https…...

认清现实重新理解游戏的本质

认清现实重新理解游戏的本质 OVERVIEW 认清现实重新理解游戏的本质现实两条小路的启发四个动机1.当前的学习任务或工作任务太艰巨2.完美主义3.对未来太过于自信/无知4.大脑小看未来的收益 四个方法1.让未来的收益足够巨大2.让未来的收益感觉就在眼前3.玩游戏有恶劣的结果4.玩游…...

LeetCode 2050. Parallel Courses III【记忆化搜索,动态规划,拓扑排序】困难

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

Python 实现 Web 静态服务器(HTTP 协议)

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

DiscuzX3.5发帖json api

参考文章&#xff1a;PHP实现独立Discuz站外发帖(直连操作数据库)_discuz 发帖api-CSDN博客 简单改造了一下&#xff0c;适配我自己的需求 有一个站点存在多个采集站&#xff0c;我想通过主站拿标题&#xff0c;采集站拿内容 使用到的sql如下 CREATE TABLE pre_forum_post_…...