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

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

news 2025/7/7 18:39:26

#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程序员节&#xff5c;征文# 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&#xff08;VB&#xff09;中&#xff0c;创建和使用自定义控件是一个高级功能&#xff0c;它允许开发者根据特定需求创建具有独特行为和外观的控件。以下是在VB中创建和使用自定义控件的一般步骤&#xff1a; 一、创建自定义控件 打开VB开发环境&#xff1a; …...

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

Java继承的super关键字

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

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

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

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

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

查找算法简记

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

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

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

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

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

String.format() 用法详解

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

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

es 常用命令(已亲测)

说明&#xff1a; elastic:1235 账号:密码 _isShare &#xff1a; 字段 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 的延迟队列&#xff0c;通过延迟队列可以实现生产者生产的消息不是立即被消费者消费。那么这篇文章我们将来学习 RabbitMQ 的事务。 事务 RabbitMQ 是基于 AMQP 协议实现的&#xff0c;…...

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

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

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

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

初体验鸿蒙 HarmonyOS NEXT开发

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

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

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

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

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

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

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

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

前端代码注释

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

编译和安装DPDK DPDK可以使用工具meson和ninja在您的系统上进行配置、构建和安装。 DPDK配置 要配置DPDK构建&#xff0c;请使用&#xff1a; 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

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

运行环境&#xff1a;ubuntu 20.04 时间&#xff1a;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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/7/7 5:29:47

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/7/7 17:33:09

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/7/6 20:12:25

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/7/5 2:52:28

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2025/7/6 0:01:32

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/7/6 21:24:58

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2025/7/6 0:26:56

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/7/6 22:52:33

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

编程新知 2025/7/5 18:11:47

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

编程新知 2025/6/17 4:01:05