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

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

news 2026/2/9 5:08:39

#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

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/11/20 18:42:48

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/10/13 2:26:14

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2026/2/1 5:42:50

css3笔记 （1） 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/10/11 5:18:43

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

编程新知 2026/1/27 16:41:02

宇树科技，改名了！

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

编程新知 2026/1/28 9:44:45

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

编程新知 2026/1/28 11:47:09

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

编程新知 2025/6/10 21:11:28