react使用npm i @reduxjs/toolkit react-redux

npm i @reduxjs/toolkit react-redux

创建一个 store文件夹,里面创建index.js文件和子模块文件夹
在这里插入图片描述
index,js文件写入以下代码

import {configureStore} from '@reduxjs/toolkit'
// 导入子模块
import counterReducer from './modules/one'
import two from './modules/two'
const store=configureStore({reducer:{counter:counterReducer,XFQ:two}
})
export default store

two文件子模块里创建模块文件,文件里写入以下代码

import { createSlice } from '@reduxjs/toolkit'
const countState = createSlice({name: 'count',// 初始化stateinitialState: {count: 0,name: '清',list: ''},// 修改数据的方法  这里面是同步的方法reducers: {// 增加inscrement(state) {state.count++},// 减少decrement(state) {state.count--},newName(state, value) {console.log('修改名称', value)state.name = value.payload},setList(state, value) {state.list = value.payload}}
})
// 解构出来 actionCreate函数
const { inscrement, decrement, newName, setList } = countState.actions
/****异步相当于  单独封装一个方法,然后这个方法调用同步里的某个函数方法注意: 异步方法要求 return 出去一个函数,而且 dispatch 是固定要写的,但是参数名自己随便定义**/
const YiBuFun = () => {// dispatch 这是个固定的形参,随便写啥,但是不能不写,可以写aa甚至bbreturn (aa) => {aa(setList('我是新数据'))}
}
// 获取 reducer
const reducer = countState.reducer
// 以按需导出的方式导出  inscrement,decrement
export { inscrement, decrement, newName,setList,YiBuFun }
// 以默认导出方式导出reducer
export default reducer

这段子模块仓库代码里面有同步方法(inscrement, decrement, newName)与异步方法(YiBuFun),

在入口文件那引入store

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'// 这里引入store文件
import store from './store/index.js'
import { Provider } from 'react-redux'// ReactDOM.createRoot(document.getElementById('root')).render(
//   <React.StrictMode>
//     <App />
//   </React.StrictMode>,
// )
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<Provider store={store}><App /></Provider>
)

至此我们依旧创建好了仓库,并且仓库也和代码绑定了,接下来是使用仓库里的代码了

import { useState } from 'react'
import './index.css'
import { useSelector, useDispatch } from 'react-redux'
// 这是仓库里面以按需导出的几个方法,在仓库里可以看到
import { inscrement, decrement, newName,setList,YiBuFun } from '../../store/modules/two'function App() {/**** count  子模块里的数据名称* name子模块里的数据名称* list 子模块里的数据名称* * counter  store/index 里的子模块的名称* * */const { count, name,list } = useSelector(state => state.XFQ)const dispath = useDispatch()return (<div className='div1'><div onClick={() => dispath(newName('传去的值'))}>{name}</div><div><button onClick={() => dispath(decrement())}>减少</button>{count}<button onClick={() => dispath(inscrement())}>增加</button></div><div><div>list的参数值:{list}</div><div><div onClick={()=>dispath(setList('我是新数据'))}>异步方法修改成:我是新数据</div><div onClick={()=>dispath(setList('我是同步'))}>同步方法修改成:我是同步</div></div></div></div>)
}export default App

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

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

相关文章

鸿蒙TypeScript学习第14天:【联合类型】

1、TypeScript 联合类型 联合类型&#xff08;Union Types&#xff09;可以通过管道(|)将变量设置多种类型&#xff0c;赋值时可以根据设置的类型来赋值。 注意&#xff1a;只能赋值指定的类型&#xff0c;如果赋值其它类型就会报错。 创建联合类型的语法格式如下&#xff1…

【项目精讲】Spring框架中如何使用Redis+代码实现(2)利用Spring Cache框架

Spring Cache框架 Spring Cache 是一个框架&#xff0c;实现了基于注解的缓存功能&#xff0c;只需要简单地加一个注解&#xff0c;就能实现缓存功能。 Spring Cache 提供了一层抽象&#xff0c;底层可以切换不同的缓存实现&#xff0c;例如&#xff1a; EHCacheCaffeineRedi…

RTSP/Onvif安防视频EasyNVR平台 vs.多协议接入视频汇聚EasyCVR平台:设备分组的区别

EasyNVR安防视频云平台是旭帆科技TSINGSEE青犀旗下支持RTSP/Onvif协议接入的安防监控流媒体视频云平台。平台具备视频实时监控直播、云端录像、云存储、录像检索与回看、告警等视频能力&#xff0c;能对接入的视频流进行处理与多端分发&#xff0c;包括RTSP、RTMP、HTTP-FLV、W…

大厂Java笔试题之判断字母大小写

/*** 题目&#xff1a;如果一个由字母组成的字符串&#xff0c;首字母是大写&#xff0c;那么就统计该字符串中大写字母的数量&#xff0c;并输出该字符串中所有的大写字母。否则&#xff0c;就输出* 该字符串不是首字母大写*/ public class Demo2 {public static void main(St…

Redis的双写一致性问题

双写一致性问题 1.先删除缓存或者先删除数据库都可能出现脏数据。 2.删除两次缓存&#xff0c;可以在一定程度上降低脏数据的出现。 3.延时是因为数据库一般采用主从分离&#xff0c;读写分离。延迟一会是让主节点把数据同步到从节点。 1.读写锁保证数据的强一致性 因为一般放…

在视频号开店,新手一定要注意了,这几个细节很多人都不知道

大家好&#xff0c;我是电商笨笨熊 视频号小店作为今年黑马项目&#xff0c;自是吸引力不少的电商玩家&#xff1b; 但是在这些玩家中不免有一些新手玩家&#xff0c;从未做过电商&#xff0c;或者做过其他平台的电商但是没有接触过视频号&#xff1b; 而视频号小店在某些地…

最佳调度问题(c++题解)

题目描述 假设有n个任务由k个可并行工作的机器完成。完成任务i需要的时间为ti。试设计一个算法找出完成这 n个任务的最佳调度&#xff0c;使得完成全部任务的时间最早。 对任意给定的整数n和k&#xff0c;以及完成任务i需要的时间为ti&#xff0c;i1~n。编程计算完成这n个任务…

thinkphp6入门(23)-- 如何导入excel

1. 安装phpexcel composer require phpoffice/phpexcel composer update 2. 前端 <form class"forms-sample" action"../../xxxx/xxxx/do_import_users" method"post" enctype"multipart/form-data"><div class"cont…

【InternLM 实战营第二期-笔记4】XTuner 微调个人小助手认知

书生浦语是上海人工智能实验室和商汤科技联合研发的一款大模型,很高兴能参与本次第二期训练营&#xff0c;我也将会通过笔记博客的方式记录学习的过程与遇到的问题&#xff0c;并为代码添加注释&#xff0c;希望可以帮助到你们。 记得点赞哟(๑ゝω╹๑) XTuner 微调个人小助手…

基于 FPGA 的 DE1-SoC 功率估算器

Introduction 功耗是当今许多技术都要考虑的重要因素。例如&#xff0c;手机生产商总是谈论他们在电源管理方面的改进&#xff0c;以及如何延长电池的使用寿命。功能与功耗之间的平衡是许多人都在研究的有趣课题。然而&#xff0c;当我们做实验时&#xff0c;我们很少会考虑我…

快速掌握定时任务处理

定时任务 在项目中存在一种操作&#xff0c;这个操作需要在未来的某一天开始执行&#xff0c;不需要人定时到时候再去写&#xff0c;而是提前写好定时进行执行 在java项目中提供有对应的API&#xff0c;下面就是java中原始的操作 public class shijian {public static void mai…

ytorch深度学习完整GPU图像分类代码

1. CPU与GPU不同 1.输入数据 2.网络模型 3.损失函数 .cuda() 说明&#xff1a;下面代码中GPU版本中取消下划线的即为CPU版本 2.完成的分类代码(GPU) import torch import torchvision from torch.utils.tensorboard import SummaryWriter# from model import * # 准备数据集 …

SpringBoot3整合Mybatis plus

Java版本&#xff1a;17 Spring Boot版本&#xff1a;3.1.10 Mybatis plus版本&#xff1a;3.5.5 源码地址&#xff1a;Gitee仓库 01 创建我们的项目工程 首先&#xff0c;我们创建一个maven工程spring-boot3-demo&#xff0c;pom文件配置如下。 这里我们将spring-boot-start…

【python】基于librosa库提取音频特征

一、源码 import librosa audio_path ./audio.mp3 audio, sr librosa.load(audio_path) # 提取音频信号的时域特征 amplitude librosa.amplitude_to_db(librosa.stft(audio), refnp.max) # 提取音频信号的频域特征 mfccs librosa.feature.mfcc(audio, srsr) # 提取音频信号…

视频号小店好做吗?普通人没有货源,也可以做吗?

大家好&#xff0c;我是电商糖果 视频号小店作为2022年才出来的电商黑马项目&#xff0c;吸引了不少正在找创业项目的朋友。 这里面也有很多没有接触过电商&#xff0c;没有货源的普通人。 于是不少朋友就问糖果&#xff0c;如果普通人没有货源可以做吗&#xff1f;小店好做…

JCYZ H3CNE-RS+

JCYZ H3CNE-RS 20240413 20240413 https://www.h3c.com/cn/ 支持–软件下载–其他产品–模拟器官方下载 人才研学中心—技术认证—电子资料 按范围划分&#xff1a;局域网 城域网 广域网 按拓扑结构划分&#xff1a;总线型 环型 星型 树型 全网状 部分网状&#xff08;优缺点&a…

简单好用的SaaS知识库工具都在这了,看完赶紧收藏!

在信息飞速发展的今天&#xff0c;企业如何有效地管理海量的信息和知识成为了提高工作效率的关键。SaaS知识库工具正成为企业寻求的解决方案&#xff0c;它们不仅能够帮助团队组织文档&#xff0c;而且优化知识分享流程。现在就让我们来看看市场上几款简单又好用的SaaS知识库工…

佛山分公司迎来重要指导蒋书记一行及杭州区域分公司领导共襄盛举

近日&#xff0c;佛山分公司迎来了一场重要的指导活动。蒋书记携夫人&#xff0c;以及助理黄显文和公司工作人员施晓燕等一行领导莅临佛山分公司&#xff0c;为公司的未来发展提供了宝贵的指导意见。同时&#xff0c;江浙福地区的杭州区域分公司负责人白棋元总和朱建江总也亲临…

宝藏免费音乐软件LX music

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 宝藏免费音乐软件LX music 前言LX Music的特色功能&#xff1a;音乐播放的新境界安装与配置&#xff1a;在不同平台上使用LX Music下载页面 主题定制 本文将深入研究LX Music&#xff0c;一款备受欢迎…

socat神器解密:网络数据传输的利器

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 socat神器解密&#xff1a;网络数据传输的利器 前言socat简介基本用法常见功能常见功能&#xff1a;1. 端口转发和数据重定向&#xff1a;2. 加密和解密数据流&#xff1a; 高级功能1. 代理服务器和隧…