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

尚硅谷-react教程-求和案例-数据共享(下篇)-完成数据共享-笔记

news 2026/2/8 10:27:49

#1024程序员节｜征文#

public/index.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>redux</title></head><body><div id="root"></div></body>
</html>

src/App.jsx

import React, {Component} from 'react';
import Count from "./containers/Count";
import Person from "./containers/Person";class App extends Component {render() {return (<div><Count/><hr/><Person/></div>);}
}export default App;

src/index.js

import React from "react";
import ReactDOM from 'react-dom'
import App from './App'import store from './redux/store'
import {Provider} from 'react-redux'ReactDOM.render(// 借助Provider批量的给整个应用里面的所有的容器组件的添加store<Provider store={store}><App/></Provider>,document.getElementById('root')
)

src/redux/constant.js

/*** 该模块是用于定义action对象中type类型的常量值,目的只有一个：*      便于管理的同时防止程序员单词写错*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'export const ADD_PERSON = 'addperson'

src/redux/store.js

/*
*  该文件专门用于暴露一个store对象，整个应用只有一个store对象
* */// store.js
//引入createStore，专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware,combineReducers} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './reducers/count'
//引入为Person组件服务的reducer
import personReducer from './reducers/person'
//引入redux-thunk，用于支持异步action
import {thunk} from 'redux-thunk'
// 合并多个reducer
const allReducer = combineReducers({he:countReducer,rens:personReducer
})
//导出store
export default createStore(allReducer,applyMiddleware(thunk))

（一）Count组件相关的

src/containers/Count/index.jsx

import React, {Component} from 'react';
// 引入action
import {createDecrementAction,createIncrementAction,createIncrementAsyncAction
} from '../../redux/actions/count'// 引入connect用于连接UI组件与redux
import {connect} from 'react-redux'// 定义UI组件
class Count extends Component {// count已经交给了redux去管理了state = {carName:'奔驰c63'}// 加法increment=()=>{const {value} = this.selectNumberthis.props.jia(value*1)}// 减法decrement=()=>{const {value} = this.selectNumberthis.props.jian(value*1)}// 奇数再加incrementIfOdd=()=>{const {value} = this.selectNumberif(this.props.count %2 !== 0) {this.props.jia(value*1)}}// 异步加incrementAsync=()=>{const {value} = this.selectNumberthis.props.jiaAsync(value*1,500)}render() {return (<div><h2>我是Count组件,下方组件总人数为:{this.props.renshu}</h2><h4>当前求和为：{this.props.count}</h4><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>);}
}// 使用connect()()创建并暴露一个Count的容器组件
export default connect(state =>({count:state.he,renshu:state.rens.length}),// mapDispatchToProps的精简写法{jia:createIncrementAction,jian:createDecrementAction,jiaAsync:createIncrementAsyncAction,}
)(Count)

src/redux/actions/count.js

/*
* 该文件专门为Count组件生成action对象
* */
import {INCREMENT,DECREMENT} from '../constant'// 版本2
// 同步action，就是指action的值为Object类型的一般对象
export const createIncrementAction = data => ({type:INCREMENT,data})
export const createDecrementAction = data => ({type:DECREMENT,data})// 异步action,就是指action的值为函数,异步action中一般都会调用同步action,异步action不是必须要用的
export const createIncrementAsyncAction = (data,time) => {return (dispatch)=>{setTimeout(()=>{dispatch(createIncrementAction(data))},time)}
}

src/redux/reducers/count.js

/*
* 1.该文件是用于创建一个为Count组件服务的reducer,reducer的本质就是一个函数
* 2.reducer函数会接到两个参数，分别为: 之前的状态（preState），动作对象(action)
* */
import {INCREMENT,DECREMENT} from '../constant'// 初始化版本2
const initState = 0
export default function countReducer(preState=initState,action) {// 从action对象中获取：type,dataconst {type,data} = action// 根据type决定如何加工数据switch (type) {case INCREMENT: // 如果是加return preState + datacase DECREMENT: // 如果是减return preState - datadefault:return preState}
}

（二）Person组件相关的

src/containers/Person/index.jsx

import React, {Component} from 'react';
import {nanoid} from 'nanoid'
import {connect} from 'react-redux'
import {createAddPersonAction} from "../../redux/actions/person";class Person extends Component {addPerson = ()=>{const name = this.nameNode.valueconst age = this.ageNode.valueconst personObj = {id:nanoid(),name,age}this.props.jiaYiRen(personObj)this.nameNode.value = ''this.ageNode.value = ''}render() {return (<div><h2>我是Person组件,上方组件求和为{this.props.he}</h2><input ref={c=>this.nameNode = c} type="text" placeholder="输入名字"/>&nbsp;<input ref={c=>this.ageNode = c} type="text" placeholder="输入年龄"/>&nbsp;<button onClick={this.addPerson}>添加</button><ul>{this.props.yiduiren.map((p)=>{return <li key={p.id}>名字{p.name}---年龄{p.age}</li>})}</ul></div>);}
}export default connect(state => ({yiduiren:state.rens,he:state.he}), // 映射状态{jiaYiRen: createAddPersonAction}// 映射操作状态的方法
)(Person)

src/redux/actions/person.js

import {ADD_PERSON} from "../constant";// 创建增加一个人的action动作对象
export const createAddPersonAction = personObj=>({type:ADD_PERSON,data:personObj})

src/redux/reducers/person.js

import {ADD_PERSON} from "../constant";// reducer就是专门初始化和加工状态的// 初始化人的列表
const initState = [{id:'001',name:'tom',age:18}]
export default function personReducer(preState=initState,action) {const {type,data}= actionswitch (type) {case ADD_PERSON: // 若是添加一个人return [data,...initState] // 把新加的人放前边default:return preState}
}

相较于这篇文章，尚硅谷-react教程-求和案例-数据共享(上篇)-编写Person组件的reducer-笔记-CSDN博客

做的改动是：

src/redux/store.js

src/containers/Count/index.jsx

src/containers/Person/index.jsx

最终效果：

## 6.求和案例_react-redux 数据共享版(1).定义一个Person组件，和Count组件通过redux共享数据(2).为Person组件编写: reducer,action，配置constant常量(3).重点:Person的reducer和Count的Reducer要使用combineReducers进行合并，合并后的总状态是一个对象!!!(4).交给store的是总reducer,最后注意在组件中取出状态的时候，记得"取到位"

尚硅谷-react教程-求和案例-数据共享(下篇)-完成数据共享-笔记

#1024程序员节｜征文# public/index.html <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>redux</title></head><body><div id"root"></div></body> </html&…...

编程日记 2024/10/31 2:17:56

VB中如何创建和使用自定义控件

在Visual Basic（VB）中，创建和使用自定义控件是一个高级功能，它允许开发者根据特定需求创建具有独特行为和外观的控件。以下是在VB中创建和使用自定义控件的一般步骤： 一、创建自定义控件打开VB开发环境： …...

编程日记 2024/10/31 2:16:55

Java继承的super关键字

在Java中，super关键字用于调用父类的构造方法、访问父类的成员变量和成员方法。调用父类的构造方法： 在子类的构造方法中，可以使用super关键字来调用父类的构造方法。这可以帮助子类初始化从父类继承的属性。调用父类的构造方法要使用以下语…...

编程日记 2024/10/31 2:14:54

3D点云与2D图像的相互转换：2D图像对应像素的坐标转为3D空间的对应坐标

2d ----> 3d 对应像素到空间坐标的转换参考：深度相机，通过2d检测得到目标坐标系的3d检测框_深度图到相机坐标-CSDN博客...

编程日记 2024/10/31 2:13:53

查找算法简记

一、简单查找（顺序查找） 最基本的查找，相当于遍历，从头到尾一个一个找。二、二分查找 1、简述二分查找的输入是一个有序的元素列表。如果要查找的元素包含在列表中，二分查找返回其位置； 否则返回null。…...

编程日记 2024/10/31 2:10:47

算法竞赛（Python）-状态间的奇妙转移（动态规划）

文章目录一、初探动态规划1 拼图游戏（从搜索到动态规划）2 物流仓库——状态的转移二、状态的巧妙定义1 不同的状态和转移2 流浪猫的家——状态压缩与状态剪枝三转移方式的神奇优化1 运输计划——在转移中剪枝2 会议安排——在决策中剪枝三、经典的动…...

编程日记 2024/10/31 2:09:46

String.format() 用法详解

**String.format()详解示例：**import java.util.Date; /** String.format() 格式化 / public class format { /* 字符串占位符类型%s 字符串类型%c 字符类型%b 布尔类型%d 整数类型（十进制）%x 整数类型（十六进制）%o …...

编程日记 2024/10/31 2:08:45

es 常用命令(已亲测)

说明： elastic:1235 账号:密码 _isShare ： 字段 1、根据一个参数查询es curl -XGET -u elastic:1235 http://10.223.73.3:9200/catalog/_search \ -H Content-Type: application/json \ -d {"query":{"match":{"_isShar…...

编程日记 2024/10/31 2:06:43

RabbitMQ 高级特性——事务

文章目录前言事务配置事务管理器加上Transactional注解前言前面我们学习了 RabbitMQ 的延迟队列，通过延迟队列可以实现生产者生产的消息不是立即被消费者消费。那么这篇文章我们将来学习 RabbitMQ 的事务。事务 RabbitMQ 是基于 AMQP 协议实现的，…...

编程日记 2024/10/31 2:05:41

HCIP-HarmonyOS Application Developer V1.0 笔记（二）

类Web开发范式自定义组件基本用法自定义组件通过element引入到宿主页面。 Props自定义属性自定义属性支持类型 String，Number，Boolean，Array，Object。命名规范： 命名时禁止以on、、on:、grab:等保留关键字为开头…...

编程日记 2024/10/31 2:03:39

初体验鸿蒙 HarmonyOS NEXT开发

上个星期三就下载了鸿蒙 HarmonyOS NEXT，安装好了后测试了一下，感觉界面和功能设计与IntelliJ IDEA很像，对初学者非常友好，所见即所得。不知道什么原因，写了代码后测试起来很慢，简单测试后就没有再动。今天…...

编程日记 2024/10/31 2:01:37

MySQL---主从复制和读写分离

文章目录 MySQL---主从复制和读写分离主从复制mysql主从复制的作用mysql主从复制的分类mysql主从复制原理mysql主从复制的配置步骤mysql主从复制的同步模式在什么情况下半同步复制会将为异步复制？mysql主从复制不一致问题如何解决？mysql主从复制延迟问题…...

编程日记 2024/10/31 2:00:36

Apache Kyuubi概述——网易数帆（网易杭州研究院）开源

Apache Kyuubi概述一、Apache Kyuubi 历史 Kyuubi是网易数帆（网易杭州研究院）旗下易数大数据团队开源的一个企业级数据湖探索平台，建立在Apache Spark之上。（Kyuubi依赖Apache Spark提供高性能的数据查询能力，扩展了…...

编程日记 2024/10/31 1:59:34

前端代码注释

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言类注释属性注释函数注释函数参数注释解构 & 函数返回结果注释Vue Props 注释注释建议注释内容要清晰简洁注释类型避免不必要的注释采用一致的风格版本与更…...

编程日记 2024/10/31 1:58:32

Linux线程安全（二）条件变量实现线程同步

目录条件变量条件变量初始化和唤醒键盘触发条件变量唤醒线程demo 条件变量的等待条件变量定时等待demo 条线变量实现多线程间的同步条件变量条件变量是为了控制多个线程的同步工作而设计的比如说一个系统中有多个线程的存在但有且仅有一个线程在工作&#xff0c…...

编程日记 2024/10/31 1:55:29

Linux初阶——线程（Part2）：互斥同步问题

一、互斥锁 1、CPU 运算过程执行完整个语句后，才会把数据写入内存；如果执行时被中断，那么数据和上下文就会保存到线程的 TCB，但数据并不会被写入内存。 1.1. 当 CPU 执行完整个语句时 CPU 最终执行完整个语句的过程就用上图举…...

编程日记 2024/10/31 1:54:29

力扣——二叉树的后序遍历（C语言）

1.题目： 给你一棵二叉树的根节点 root ，返回其节点值的后序遍历。 2.原理： 这里的遍历，是要存入到数组中，所以需要建立数组，这里传参有*returnSize，需要求节点个数，可以调用前面Tr…...

编程日记 2024/10/31 1:53:28

利用kimi编程助手从0到1开始搭建小程序！

电脑崩了，更新5次小程序，什么都不剩！（但是遗留下来了一些东西，开源的思维和不断地对于技术的使用和掌握“一个软件更多的哲学：（01）优秀的ui页面设计（02）更加细…...

编程日记 2024/10/31 1:52:26

WSL(Ubuntu20.04)编译和安装DPDK

编译和安装DPDK DPDK可以使用工具meson和ninja在您的系统上进行配置、构建和安装。 DPDK配置要配置DPDK构建，请使用： meson setup build --prefix/home/xx/dpdk19.11xxxx:~/dpdk-stable-19.11.14/$ meson setup build Message:Content Skipped libs…...

编程日记 2024/10/31 1:51:25

运行环境：ubuntu 20.04 时间：2024年10月26日环境更新 sudo apt-get update sudo apt-get install build-essential libtool libpcre3 libpcre3-dev zlib1g-dev openssl下载nginx wget http://nginx.org/download/nginx-1.19.2.tar.gz tar xvzf n…...

编程日记 2024/10/31 1:50:24

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2026/2/8 4:37:29

python打卡day49

知识点回顾： 通道注意力模块复习空间注意力模块CBAM的定义作业：尝试对今天的模型检查参数数目，并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2026/2/7 5:37:17

工业安全零事故的智能守护者：一体化AI智能安防平台

前言： 通过AI视觉技术，为船厂提供全面的安全监控解决方案，涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面，能够实现对应负责人反馈机制，并最终实现数据的统计报表。提升船厂…...

编程新知 2026/1/21 9:20:07

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2026/2/2 0:45:02

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。一、源型模式的定义原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点：避免重复初…...

编程新知 2026/2/7 10:59:04

2025盘古石杯决赛【手机取证】

前言第三届盘古石杯国际电子数据取证大赛决赛最后一题没有解出来，实在找不到，希望有大佬教一下我。还有就会议时间，我感觉不是图片时间，因为在电脑看到是其他时间用老会议系统开的会。手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2026/1/29 17:12:17

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/11/20 7:13:43

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体（对象或容器）QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质（定义颜色、反光等）QFirstPersonC…...

编程新知 2026/1/29 5:26:37

站群服务器的应用场景都有哪些？

站群服务器主要是为了多个网站的托管和管理所设计的，可以通过集中管理和高效资源的分配，来支持多个独立的网站同时运行，让每一个网站都可以分配到独立的IP地址，避免出现IP关联的风险，用户还可以通过控制面板进行管理功…...

编程新知 2025/9/1 19:01:24

抽象类和接口（全）

一、抽象类 1.概念：如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象，这样的类就是抽象类。像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法，包含抽象⽅法的类我们称为抽象类。 2.语法在Java中，⼀个类如果被 abs…...

编程新知 2026/2/5 4:38:22

尚硅谷-react教程-求和案例-数据共享(下篇)-完成数据共享-笔记

相关文章：

尚硅谷-react教程-求和案例-数据共享(下篇)-完成数据共享-笔记

VB中如何创建和使用自定义控件

Java继承的super关键字

3D点云与2D图像的相互转换：2D图像对应像素的坐标转为3D空间的对应坐标

查找算法简记

算法竞赛（Python）-状态间的奇妙转移（动态规划）

String.format() 用法详解

es 常用命令(已亲测)

RabbitMQ 高级特性——事务

HCIP-HarmonyOS Application Developer V1.0 笔记（二）

初体验鸿蒙 HarmonyOS NEXT开发

MySQL---主从复制和读写分离

Apache Kyuubi概述——网易数帆（网易杭州研究院）开源

前端代码注释

Linux线程安全（二）条件变量实现线程同步

Linux初阶——线程（Part2）：互斥同步问题

力扣——二叉树的后序遍历（C语言）

利用kimi编程助手从0到1开始搭建小程序！

WSL(Ubuntu20.04)编译和安装DPDK

HLS协议之nginx-hls-多码率测试环境搭建

【Axure高保真原型】引导弹窗

python打卡day49

工业安全零事故的智能守护者：一体化AI智能安防平台

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

（二）原型模式

2025盘古石杯决赛【手机取证】

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

QT3D学习笔记——圆台、圆锥

站群服务器的应用场景都有哪些？

抽象类和接口（全）