React(react18)中组件通信06——redux-toolkit + react-redux

React(react18)中组件通信06——redux-toolkit + react-redux

    • 1 前言
    • 1.1 redux 和 react-redux
    • 1.2 关于redux-toolkit
      • 1.2.1 官网
      • 1.2.2 为什么要用Redux Toolkit?
    • 1.3 安装 Redux Toolkit
    • 1.4 Redux Toolkit相关API
  • 2. 开始例子——官网例子
    • 2.1 创建 Redux Store
    • 2.2 为 React 提供 Redux Store
    • 2.3 创建 Redux State Slice
      • 2.3.1 counterSlice.js文件
      • 2.3.2 对比之前的action 和 reducer
    • 2.4 添加 Slice Reducers 到 Store
    • 2.5 在 React 组件中使用 Redux State 和 Actions
    • 2.6 渲染
    • 2.7 效果
      • 2.7.1 效果展示
      • 2.7.2 说明
    • 2.8 注意:
    • 2.9 附代码
  • 3. 例子2——练手小例子
    • 3.1 再添加一个Dog组件
    • 3.1.1 编写 dogSlice
      • 3.1.2 修改store.js
      • 3.1.3 编写dog组件
      • 3.1.4 效果
    • 3.2 这数据共享也太简单了吧
      • 3.2.1 试试数据共享
      • 3.2.2 react-redux + redux 数据共享
  • 4. 关于 Payload——载荷payload
  • 5. 项目代码
    • 5.1 代码目录
    • 5.2 下载项目

1 前言

1.1 redux 和 react-redux

  • 前面两篇文章已经介绍过了,需要的可以点进去看看:
    React(react18)中组件通信04——redux入门.
    React(react18)中组件通信05——redux ➕ react-redux(含数据共享).

1.2 关于redux-toolkit

1.2.1 官网

  • https://redux-toolkit.js.org/.
  • https://cn.react-redux.js.org/tutorials/quick-start.

1.2.2 为什么要用Redux Toolkit?

  • 首先看官网怎么说?
    在这里插入图片描述
  • 然后看我们代码中createStore已经被弃用了,如下:
    在这里插入图片描述
    在这里插入图片描述

1.3 安装 Redux Toolkit

  • 安装命令如下
    npm install @reduxjs/toolkityarn add @reduxjs/toolkit
    
  • 如果项目没有装过react-redux,可以两个一起安装,但是不用单独安装 redux 了,react-redux + redux-toolkit 替换了 react-redux + redux
    npm install @reduxjs/toolkit react-reduxyarn add @reduxjs/toolkit react-redux
    

1.4 Redux Toolkit相关API

  • 先简单介绍几个

  • 官网全,还是看官网吧
    在这里插入图片描述

2. 开始例子——官网例子

  • 过程参考官方下面的地址:
    https://cn.react-redux.js.org/tutorials/quick-start/.

2.1 创建 Redux Store

  • 从 Redux Toolkit 中导入 configureStore API。我们将开始创建一个空的 Redux store,并导出它,如下:
    import { configureStore } from '@reduxjs/toolkit';export default configureStore({reducer: {},
    });
    
  • 这将创建一个 Redux store,并自动配置 Redux DevTools 扩展,以便你可以在开发时检查 store。

2.2 为 React 提供 Redux Store

  • 这个按照原先的保持不变就行,如下:
    在这里插入图片描述

2.3 创建 Redux State Slice

2.3.1 counterSlice.js文件

  • 创建 slice 需要一个字符串名称来标识 slice,一个初始 state 值,以及一个或多个 reducer 函数来定义如何更新 state。创建 slice 后,我们可以导出生成的 Redux action creators 和整个 slice reducer 函数
  • 如下:
    在这里插入图片描述

2.3.2 对比之前的action 和 reducer

  • 之前的action写法,如下:
    function incrementOne(){type:'INCREMENT_ONE'
    }
    function incrementNumber(number){type:'INCREMENT_NUMBER',number:number
    }
    export default{incrementOne,incrementNumber}
    
  • 之前的reducer写法,如下
     function countReducer(state = 0,action){switch (action.type) {case 'INCREMENT_ONE':return state + 1;case 'INCREMENT_NUMBER':return state + action.number;default:return state;}}export default{countReducer}
    

2.4 添加 Slice Reducers 到 Store

  • 接下来,我们需要从 counter slice 中导入 reducer 函数并将其添加到我们的 store 中。通过在 reducers 参数中定义一个字段,我们告诉 store 使用这个 slice reducer 函数来处理该 state 的所有更新。
  • 所以最后的store.js,如下:
    在这里插入图片描述

2.5 在 React 组件中使用 Redux State 和 Actions

  • 现在我们可以使用 React Redux hooks 让 React 组件与 Redux store 交互。我们可以使用 useSelector从 store 中读取数据(不通过props了),并使用 useDispatch dispatch actions。
  • 组件内设计如下:
    在这里插入图片描述
    在这里插入图片描述

2.6 渲染

  • 一样的代码
    在这里插入图片描述

2.7 效果

2.7.1 效果展示

  • 如下:
    在这里插入图片描述

2.7.2 说明

  • 单击 【点我+1】 、 【点我-1】和【加数】按钮:
    对应的 Redux action 会被 dispatch 到 store;
    计数 slice reducer 将看到 actions 更新其 state;
    <Counter> 组件将从 store 中看到新的 state 值,并使用新的数据重新渲染自己。

2.8 注意:

  • 如下:
    在这里插入图片描述

2.9 附代码

  • counterSlice.js

    
    import {createSlice} from '@reduxjs/toolkit'export const counterSlice = createSlice({name: 'myFirstCounterSlice',  //这个名字随便取  标识initialState: {value: 0,  //初始值},reducers: {  // 对比之前的reducer是一个函数,里面是根据不同的action的type判断的switch语句incrementOne: (state) =>{  //下面生成 加 1 的action,等价于原先只有type的actionstate.value += 1;},decrementOne: (state) =>{  //下面生成 减 1 的action,等价于原先只有type的actionstate.value -= 1;},incrementNumber: (state,action) =>{  //等价于不只有type一个参数的actionstate.value += action.payload;  //payload}}
    });// 为每个 case reducer 函数生成 Action creators
    export const {incrementOne,decrementOne,incrementNumber} = counterSlice.actions;const countReducer = counterSlice.reducer;
    export default countReducer;
    
  • store.js

    import { configureStore } from '@reduxjs/toolkit';
    import countReducer from './reducerAndAction/counterSlice';export default configureStore({reducer: {counterState: countReducer,},
    });
    
  • Counter.jsx

    import {useRef} from "react";
    import { useDispatch, useSelector } from 'react-redux'
    import {incrementOne,decrementOne,incrementNumber} from '../redux/reducerAndAction/counterSlice'function Couter(){// console.log(props);const numberRef = useRef();const count = useSelector((state)=>state.counterState.value);const dispatch = useDispatch();//加 1 的function addOne(){dispatch(incrementOne());}//动态增加function addNumber(){const stringNumber = numberRef.current.value; //直接取取的是字符串const number = parseInt(stringNumber);const addNumberAction = incrementNumber(number);   //有参数的actiondispatch(addNumberAction);}return(<div>当前数值是:{count}  <br /><button onClick={addOne}>点我+1</button>  &nbsp;&nbsp;<button onClick={()=>dispatch(decrementOne())}>点我-1</button><br /><br /><input type="number" ref={numberRef} placeholder="请输入要加的数"/>  &nbsp;&nbsp;<button onClick={addNumber}>加数</button></div>)
    }export default Couter;
    

3. 例子2——练手小例子

3.1 再添加一个Dog组件

3.1.1 编写 dogSlice

  • 如下:
    在这里插入图片描述

3.1.2 修改store.js

  • 如下:
    在这里插入图片描述

3.1.3 编写dog组件

  • 为了方便,添加就简单写了,需要的自行优化,如下:
    在这里插入图片描述

3.1.4 效果

  • 如下:
    在这里插入图片描述

3.2 这数据共享也太简单了吧

3.2.1 试试数据共享

  • 直接访问试试,代码如下:
    在这里插入图片描述
  • 还真行,这可比redux + react-redux 简单太多了,效果如下
    在这里插入图片描述

3.2.2 react-redux + redux 数据共享

  • 关于react-redux + redux 数据共享怎么实现的数据共享,需要的看下面的文章,如下:
    React(react18)中组件通信05——redux ➕ react-redux(含数据共享).

4. 关于 Payload——载荷payload

  • 关于state.value += action.payload; //payload ,下面举个例子,如果还用原先的redux的话,action也可以如下写法:
    在这里插入图片描述
  • 再比如, “新增一个待办事项” 的 Action创造函数,你可以这么写:
    var id = 1
    function addTodo(content) {return {type: 'ADD_TODO',payload: {id: id++,content: content, // 待办事项内容completed: false  // 是否完成的标识}}
    }
    
  • 这就可以理解 action.payload 为啥要这么用,为了规范呗,不管你传的是什么参数,数字还是对象,都是action.payload,看一下我们上面的例子就更好理解了,如下:
    在这里插入图片描述

5. 项目代码

5.1 代码目录

  • 如下:
    在这里插入图片描述

5.2 下载项目

  • 如下:
    react(react18)组件通信的各种方式以及各种详细例子(含react-redux + redux-toolkit).

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

更直观地学习 Git 命令

theme: condensed-night-purple 前言 本文参考于 Learn Git Branching 这个有趣的 Git 学习网站。 在该网站&#xff0c;可以使用 show command 命令展示所有可用命令。 你也可以直接访问网站的sandbox&#xff0c;自由发挥。 本地篇 基础篇 git commit git commit将暂…

文件I/O与标准I/O

如果不知道inode&#xff0c;请看这篇文章inode 我们知道当打开一个文件时&#xff0c;OS会先使用inode编号在磁盘文件系统里面去寻找这个文件&#xff0c;找到以后根据文件的属性为其创建一个内核层面的结构体来描述这个文件&#xff0c;该结构体里面含有文件的属性信息&#…

蓝桥杯 题库 简单 每日十题 day11

01 质数 质数 题目描述 给定一个正整数N&#xff0c;请你输出N以内&#xff08;不包含N&#xff09;的质数以及质数的个数。 输入描述 输入一行&#xff0c;包含一个正整数N。1≤N≤10^3 输出描述 共两行。 第1行包含若干个素数&#xff0c;每两个素数之间用一个空格隔开&…

SpringMVC+统一表现层返回值+异常处理器

一、统一表现层返回值 根据我们不同的处理方法&#xff0c;返回的数据格式都会不同&#xff0c;例如添加只返回true|false&#xff0c;删除同理&#xff0c;而查询却返回数据。 Result类 为此我们封装一个result类来用于表现层的返回。 public class Result {//描述统一格式…

测试OpenCvSharp库的模板匹配功能

微信公众号“Dotnet讲堂”的文章《c#实现模板匹配&#xff0c;并输出匹配坐标》&#xff08;参考文献1&#xff09;中介绍了采用OpenCVSharp库实现模板匹配功能&#xff0c;也即在目标图片中定位指定图片内容的示例&#xff0c;本文参照参考文献1-4&#xff0c;学习并测试OpenC…

基于SpringBoot的飘香水果购物网站

目录 前言 一、技术栈 二、系统功能介绍 水果信息管理 减积分管理 会员购买订单管理 首页 水果 购买水果订单管理 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息互联网购物的飞速发展&#xff0c;一般企业都去创建属于自己的电商平台以及购物…

让文件传输变得更简单高效——推荐强大的Mac FTP客户端Transmit 5

无论是个人用户还是专业人士&#xff0c;文件传输都是我们日常工作中不可或缺的一部分。而针对Mac用户&#xff0c;Transmit 5正是一款强大且易用的FTP客户端&#xff0c;为您提供了最佳的文件传输体验。 Transmit 5在功能上非常丰富&#xff0c;可以满足各种文件传输需求。首…

数据结构学习笔记——查找算法中的树形查找(平衡二叉树)

目录 一、平衡二叉树的定义二、平衡因子三、平衡二叉树的插入和构造&#xff08;一&#xff09;LL型旋转&#xff08;二&#xff09;LR型旋转&#xff08;三&#xff09;RR型旋转&#xff08;四&#xff09;RL型旋转 四、平衡二叉树的删除&#xff08;一&#xff09;叶子结点&a…

【网络协议】TCP

TCP协议全称为传输控制协议(Transmission Control Protocol).要理解TCP就要从他的特性开始说&#xff0c;这些特性各自之间或多或少各有联结&#xff0c;需要以宏观视角来看待。 目录&#xff1a; 1.TCP报文格式 因为报文解释过于繁琐&#xff0c;具体内容请看这篇文章TCP报文…

oracle分组合并数值带顺序

比如&#xff1a;有如下一张设备电子围栏位置坐标的表&#xff08;tb_equ_point&#xff09;。 equ_name:设备电子围栏名称 point_id:点位坐标id point_x:点位x坐标 point_y:点位y坐标。 附数据&#xff1a; INSERT INTO "tb_equ_point" ("EQU_NAME",…

Spark SQL案例【电商购买数据分析】

数据说明 Spark 数据分析 &#xff08;Scala&#xff09; import org.apache.spark.rdd.RDD import org.apache.spark.sql.{DataFrame, SparkSession} import org.apache.spark.{SparkConf, SparkContext}import java.io.{File, PrintWriter}object Taobao {case class Info(u…

十六)Stable Diffusion教程:出图流程化

今天说一个流程化出图的案例&#xff0c;适用很多方面。 1、得到线稿&#xff0c;自己画或者图生图加线稿lora出线稿&#xff1b;如果想sd出图调整参数不那么频繁细致&#xff0c;则线稿的素描关系、层次、精深要表现出来&#xff0c;表现清楚。 2、文生图&#xff0c;seed随机…

Java进阶篇--网络编程

​​​​​​​ 目录 计算机网络体系结构 什么是网络协议&#xff1f; 为什么要对网络协议分层&#xff1f; 网络通信协议 TCP/IP 协议族 应用层 运输层 网络层 数据链路层 物理层 TCP/IP 协议族 TCP的三次握手四次挥手 TCP报文的头部结构 三次握手 四次挥手 …

Fiddler抓取Https请求配置

官网&#xff1a;https://www.telerik.com/fiddler 配置抓取https包 1.Tools->Options->Https&#xff0c;勾选下面。 2.Actions ->Trust Root Certificate.安装证书到本地 3.在手机端设置代理&#xff1a;本机ip如&#xff1a;192.168.1.168 端口号:8888。 4.手机…

DockerKubernetes ❀ Service下Port端口区分

文章目录 概述案例 概述 在Kubernetes中&#xff0c;Service&#xff08;svc&#xff09;是一种抽象机制&#xff0c;用于将一组 Pod 暴露给其他应用程序或服务。Service 可以有三种类型的端口&#xff1a; nodePort&#xff1a;这是 Service 在节点上公开的端口。可以使用此…

处理conda安装工具的动态库问题——解决记录 libssl.1.0.0 系统中所有openssl位置全览 whereis openssl

处理conda安装工具的动态库问题——解决记录 处理conda安装工具的动态库问题——解决记录 - 简书 解决libssl.so.1.0.0: cannot open shared object file: No such file or directory问题 - 简书 openssl 默认版本问题&#xff08;Anaconda相关&#xff09;_anaconda openssl-…

嵌入式开源库之libmodbus学习笔记

socat 安装sudo apt-get install socat创建终端 socat -d -d pty,b115200 pty,b115200查看终端 ls /dev/pts/ minicom 安装 sudo apt-get install minicom链接虚拟终端 sudo minicom -D /dev/pts/3以十六进制显示 minicom -D /dev/pts/1 -H设置波特率 minicom -D /dev/pts/1…

第1篇 目标检测概述 —(2)目标检测算法介绍

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。目标检测算法是一种计算机视觉算法&#xff0c;用于在图像或视频中识别和定位特定的目标物体。常见的目标检测算法包括传统的基于特征的方法&#xff08;如Haar特征和HOG特征&#xff09;以及基于深度学习的方法&#xff0…

[React] Context上下文的使用

文章目录 1.Context的介绍2.为什么需要Context3.Context的使用 1.Context的介绍 Context旨在为React复杂嵌套的各个组件提供一个生命周期内的统一属性访问对象&#xff0c;从而避免我们出现当出现复杂嵌套结构的组件需要一层层通过属性传递值得问题。 Context是为了提供一个组…

CTF 入门指南:从零开始学习网络安全竞赛

文章目录 写在前面CTF 简介和背景CTF 赛题类型介绍CTF 技能和工具准备好书推荐 写作末尾 写在前面 CTF比赛是快速提升网络安全实战技能的重要途径&#xff0c;已成为各个行业选拔网络安全人才的通用方法。但是&#xff0c;本书作者在从事CTF培训的过程中&#xff0c;发现存在几…