Redux在React中的使用
Redux在React中的使用
1.构建方式
采用reduxjs/toolkit+react-redux的方式
安装方式
npm install @reduxjs/toolkit react-redux
2.使用
①创建目录

创建store文件夹,然后创建index和对应的模块,如上图所示
②编写counterStore.js
文章以counterStore命名,名字可自行取
import {createSlice} from '@reduxjs/toolkit'
const counterStore=createSlice({name:'counter',//初始化状态数据initialState:{count:0},reducers:{increment(state){state.count++},decrement(state){state.count--}}
})
//解构出创建action对象的函数
const {increment,decrement}=counterStore.actions
//获取reducer函数
const counterReducer=counterStore.reducer
export {increment,decrement}
export default counterReducer
③编写index.js
import {configureStore} from "@reduxjs/toolkit"
import counterReducer from "./modules/counterStore";//创建根store组合子模块
const store=configureStore({reducer:{counter:counterReducer}
})
export default store
④在根组件中导入
使用react-redux中Provider进行导入
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import store from "./store";
import {Provider} from "react-redux";const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Provider store={store}><App /></Provider>
);
⑤在组件中使用
使用useSelector获取store中的数据
const ComponentDemo=()=>{const {count}=useSelector(state => state.counter)return(<div>{count}</div>)
}export default ComponentDemo
使用useDispatch获取dispatch方法,提交对应的方法改变state的值
const GrandSon=()=>{const dispatch=useDispatch()return(<div onClick={()=>{dispatch(decrement())}}>我是孙子组件</div>)
}
相关文章:
Redux在React中的使用
Redux在React中的使用 1.构建方式 采用reduxjs/toolkitreact-redux的方式 安装方式 npm install reduxjs/toolkit react-redux2.使用 ①创建目录 创建store文件夹,然后创建index和对应的模块,如上图所示 ②编写counterStore.js 文章以counterStore…...
Go 数字类型
一、数字类型 1、Golang 数据类型介绍 Go 语言中数据类型分为:基本数据类型和复合数据类型基本数据类型有: 整型、浮点型、布尔型、字符串复合数据类型有: 数组、切片、结构体、函数、map、通道(channel)、接口 2、…...
时间序列预测 — Informer实现多变量负荷预测(PyTorch)
目录 1 实验数据集 2 如何运行自己的数据集 3 报错分析 1 实验数据集 实验数据集采用数据集4:2016年电工数学建模竞赛负荷预测数据集(下载链接),数据集包含日期、最高温度℃ 、最低温度℃、平均温度℃ 、相对湿度(平均) 、降雨…...
2023年金融信创行业研究报告
第一章 行业概况 1.1 定义 金融信创是指在金融行业中应用的信息技术,特别是那些涉及到金融IT基础设施、基础软件、应用软件和信息安全等方面的技术和产品。这一概念源于更广泛的“信创 (信息技术应用创新)”,即通过中国国产信息技术替换海外信息技术&a…...
51单片机按键控制LED灯亮灭的N个玩法
51单片机按键控制LED灯亮灭的N个玩法 1.概述 这篇文章介绍按键的使用,以及通过控制LED灯的小实验,发现按键中存在的问题,然后思考并解决这些问题。达到熟练使用按键控制元器件。 2.搭建硬件环境 1.硬件准备 名称型号数量单片机STC12C205…...
推荐6款本周 yyds 的开源项目
🔥🔥🔥本周GitHub项目圈选: 主要包含 链接管理、视频总结、有道音色情感合成、中文文本格式校正、GPT爬虫、深度学习推理 等热点项目。 1、Dub 一个开源的链接管理工具,可自定义域名将繁杂的长链接生成短链接,便于保…...
【Git】git 更换远程仓库地址三种方法总结分享
因为公司更改了 gitlab 的网段地址,发现全部项目都需要重新更改远程仓库的地址了,所以做了个记录,说不定以后还会用到呢。 一、不删除远程仓库修改(最方便) # 查看远端地址 git remote -v # 查看远端仓库名 git rem…...
springboot 返回problem+json
spring所有配置都在WebMvcAutoConfiguration中 其中有 ProblemDetailsExceptionHandler 容器中的一个组件 -ControllerAdvice用来集中处理异常的 -点进ResponseEntityExceptionHandler 包含这些异常,如果出现以下异常,会被springboot支持以RFC 7807规…...
AI动画制作 StableDiffusion
1.brew -v 2.安装爬虫项目包所必需的python和git等系列系统支持部件 brew install cmake protobuf rust python@3.10 git wget pod --version brew link --overwrite cocoapods 3.从github网站克隆stable-diffusion-webui爬虫项目包至本地 ssh-add /Users/haijunyan/.ssh/id_r…...
【开源】基于Vue和SpringBoot的木马文件检测系统
项目编号: S 041 ,文末获取源码。 \color{red}{项目编号:S041,文末获取源码。} 项目编号:S041,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 木马分类模块2.3 木…...
5 动态规划解分割等和子串
来源:LeetCode第416题 难度:中等 描述:给你一个只包含正整数的非空数组nums,请你判断是否可以将这个数组分割成两个子集,使得两个子集的元素和相等 分析:相当于从nums数组中选取一些元素,使得他们的和为…...
file_get_contents() 函数详解与使用
概述 在PHP中,file_get_contents() 函数是一个强大的工具,它既可以用于读取本地文件的内容,也可以用于发起 HTTP 请求获取远程资源。本文将详细介绍 file_get_contents() 函数的两种主要用途,并探讨如何充分利用这个函数。 1. 文…...
某医生用 ChatGPT 在 4 个月内狂写 16 篇论文,其中 5 篇已发表,揭密ChatGPT进行论文润色与改写的秘籍
如果写过学术论文,想必会有这样的感受: 绞尽脑汁、茶饭不思、夜不能寐、废寝忘食、夜以继日,赶出一篇论文,然后还被导师点评,“写得就是一坨!” 可是,却有人4个月产出了16篇论文,成功…...
进程等待讲解
今日为大家分享有关进程等待的知识!希望读完本文,大家能有一定的收获! 正文开始! 进程等待的引进 既然我们今天要讲进程等待这个概念!那么只有我们把下面这三个方面搞明白,才能真正的了解进程等待&#x…...
MySQL Binlog深度解析:进阶应用与实战技巧【进阶应用】
🎏:你只管努力,剩下的交给时间 🏠 :小破站 MySQL Binlog深度解析:进阶应用与实战技巧 前言第一:Binlog事件详解第二:关于GTIDGTID的结构:GTID的作用:GTID的事…...
openpnp - 给底部相机加防尘罩
文章目录 openpnp - 给底部相机加防尘罩概述笔记END openpnp - 给底部相机加防尘罩 概述 设备标定完, 看着底部相机, 有点担心掉进去东西, 万一从吸嘴掉下去的料(或者清理设备台面时, 不小心掉进去东西)将顶部相机搞短路怎么办. 就想加个防尘罩, 如果有东西掉进去, 可以掉到机…...
mac mysql连接中断重新启动办法
遇到如图所示问题,可以用下面的命令重启mysql服务 sudo /usr/local/mysql/support-files/mysql.server start...
【Vue3】解决Vue打包后上传服务器 资源路径加载错误
问题: 我这里在打包Vue之后将打包后的dist 上传至服务器站点根目录内子目录 名为 "adminstore" , 但是当我通过域名打开站点后发现 资源加载路径内并没有携带 子目录 "adminstore" 文件名称 错误:http://your website domain/js/app…...
u-popup组件在UniApp中的讲解
u-popup 组件是 UniApp 中一个多功能且强大的组件,UniApp 是一个使用 Vue.js 开发跨平台应用程序的框架。u-popup 组件提供了一种在应用程序的其他内容上方显示临时或浮动内容的方式。 使用方法: 要在 UniApp 项目中使用 u-popup 组件,你需要…...
drool 7 multiThread 测试
基本信息 通过option ,使用如下代码进行设置 //线程数量10MaxThreadsOption optionMaxThreadsOption.get(10);kieBaseConf.setOption(option);kieBaseConf.setOption(MultithreadEvaluationOption.YES);并发是以CompositeDefaultAgenda/Rule为颗粒度来的࿰…...
FlowState Lab版本管理与回滚:在星图平台实现平滑升级
FlowState Lab版本管理与回滚:在星图平台实现平滑升级 1. 为什么需要版本管理 在AI模型开发过程中,版本管理就像给代码打标签一样重要。想象一下,你正在使用FlowState Lab开发一个智能客服系统,突然发现最新更新的模型开始给出奇…...
Diablo Edit2完整指南:掌握暗黑破坏神II角色存档编辑的终极工具
Diablo Edit2完整指南:掌握暗黑破坏神II角色存档编辑的终极工具 【免费下载链接】diablo_edit Diablo II Character editor. 项目地址: https://gitcode.com/gh_mirrors/di/diablo_edit Diablo Edit2是一款功能强大的暗黑破坏神II角色存档编辑器,…...
音乐自由解决方案:Listen1音乐聚合工具使用指南
音乐自由解决方案:Listen1音乐聚合工具使用指南 【免费下载链接】listen1_chrome_extension one for all free music in china (chrome extension, also works for firefox) 项目地址: https://gitcode.com/gh_mirrors/li/listen1_chrome_extension 你是否曾…...
MedGemma X-Ray使用全攻略:从部署到进阶应用的完整教程
MedGemma X-Ray使用全攻略:从部署到进阶应用的完整教程 1. 认识MedGemma X-Ray:您的智能影像助手 MedGemma X-Ray是一款基于前沿大模型技术开发的医疗影像智能分析平台。它能够快速准确地解读胸部X光片,为医学教育、科研辅助和初步阅片提供…...
IHP作业队列系统:提升后台任务处理效率的终极指南
IHP作业队列系统:提升后台任务处理效率的终极指南 【免费下载链接】ihp 🔥 The fastest way to build type safe web apps. IHP is a new batteries-included web framework optimized for longterm productivity and programmer happiness 项目地址: …...
企业级RESTful API设计终极指南:10个进阶技巧助力构建高性能接口
企业级RESTful API设计终极指南:10个进阶技巧助力构建高性能接口 【免费下载链接】restful-api-design-references RESTful API 设计参考文献列表,可帮助你更加彻底的了解REST风格的接口设计。 项目地址: https://gitcode.com/gh_mirrors/re/restful-a…...
RWKV7-1.5B-G1A模型部署与MATLAB科学计算联动方案
RWKV7-1.5B-G1A模型部署与MATLAB科学计算联动方案 1. 引言:科研工作者的新助手 科研工作中最耗时的往往不是实验本身,而是数据处理后的文字工作。想象这样一个场景:你刚完成一组复杂的MATLAB仿真实验,面对密密麻麻的数据图表&am…...
Qwen3-VL-2B场景应用:电商识图、教育答题、办公文档处理实战
Qwen3-VL-2B场景应用:电商识图、教育答题、办公文档处理实战 1. 项目概述 Qwen3-VL-2B-Instruct是一款基于视觉语言模型(Vision-Language Model)的多模态AI服务,能够同时处理图像和文本输入,实现复杂的图文交互功能。该模型针对CPU环境进行…...
提升电路设计效率:快马AI一键生成三极管偏置方案与对比报告
作为一名电子工程师,经常需要设计三极管放大电路,其中最基础也最繁琐的就是偏置电路的计算。传统方法需要手动查公式、反复验算,不仅耗时还容易出错。最近发现InsCode(快马)平台可以快速生成三极管偏置方案,体验后发现确实能大幅提…...
ThinkPad X220 安装 Arch Linux 完美指南
1 镜像准备 1.1 镜像下载 安装镜像 iso 在开源镜像站(推荐)或者 archlinux 官方下载页面 下载。 国内常用的提供 archlinux 安装镜像的开源镜像站(选一个即可): 中国科学技术大学开源镜像站清华大学开源软件镜像站…...
