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

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文件夹&#xff0c;然后创建index和对应的模块&#xff0c;如上图所示 ②编写counterStore.js 文章以counterStore…...

Go 数字类型

一、数字类型 1、Golang 数据类型介绍 Go 语言中数据类型分为&#xff1a;基本数据类型和复合数据类型基本数据类型有&#xff1a; 整型、浮点型、布尔型、字符串复合数据类型有&#xff1a; 数组、切片、结构体、函数、map、通道&#xff08;channel&#xff09;、接口 2、…...

时间序列预测 — Informer实现多变量负荷预测(PyTorch)

目录 1 实验数据集 2 如何运行自己的数据集 3 报错分析 1 实验数据集 实验数据集采用数据集4&#xff1a;2016年电工数学建模竞赛负荷预测数据集&#xff08;下载链接&#xff09;&#xff0c;数据集包含日期、最高温度℃ 、最低温度℃、平均温度℃ 、相对湿度(平均) 、降雨…...

2023年金融信创行业研究报告

第一章 行业概况 1.1 定义 金融信创是指在金融行业中应用的信息技术&#xff0c;特别是那些涉及到金融IT基础设施、基础软件、应用软件和信息安全等方面的技术和产品。这一概念源于更广泛的“信创 (信息技术应用创新)”&#xff0c;即通过中国国产信息技术替换海外信息技术&a…...

51单片机按键控制LED灯亮灭的N个玩法

51单片机按键控制LED灯亮灭的N个玩法 1.概述 这篇文章介绍按键的使用&#xff0c;以及通过控制LED灯的小实验&#xff0c;发现按键中存在的问题&#xff0c;然后思考并解决这些问题。达到熟练使用按键控制元器件。 2.搭建硬件环境 1.硬件准备 名称型号数量单片机STC12C205…...

推荐6款本周 yyds 的开源项目

&#x1f525;&#x1f525;&#x1f525;本周GitHub项目圈选: 主要包含 链接管理、视频总结、有道音色情感合成、中文文本格式校正、GPT爬虫、深度学习推理 等热点项目。 1、Dub 一个开源的链接管理工具&#xff0c;可自定义域名将繁杂的长链接生成短链接&#xff0c;便于保…...

【Git】git 更换远程仓库地址三种方法总结分享

因为公司更改了 gitlab 的网段地址&#xff0c;发现全部项目都需要重新更改远程仓库的地址了&#xff0c;所以做了个记录&#xff0c;说不定以后还会用到呢。 一、不删除远程仓库修改&#xff08;最方便&#xff09; # 查看远端地址 git remote -v # 查看远端仓库名 git rem…...

springboot 返回problem+json

spring所有配置都在WebMvcAutoConfiguration中 其中有 ProblemDetailsExceptionHandler 容器中的一个组件 -ControllerAdvice用来集中处理异常的 -点进ResponseEntityExceptionHandler 包含这些异常&#xff0c;如果出现以下异常&#xff0c;会被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的木马文件检测系统

项目编号&#xff1a; S 041 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S041&#xff0c;文末获取源码。} 项目编号&#xff1a;S041&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 木马分类模块2.3 木…...

5 动态规划解分割等和子串

来源&#xff1a;LeetCode第416题 难度&#xff1a;中等 描述&#xff1a;给你一个只包含正整数的非空数组nums,请你判断是否可以将这个数组分割成两个子集&#xff0c;使得两个子集的元素和相等 分析&#xff1a;相当于从nums数组中选取一些元素&#xff0c;使得他们的和为…...

file_get_contents() 函数详解与使用

概述 在PHP中&#xff0c;file_get_contents() 函数是一个强大的工具&#xff0c;它既可以用于读取本地文件的内容&#xff0c;也可以用于发起 HTTP 请求获取远程资源。本文将详细介绍 file_get_contents() 函数的两种主要用途&#xff0c;并探讨如何充分利用这个函数。 1. 文…...

某医生用 ChatGPT 在 4 个月内狂写 16 篇论文,其中 5 篇已发表,揭密ChatGPT进行论文润色与改写的秘籍

如果写过学术论文&#xff0c;想必会有这样的感受&#xff1a; 绞尽脑汁、茶饭不思、夜不能寐、废寝忘食、夜以继日&#xff0c;赶出一篇论文&#xff0c;然后还被导师点评&#xff0c;“写得就是一坨&#xff01;” 可是&#xff0c;却有人4个月产出了16篇论文&#xff0c;成功…...

进程等待讲解

今日为大家分享有关进程等待的知识&#xff01;希望读完本文&#xff0c;大家能有一定的收获&#xff01; 正文开始&#xff01; 进程等待的引进 既然我们今天要讲进程等待这个概念&#xff01;那么只有我们把下面这三个方面搞明白&#xff0c;才能真正的了解进程等待&#x…...

MySQL Binlog深度解析:进阶应用与实战技巧【进阶应用】

&#x1f38f;&#xff1a;你只管努力&#xff0c;剩下的交给时间 &#x1f3e0; &#xff1a;小破站 MySQL Binlog深度解析&#xff1a;进阶应用与实战技巧 前言第一&#xff1a;Binlog事件详解第二&#xff1a;关于GTIDGTID的结构&#xff1a;GTID的作用&#xff1a;GTID的事…...

openpnp - 给底部相机加防尘罩

文章目录 openpnp - 给底部相机加防尘罩概述笔记END openpnp - 给底部相机加防尘罩 概述 设备标定完, 看着底部相机, 有点担心掉进去东西, 万一从吸嘴掉下去的料(或者清理设备台面时, 不小心掉进去东西)将顶部相机搞短路怎么办. 就想加个防尘罩, 如果有东西掉进去, 可以掉到机…...

mac mysql连接中断重新启动办法

遇到如图所示问题&#xff0c;可以用下面的命令重启mysql服务 sudo /usr/local/mysql/support-files/mysql.server start...

【Vue3】解决Vue打包后上传服务器 资源路径加载错误

问题&#xff1a; 我这里在打包Vue之后将打包后的dist 上传至服务器站点根目录内子目录 名为 "adminstore" , 但是当我通过域名打开站点后发现 资源加载路径内并没有携带 子目录 "adminstore" 文件名称 错误&#xff1a;http://your website domain/js/app…...

u-popup组件在UniApp中的讲解

u-popup 组件是 UniApp 中一个多功能且强大的组件&#xff0c;UniApp 是一个使用 Vue.js 开发跨平台应用程序的框架。u-popup 组件提供了一种在应用程序的其他内容上方显示临时或浮动内容的方式。 使用方法&#xff1a; 要在 UniApp 项目中使用 u-popup 组件&#xff0c;你需要…...

drool 7 multiThread 测试

基本信息 通过option &#xff0c;使用如下代码进行设置 //线程数量10MaxThreadsOption optionMaxThreadsOption.get(10);kieBaseConf.setOption(option);kieBaseConf.setOption(MultithreadEvaluationOption.YES);并发是以CompositeDefaultAgenda/Rule为颗粒度来的&#xff0…...

GD32450i-EVAL开发实战:TLI接口配置与双图层应用解析

1. GD32450i-EVAL开发板与TLI接口初探 第一次拿到GD32450i-EVAL开发板时&#xff0c;那块480x272的RGB屏幕立刻吸引了我的注意。作为GD32F450芯片的官方评估板&#xff0c;它内置的TLI&#xff08;TFT-LCD Interface&#xff09;接口让图形显示开发变得异常简单。TLI接口本质上…...

基于STM32的校园一卡通系统设计与实现

1. 项目概述1.1 项目开发背景作为一名嵌入式系统开发者&#xff0c;我最近完成了一个基于STM32的校园一卡通系统项目。这个项目的灵感来源于我在大学期间亲身经历的多卡困扰——每天要带着学生证、饭卡、图书证等一堆卡片&#xff0c;不仅容易丢失&#xff0c;使用起来也很不方…...

GHelper:如何用10MB工具取代臃肿的华硕控制中心?

GHelper&#xff1a;如何用10MB工具取代臃肿的华硕控制中心&#xff1f; 【免费下载链接】g-helper Lightweight, open-source control tool for ASUS laptops and ROG Ally. Manage performance modes, fans, GPU, battery, and RGB lighting across Zephyrus, Flow, TUF, Str…...

Qwen3-ASR-1.7B语音识别进阶指南:上下文联想纠错机制原理与提示词增强技巧

Qwen3-ASR-1.7B语音识别进阶指南&#xff1a;上下文联想纠错机制原理与提示词增强技巧 1. 引言&#xff1a;从“听清”到“听懂”的跨越 如果你用过一些基础的语音转文字工具&#xff0c;可能会遇到这样的困扰&#xff1a;明明每个字都识别出来了&#xff0c;但连成句子却感觉…...

告别卡顿!用AutoDL云GPU+VS Code远程开发,5分钟搞定深度学习环境搭建

告别卡顿&#xff01;用AutoDL云GPUVS Code远程开发&#xff0c;5分钟搞定深度学习环境搭建 当你在本地运行ResNet50模型时&#xff0c;风扇狂转如直升机起飞&#xff0c;而epoch进度条却像蜗牛爬行——这场景每个深度学习开发者都不陌生。传统本地开发环境面临三大困境&#x…...

OpenClaw故障诊断:Qwen3.5-9B接口超时问题排查实录

OpenClaw故障诊断&#xff1a;Qwen3.5-9B接口超时问题排查实录 1. 问题现象与初步判断 那天深夜&#xff0c;我正在调试一个自动化文档处理流程&#xff0c;OpenClaw突然开始频繁报错。控制台不断弹出"Model timeout after 30000ms"的警告&#xff0c;原本10秒内能…...

Docker-compose一键部署OnlyOffice实战指南

1. 为什么选择Docker-compose部署OnlyOffice&#xff1f; 如果你正在寻找一个开箱即用的文档协作解决方案&#xff0c;OnlyOffice绝对是当前最值得考虑的选择之一。它提供了媲美微软Office的编辑体验&#xff0c;同时支持多人实时协作、版本控制等企业级功能。而使用Docker-com…...

COMSOL超声相控阵仿真模型 模型介绍:本链接有两个模型,分别使用压力声学与固体力学对超声相...

COMSOL超声相控阵仿真模型 模型介绍&#xff1a;本链接有两个模型&#xff0c;分别使用压力声学与固体力学对超声相控阵无损检测进行仿真&#xff0c;负有模型说明。 使用者可自定义阵元数、激发频率、激发间隔等参数&#xff0c;可激发出聚焦、平面等波形&#xff0c;可以一次…...

QMK Toolbox:如何用这款开源工具轻松刷写机械键盘固件?

QMK Toolbox&#xff1a;如何用这款开源工具轻松刷写机械键盘固件&#xff1f; 【免费下载链接】qmk_toolbox A Toolbox companion for QMK Firmware 项目地址: https://gitcode.com/gh_mirrors/qm/qmk_toolbox QMK Toolbox 是一款专为机械键盘爱好者设计的开源固件刷写…...

Java 反应式编程最佳实践:构建响应式系统

Java 反应式编程最佳实践&#xff1a;构建响应式系统别叫我大神&#xff0c;叫我 Alex 就好。一、引言 大家好&#xff0c;我是 Alex。反应式编程&#xff08;Reactive Programming&#xff09;作为一种编程范式&#xff0c;已经成为构建高并发、低延迟系统的重要手段。Java 生…...