React Redux使用@reduxjs/toolkit的hooks

关于redux的学习过程需要几个官网,有redux官网,React Redux官网和Redux Toolkit的官网。
其中后者的中文没有找到,不过其中的使用在React Redux官网的快速入门中有介绍。
现在一般不使用connect借接口了。
对于借助Redux Toolkit的React Redux的应用示例可以看这个链接
https://blog.csdn.net/2202_75616310/article/details/134661399

注意:组件中使用state是从注册store的js的reducer里的key进行取用。useSelector((state) => state.counter2.value);这里的state是全局的state。
注册store的js

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';export default configureStore({reducer: {counter2: counterReducer,},
});

组件使用store的js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { decrement, increment } from './counterSlice';
import styles from './Counter.module.css';export function Counter() {const count = useSelector((state) => state.counter2.value);const dispatch = useDispatch();return (<div><div><buttonaria-label="Increment value"onClick={() => dispatch(increment())}>Increment</button><span>{count}</span><buttonaria-label="Decrement value"onClick={() => dispatch(decrement())}>Decrement</button></div></div>);
}

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

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

相关文章

Linux GUN(gcc/g++) 版本升级教程

Linux gcc/g 升级命令: // 查看当前安装的版本 ll /usr/bin/gcc* ll /usr/bin/g*// 更新源 sudo apt update // 安装新版本 sudo apt install g-10 gcc-10 // 应用新的版本 sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-10 10 sudo update-altern…

【网站推荐】Developer Roadmaps 开发者学习路线

你是否想学习某门技术而苦苦找不到学习路线。本文推荐一个网站&#xff0c;解决学习路径问题。 roadmap.sh 旨在创建路线图、指南和其他教育内容&#xff0c;以帮助指导开发人员选择路径并指导他们的学习。 技术路线包括了前端后端安卓iosUI设计等内容&#xff0c;一些技术比如…

信息安全三要素

文章目录 安全三要素 CIA机密性完整性可用性参考资料 安全三要素 CIA 安全三要素&#xff0c;也被称为信息安全的CIA三要素&#xff0c;是确保信息和系统安全的核心原则。它们分别是&#xff1a; 机密性&#xff08;Confidentiality&#xff09;&#xff1a;保护数据不能泄露…

antdesignvue对话框用户可移动并缩放

原贴 轻松搞定Ant Design Modal对话框拖拽缩放 - ByteZoneX社区https://www.bytezonex.com/archives/IFRuoJhd.html Ant Design 模态对话框&#xff1a;实现拖拽缩放功能 **子 Ant Design 是一个流行的前端 UI 框架&#xff0c;提供了一系列实用的组件&#xff0c;包括模态对…

ESP32CAM物联网教学02

ESP32CAM物联网教学02 物联网门锁 小智来到姑姑家门口&#xff0c;按了门铃&#xff1b;还在公司上班的姑姑用电脑给小智开了门&#xff0c;让他先进屋休息。小智对物联网门锁产生了兴趣&#xff1a;什么是物联网&#xff1f;为什么这么厉害&#xff1f; 初识物联网 我们在百…

andboxie-Plus - 知名沙盒软件、支持游戏多开测试软件

我们经常会需要用到一些毒瘤软件——它们可能不是真正的恶意软件&#xff0c;但总爱偷摸干一些流氓行为。 工作中&#xff0c;有时还不得不安装使用一些来路不明、不能完全信任的可疑软件。 装上吧&#xff0c;心里膈应、难受&#xff1b;不装吧&#xff0c;有些工作又进行不…

代码随想录算法训练营第五十八天|KMC101 孤岛的总面积、KMC102 沉没孤岛、KMC103 水流问题

题1&#xff1a; 指路&#xff1a;101. 孤岛的总面积 (kamacoder.com) 思路与代码&#xff1a; 本题要求找到不靠边的陆地面积&#xff0c;那么我们从地图的最外层开始遍历&#xff0c;找到靠近四个边的陆地&#xff0c;通过搜索将周边靠陆地且相邻的陆地1变成海洋0&#xf…

【驱动篇】龙芯LS2K0300之PWM设备驱动

实验目的 利用脉冲调制效应&#xff08;PWM&#xff09;等效改变输出功率大小控制LED&#xff0c;从而实现呼吸灯效果&#xff0c;需要用到RGB LED模块 模块连接 IO 插针接口上一共集成了两路PWM&#xff0c;分别是PWM2和PWM3&#xff0c;对应GPIO88、GPIO89 PWM2和PWM3对…

期末考试结束,老师该如何私发成绩?

随着期末考试的落幕&#xff0c;校园里又恢复了往日的宁静。然而&#xff0c;对于老师们来说&#xff0c;这并不意味着工作的结束&#xff0c;相反&#xff0c;一系列繁琐的任务才刚刚开始。 成绩单的发放&#xff0c;就是其中一项让人头疼的工作。家长们焦急地等待着孩子的考试…

Python程序打包成EXE文件指南

本套课在线学习视频&#xff08;网盘地址&#xff0c;保存到网盘即可免费观看&#xff09;&#xff1a; ​​https://pan.quark.cn/s/57ba5f313c5b​​ 将Python程序打包成可执行文件&#xff08;EXE&#xff09;可以方便用户在没有Python环境的计算机上运行程序。本文将详细…

【Linux】在线求助命令--help,man page , info page

我们知道Linux有很多的命令&#xff0c;那LInux要不要背命令&#xff1f; 答案是背最常用的那些就行了 那有的时候我们想查询一些命令的详细用法该怎么办呢&#xff1f; 这里我给出3种方法 1.--help --help的使用方法很简单啊 要查询的命令 --help 我们看个例子 这里我只…

C语言4 运算符

目录 1. 算术运算符 2. 关系运算符 3. 逻辑运算符 4. 位运算符 5. 赋值运算符 6. 自增和自减运算符 7. 条件运算符&#xff08;三元运算符&#xff09; 8. 逗号运算符 9. sizeof 运算符 10. 取地址和解引用运算符 11.运算符的优先级 1. 算术运算符 (加法)&#xff1…

CRT工具

CRT工具 传输位置设置 打开SFTP alt p 命令 ls&#xff1a;远程机器当前目录内容 lls&#xff1a;传输位置文件的目录内容 pwd&#xff1a;远程机器的当前位置 lpwd&#xff1a;传输位置的位置 get 文件&#xff1a;ftp传输文件 get -r 文件夹&#xff1a;ftp传输文件…

如何获取歌曲id---cloudmusic

X-Requested-With:“XMLHttpRequest”: https://blog.csdn.net/muzico425/article/details/102735413 https://www.runoob.com/xml/xml-http.html https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest 通过该案例主要还是学习一下X-Requested-With:"XMLHtt…

大华DSS user_toLoginPage.action命令执行漏洞

免责声明 本文章仅做网络安全技术研究使用&#xff01;严禁用于非法犯罪行为&#xff0c;请严格遵守国家法律法规&#xff1b;请勿利用文章内的相关技术从事非法测试&#xff0c;如因此产生的一切不良后果与文章作者无关。使用本文所提供的信息或工具即视为同意本免责声明&…

go语言day11 错误 defer(),panic(),recover()

错误&#xff1a; 创建错误 1&#xff09;fmt包下提供的方法 fmt.Errorf(" 格式化字符串信息 " &#xff0c; 空接口类型对象 ) 2&#xff09;errors包下提供的方法 errors.New(" 字符串信息 ") 创建自定义错误 需要实现error接口&#xff0c;而error接口…

JavaSe系列二十七: Java正则表达式

正则表达式 为什么要学习正则表达式再提几个问题解决之道-正则表达式正则表达式基本介绍介绍 正则表达式底层实现实例分析 正则表达式语法基本介绍元字符-转义号 \\\\元字符-字符匹配符元字符-选择匹配符元字符-限定符元字符-定位符分组非贪婪匹配 应用实例对字符串进行如下验证…

学习笔记——动态路由——OSPF聚合(汇总)

十一、OSPF聚合(汇总) 1、路由聚合(汇总) 路由汇总是一种重要的思想&#xff0c;在大型的项目中是必须考虑的一个重点事项。随着网络的规模越来越大&#xff0c;网络中的设备所需维护的路由表项也就会越来越多&#xff0c;路由表的规模也就会逐渐变大&#xff0c;而路由表是需…

React中的useMemo和memo

引言 React是一个声明式的JavaScript库&#xff0c;用于构建用户界面。在开发过程中&#xff0c;性能优化是一个重要的方面。useMemo和memo是React提供的工具&#xff0c;用于帮助开发者避免不必要的渲染和计算&#xff0c;从而提升应用性能。 问题背景 在React应用中&#…

实现antd designable平台的组件拖拽功能

平台&#xff1a;designable设计器 github&#xff1a;designable 目录 1 背景2 技术栈3 组件拖拽和放置3.1 类型定义3.2 拖拽3.3 放置 1 背景 由于业务需求&#xff0c;我们需要实现designable平台的一个简易版的组件拖拽功能。 #mermaid-svg-QrxSDGe9YyGG3LbQ {font-family:…