【React】React-redux多组件间的状态传递

news2024/12/25 12:54:25

效果（部分完整代码在最底部）：在这里插入图片描述

  1. 编写 Person 组件
    上面的 Count 组件，已经在前面几篇写过了，也可以直接翻到最底部看

首先我们需要在 containers 文件夹下编写 Person 组件的容器组件
首先我们需要编写 index.jsx 文件，在这个文件里面编写 Person 组件的 UI 组件，并使用 connect 函数将它包装，映射它的状态和方法

编写 UI 组件架构

<div>
    <h2>我是 Person 组件,上方组件求和为:{this.props.countAll}</h2>
    <input ref={c => this.nameNode = c} type="text" placeholder="输入名字" />
    <input ref={c => this.ageNode = c} type="text" placeholder="输入年龄" />
    <button onClick={this.addPerson}>添加</button>
    <ul>
        {
            this.props.persons.map((p) => {
                return <li key={p.id}> {p.name}--{p.age}</li>
            })
        }
    </ul>
</div>

我们可以看到这里采用了 ref 来获取到当前事件触发的节点，并通过 this.addPerson 的方式给按钮绑定了一个点击事件

编写点击事件回调

addPerson = () => {
    const name = this.nameNode.value
    const age = this.ageNode.value
    const personObj = { id: nanoid(), name, age }
    this.props.add(personObj)
    this.nameNode.value = ''
    this.ageNode.value = ''
}

在这里我们需要处理输入框中的数据，并且将这些数据用于创建一个 action 对象，传递给 store 进行状态的更新

在这里我们需要回顾的是，这里我们使用了一个 nanoid 库，这个库我们之前也有使用过

下载，引入，暴露

import { nanoid } from 'nanoid'

暴露的 nanoid 是一个函数，我们每一次调用时，都会返回一个不重复的数，用于确保 id 的唯一性，同时在后面的 map 遍历的过程中，我们将 id 作为了 key 值，这样也确保了 key 的唯一性，关于 key 的作用，可以看看 diffing 算法的文章

状态管理
在这里我们需要非常熟练的采用 this.props.add 的方式来更新状态

那么它是如何实现状态更新的呢？我们来看看

在我们调用 connect 函数时，我们第一次调用时传入的第二个参数，就是用于传递方法的，我们传递了一个 add 方法

export default connect(
    state => ({ persons: state.person, countAll: state.count }),//映射状态
    { add: createAddPersonAction }
)(Person);

它的原词是：mapDispatchToProps

我的理解是，传入的东西会被映射映射成 props 对象下的方法，这也是我们能够在 props 下访问到 add 方法的原因

对于这一块 connect ，我们必须要能够形成自己的理解，这里非常的重要，它实现了数据的交互，不至于一个组件，而是全部组件

我是如何理解的呢？
想象一个 store 仓库，在我们这个案例当中，Count 组件需要存放 count 值在 store 中，Person 组件需要存放新增用户对象在 store 中，我们要把这两个数据存放在一个对象当中。当某个组件需要使用 store 中的值时，可以通过 connect 中的两个参数来获取，例如这里我们需要使用到 Count 组件的值，可以通过 .count 来从 store 中取值。

也就是说，所有的值都存放在 store 当中，通过点运算符来获取，所有的操作 store 的方法都需要通过 action 来实现。当前组件需要使用的数据都需要在 connect 中暴露

  1. 编写 reducer
    首先，我们需要明确 reducer 的作用，它是用来干什么的？

根据操作类型来指定状态的更新

也就是说当我们点击了添加按钮后，会将输入框中的数据整合成一个对象，作为当前 action 对象的 data 传递给 reducer

我们可以看看我们编写的 action 文件，和我们想的一样

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

当 reducer 接收到 action 对象时，会对 type 进行判断

export default function personReducer(preState = initState, action) {
  const { type, data } = action;
  switch (type) {
    case ADD_PERSON:
      return [data,...preState]
    default:
      return preState
  }
}

一般都采用 switch 来编写

这里有个值得注意的地方是，这个 personReducer 函数是一个纯函数，什么是纯函数呢？这个是高阶函数部分的知识了，纯函数是一个不改变参数的函数，也就是说，传入的参数是不能被改变的。

为什么要提这个呢？在我们 return 时，有时候会想通过数组的 API 来在数组前面塞一个值，不也可以吗？

但是我们要采用 unshirt 方法，这个方法是会改变原数组的，也就是我们传入的参数会被改变，因此这样的方法是不可行的！

  1. 打通数据共享
    写到这里，或许已经写完了，但是有些细节还是需要注意一下

采用 Redux 来进行组件的数据交互真的挺方便。

我们可以在 Count 组件中引入 Person 组件存在 store 中的状态。

export default connect(state => ({ count: state.count, personNum: state.person.length }),
    {
       ...
    }
)(Count)

在这里我们将 store 中的 person 数组的长度暴露出来这样 Count 组件就可以直接通过 props 来使用了

同样的我们也可以在 Person 组件中使用 Count 组件的值

从而实现了我们的这个 Demo

  1. 最终优化
    利用对象的简写方法，将键名和键值同名，从而只写一个名即可
    合并 reducer ，我们可以将多个 reducer文件 写在一个 index 文件当中，需要采用 combineReducers 来合并

完整代码：

//reducers/count.js
/* 
	1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
	2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/
import {INCREMENT,DECREMENT} from '../constant'

const initState = 0 //初始化状态
export default function countReducer(preState=initState,action){
	// console.log('countReducer@#@#@#');
	//从action对象中获取：type、data
	const {type,data} = action
	//根据type决定如何加工数据
	switch (type) {
		case INCREMENT: //如果是加
			return preState + data
		case DECREMENT: //若果是减
			return preState - data
		default:
			return preState
	}
}

//reducers/person.js
import {ADD_PERSON} from '../constant'

//初始化人的列表
const initState = [{id:'001',name:'tom',age:18}]

export default function personReducer(preState=initState,action){
	// console.log('personReducer@#@#@#');
	const {type,data} = action
	switch (type) {
		case ADD_PERSON: //若是添加一个人
			return [data,...preState]
		default:
			return preState
	}
}

//store.js
/* 
	该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/

//引入createStore，专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware,combineReducers} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './reducers/count'
//引入为Count组件服务的reducer
import personReducer from './reducers/person'
//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'

//汇总所有的reducer变为一个总的reducer
const allReducer = combineReducers({
	he:countReducer,
	rens:personReducer
})

//暴露store
export default createStore(allReducer,applyMiddleware(thunk))

//containers/count/index.js
import React, { Component } from 'react'
//引入action
import {
	createIncrementAction,
	createDecrementAction,
	createIncrementAsyncAction
} from '../../redux/actions/count'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'

//定义UI组件
class Count extends Component {

	state = {carName:'奔驰c63'}

	//加法
	increment = ()=>{
		const {value} = this.selectNumber
		this.props.jia(value*1)
	}
	//减法
	decrement = ()=>{
		const {value} = this.selectNumber
		this.props.jian(value*1)
	}
	//奇数再加
	incrementIfOdd = ()=>{
		const {value} = this.selectNumber
		if(this.props.count % 2 !== 0){
			this.props.jia(value*1)
		}
	}
	//异步加
	incrementAsync = ()=>{
		const {value} = this.selectNumber
		this.props.jiaAsync(value*1,500)
	}

	render() {
		//console.log('UI组件接收到的props是',this.props);
		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
	}),
	{
		jia:createIncrementAction,
		jian:createDecrementAction,
		jiaAsync:createIncrementAsyncAction,
	}
)(Count)



//containers/person/index.js
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.value
		const age = this.ageNode.value
		const 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="输入名字"/>
				<input ref={c=>this.ageNode = c} type="text" placeholder="输入年龄"/>
				<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)

本文部分节选自数据共享

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

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

相关文章

一种算法分类方式及其应用

一种算法分类方式及其应用

在计算机科学领域&#xff0c;算法是解决问题的有效方法&#xff0c;而对算法进行分类有助于理解它们的特性、优劣以及在不同场景下的应用。常见的算法分类方法&#xff0c;包括按设计思想、问题类型、数据结构和应用领域等&#xff0c;每一类算法会对应有其典型和实际应用。 算…
阅读更多...
连接HiveMQ代理器实现MQTT协议传输

连接HiveMQ代理器实现MQTT协议传输

先下载MQTTX: MQTTX: Your All-in-one MQTT Client Toolbox 使用线上免费的MQTTX BROKER:The Free Global Public MQTT Broker | Try Now | EMQ 打开MQTTX&#xff0c;创建连接&#xff0c;点击NEW SUBSCRIPTION,创建一个主题&#xff0c;这里使用test/topic,在下面Json中填写…
阅读更多...
大语言模型教程与实践（开源）

大语言模型教程与实践（开源）

1.简介 大语言模型&#xff08;Large Language Models, LLMs&#xff09;的兴起确实始于OpenAI在2018年发布的GPT&#xff08;Generative Pre-trained Transformer&#xff09;&#xff0c;这一开创性工作引领了自然语言处理领域的新纪元。随后&#xff0c;2022年底ChatGPT的横…
阅读更多...
DDD：根据maven的脚手架archetype生成ddd多模块项目目录结构

DDD：根据maven的脚手架archetype生成ddd多模块项目目录结构

随着领域驱动的兴起&#xff0c;很多人都想学习如何进行ddd的项目开发&#xff0c;那ddd的项目结构是怎么样的&#xff1f;又是如何结合SpringBoot呢&#xff1f;那么针对这个问题&#xff0c;笔者使用maven的archetype封装一个相对通用的ddd的项目目录&#xff0c;方便一键生成…
阅读更多...
Redisson 分布式锁和同步器

Redisson 分布式锁和同步器

系列文章目录 文章目录 系列文章目录前言前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这篇文章男女通用，看懂了就去分享给你的码吧。 redisson 是基于redis的扩展库，使得redis除了应用于缓存以外，还能做队列…
阅读更多...
Excel 批量创建sheet页

Excel 批量创建sheet页

参考资料 最巧妙的Excel批量创建工作表方法 一. 需求 ⏹有如下模板&#xff0c;现想根据提供的姓名&#xff0c;批量创建sheet页&#xff0c;要求每个sheet页拥有相同的模板 二. 通过透视表&#xff0c;批量创建sheet页面 ⏹如下图所示的步骤&#xff0c;创建透视表后&#…
阅读更多...
3.3Java全栈开发前端+后端（全栈工程师进阶之路）-前端框架VUE3框架-企业级应用-Vue组合式API

3.3Java全栈开发前端+后端（全栈工程师进阶之路）-前端框架VUE3框架-企业级应用-Vue组合式API

为什么要使用Composition API 一个Options API实例 在前面的课程中&#xff0c;我们都是采用 Options API&#xff08;基于选项的 API &#xff09; 来写一个组件的。下面是一个实例&#xff1a; <template> Count is: {{ count }}, doubleCount is: {{ doubleCount…
阅读更多...
brpc中http2 grpc协议解析

brpc中http2 grpc协议解析

搭建gRPC服务 | bRPC https://blog.csdn.net/INGNIGHT/article/details/132657099 global.cpp http2_rpc_protocol.cpp ParseH2Message解析frame header信息 ParseResult H2Context::ConsumeFrameHead( 这个是固定长度的9字节帧头部&#xff0c;length是&#xff0c;3*8bit…
阅读更多...
七. Django项目之电商购物商城 -- 退出登录

七. Django项目之电商购物商城 -- 退出登录

Django项目之电商购物商城 – 退出登录状态 需要开发文档和前端资料的可私聊 退出登录主要是基于Django自带的logout模块 , 该功能只有在登录是保存了用户状态才可以实现调用 一. 创建退出视图 class LogoutView(View):def get(self , request):# 删除用户数据logout(reque…
阅读更多...
etcd源码流程---调试环境的搭建

etcd源码流程---调试环境的搭建

etcd启动命令&#xff1a; name必须设置&#xff0c;否则会用default&#xff0c;集群内不同etcd实例的名字应该是唯一的&#xff0c;因为他会有一个map(name->ip)。如果initial-cluster-state设置为new&#xff0c;那么他会创建一个新的clusterid。需要在initial-cluster中…
阅读更多...
PHP 反序列化

PHP 反序列化

一、PHP 序列化 1、对象的序列化 <?php class people{public $nameGaming;private $NationLiyue;protected $Birthday12/22;public function say(){echo "老板你好呀&#xff0c;我是和记厅的镖师&#xff0c;叫我嘉明就行&#xff0c;要运货吗你&#xff1f;"…
阅读更多...
【LeetCode:1235. 规划兼职工作 + 动态规划 + 二分查找】

【LeetCode:1235. 规划兼职工作 + 动态规划 + 二分查找】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…
阅读更多...
Unity---版本控制软件

Unity---版本控制软件

13.3 版本控制——Git-1_哔哩哔哩_bilibili Git用的比较多 Git 常用Linux命令 pwd&#xff1a;显示当前所在路径 ls&#xff1a;显示当前路径下的所有文件 tab键自动补全 cd&#xff1a;切换路径 mkdir&#xff1a;在当前路径下创建一个文件夹 clear&#xff1a;清屏 vim…
阅读更多...
能将图片转为WebP格式的WebP Server Go

能将图片转为WebP格式的WebP Server Go

本文完成于 2023 年 11 月 之前老苏介绍过 webp2jpg-online&#xff0c;可以将 webp 格式的图片&#xff0c;转为 jpg 等&#xff0c;今天介绍的 WebP Server Go 是将 jpg 等转为 webp 格式 文章传送门&#xff1a;多功能图片转换器webp2jpg-online 什么是 WebP ? WebP 它是由…
阅读更多...
SpringBoot与SpringMVC的区别

SpringBoot与SpringMVC的区别

SpringBoot与SpringMVC的区别是什么&#xff1f; SpringBoot和SpringMVC是Java开发中常用的两个框架&#xff0c;它们都是由Spring框架所提供的&#xff0c;但在功能和使用方式上有着一些区别。本文将分别介绍SpringBoot和SpringMVC的特点和区别。 一、SpringBoot的特点&#…
阅读更多...
区域文本提示的实时文本到图像生成；通过一致性自注意力机制的视频生成工具保持视频的一致性；专门为雪佛兰汽车设计的客服聊天机器人

区域文本提示的实时文本到图像生成；通过一致性自注意力机制的视频生成工具保持视频的一致性；专门为雪佛兰汽车设计的客服聊天机器人

✨ 1: StreamMultiDiffusion StreamMultiDiffusion是首个基于区域文本提示的实时文本到图像生成框架&#xff0c;实现了高速且互动的图像生成。 StreamMultiDiffusion 旨在结合加速推理技术和基于区域的文本提示控制&#xff0c;以克服之前解决方案中存在的速度慢和用户交互性…
阅读更多...
Pytorch: nn.Embedding

Pytorch: nn.Embedding

文章目录 1. 本质2. 用Embedding产生一个10 x 5 的随机词典3. 用这个词典编码两个简单单词4. Embedding的词典是可以学习的5. 例子完整代码 1. 本质 P y t o r c h \mathrm{Pytorch} Pytorch 的 E m b e d d i n g \mathrm{Embedding} Embedding 模块是一个简单的查找表&#…
阅读更多...
活动图与状态图：UML中流程图的精细化表达——专业解析系统动态性与状态变迁

活动图与状态图：UML中流程图的精细化表达——专业解析系统动态性与状态变迁

流程图是一种通用的图形表示法&#xff0c;用以展示步骤、决策和循环等流程控制结构。它通常用于描述算法、程序执行流程或业务过程&#xff0c;关注于任务的顺序执行。流程图强调顺序、分支和循环&#xff0c;适用于详细说明具体的处理步骤&#xff0c;图形符号相对基础和通用…
阅读更多...
c++多线程基础

c++多线程基础

简介 c多线程基础需要掌握这三个标准库&#xff1a;std::thread, std::mutex, and std::async。 1. Hello, world #include <iostream> #include <thread>void hello() { std::cout << "Hello Concurrent World!\n"; }int main() {std::thread…
阅读更多...
论文阅读笔记（AAAI 20）Order Matters

论文阅读笔记（AAAI 20）Order Matters

个人博客地址 注&#xff1a;部分内容参考自GPT生成的内容 论文笔记&#xff1a;Order Matters&#xff08;AAAI 20&#xff09; 用于二进制代码相似性检测的语义感知神经网络 论文:《Order Matters: Semantic-Aware Neural Networks for Binary Code Similarity Detection》…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023