@reduxjs/toolkit配置react-redux解决createStore或将在未来被淘汰警告

通常 我们用redux都需要通过 createStore

但目前 你去用它 基本都会被划线 甚至有点厉害的的编辑器 他会直接告诉你这个东西基本快被弃用了
在这里插入图片描述
这个应该大家都知道 最好不要用已经被明确未来或弃用的语法 因为一旦弃用这个系统就需要维护 而且说 一般会被淘汰的语法 本身也就是有一定缺陷存在的

要用我这种方式redux react-redux的依赖肯定是要有的
要不然就手动引入一下

npm i --save redux react-redux

这里 我们先终端输入

npm i --save @reduxjs/toolkit

引入一下依赖
在这里插入图片描述
然后 我们在src目录下创建一个目录 叫 redux 在这个目录下创建一个store.js
这是我个人习惯的形式
然后在redux 目录下创建一个文件夹 叫 balanceSlice
下面创建一个 index.js
参考代码如下

import {createSlice} from "@reduxjs/toolkit";const balanceSlice = createSlice({name:"balance",initialState: {cont: 1},reducers: {setCont(state,action) {state.cont = action.payload}}
})export const { setCont } = balanceSlice.actions;export default balanceSlice.reducer;

这里 我们定义了一个全局变量cont 然后 编写了修改这个全局变量的函数 setCont
接受一个参数 用于修改 cont
然后 redux目录下的store.js 更改代码如下

import { configureStore } from "@reduxjs/toolkit";
import balanceReducer from "./balanceSlice";const store = configureStore({reducer: {balance: balanceReducer}
});export default store;

引入刚才写的balanceSlice 并完成配置

然后 我们在要用全局内容的组件引入处这样写
在这里插入图片描述
用 react-redux 下的 Provider组件包裹上
然后 store来源于我们自己写的 redux/store
然后 我们在需要用的组件中这样写

import React from 'react';
import { useSelector, useDispatch } from "react-redux";
import { setCont } from "../redux/balanceSlice";export default function Balance() {const state = useSelector((state) => state.balance.cont);const dispatch = useDispatch()return (<div>测试组件{state}<button onClick={()=>{dispatch(setCont(10))}}>修改一下</button></div>);
}

首先 我们导入useSelector, useDispatch
通过useSelector获取响应式中的 cont 赋值给state
然后 setCont函数 我们还是要从redux/balanceSlice/index上去拿

这个感觉不是特别灵活智能

然后 按一下 我们传10
根据我们写的逻辑 是直接赋值给cont

我们运行代码
在这里插入图片描述
可以看到 测试组件 后面 获取 cont 值的 state 的确是1 然后 我们按一下按钮
在这里插入图片描述
也是成功的修改为了10 做了响应式变更 非常的完美

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

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

相关文章

少儿编程 2023年9月中国电子学会图形化编程等级考试Scratch编程四级真题解析(判断题)

2023年9月scratch编程等级考试四级真题 判断题(共10题,每题2分,共20分) 11、运行程序后,变量"result"的值是6 答案:对 考点分析:考查积木综合使用,重点考查自定义积木的使用 图中自定义积木实现的功能是获取两个数中最大的那个数并存放在result变量中,左…

FMC驱动LCD

硬件简介 主控&#xff1a;STM32H750 LCD屏幕为16位并口屏幕 CubeMX配置 chip select: 选择起始地址块号&#xff0c;ADDR[27:26] Memory type: 内存类型&#xff0c;选择LCD Interface LCD Register Select: 根据选择计算映射地址, FSNC_A[25] Data: 数据宽度 NOR/PSRAM ti…

分享一个抖音视频解析神器~

怎么样下载抖音视频&#xff1f;相信很多人都有过这样的困惑。作为一个资深短视频剪辑工作者&#xff0c;常常需要用到各种视频素材&#xff0c;其中不乏需要从抖音上下载的&#xff0c;因此我也尝试过许多下载工具&#xff0c;但是效果都不大满意&#xff0c;直到有一次朋友给…

el-table表格设置——动态修改表头

(1) 首先是form表单写表单设置按钮&#xff1a; &#xff08;1.1&#xff09;使用el-popover&#xff0c;你需要修改的是this.colOptions&#xff0c;colSelect: <el-popover id"popover" popper-class"planProver" placement"bottom" width&…

算法?认识一下啦

一、什么是算法&#xff1f; 算法 &#xff0c;是对特定问题求解方法和步骤的一种描述。它是有限指令的有限序列&#xff0c;其中每个指令表示一个或多个操作。 算法和程序的关系 算法​是解决问题的一种方法或一个过程&#xff0c;考虑如何将输入转换成输出&#xff0c;一个…

高防IP的原理

高防IP&#xff0c;把域名解析到高防IP上(web事务只要把域名指向高防IP 即可。非web事务&#xff0c;把事务IP换成高防IP即可)一起在高防IP上设置转发规矩;所有公网流量都会走高防IP&#xff0c;通过端口协议转发的方法将用户的拜访通过高防IP转发到源站IP&#xff0c;一起将歹…

《C/C++代码审计实践》一书出版了

我撰写了代码审计一书&#xff0c;包括了C、C、Java语言&#xff0c;加起来有600多页&#xff0c;书籍太厚&#xff0c;印刷成本比较高&#xff0c;出版社对于代码审计将来的销量也有所担心&#xff0c;他们更担心的在书中涉及到了对国家标准的解读&#xff0c;尤其是国家军用标…

XML External Entity-XXE-XML实体注入

XML 实体? XML 实体允许定义标签,在解析 XML 文档时这些标签将被内容替换。一般来说,实体分为三种类型: 内部实体 外部实体 参数实体。 必须在文档类型定义(DTD)中创建实体 一旦 XML 文档被解析器处理,它将js用定义的常量“Jo Smith”替换定义的实体。正如您所看到…

SystemC入门完整编写示例:全加器测试平台

导读: 本文将完整演示基于systemC编写一个全加器的测试平台。具体内容包括&#xff1a;激励平台&#xff0c;监控平台&#xff0c;待测单元的编写&#xff0c;波形文件读取。 1&#xff0c;main函数模块 搭建一个测试平台主要由&#xff1a;Driver, Monitor, DUT(design under …

【实验记录】为了混毕业·读读论文叭

PR曲线 1. Robust_Place_Recognition_using_an_Imaging_Lidar 在第三节方法中&#xff0c;提到了一些列处理步骤&#xff0c;分析来与vins相似&#xff0c;在vins中是关键帧检索、特征提取、DBoW查询、描述子匹配、PnP RANSAC求解。 第四节的实验部分&#xff0c;没有绘制pr…

Aop自定义注解生成日志

Aop自定义注解生成日志 1.编写自定义注解 //表示此注解可以标注在方法上 Target(ElementType.METHOD) //运行时生效 Retention(RetentionPolicy.RUNTIME) public interface OpetionLog {//定义一个变量&#xff0c;可以接收参数String value() default "";}2.Cont…

MVCC详解

什么是MVCC&#xff1f; MVCC&#xff0c;即Multi-Version Concurrency Control &#xff08;多版本并发控制&#xff09;。它是一种并发控制的方法&#xff0c;一般在数据库管理系统中&#xff0c;实现对数据库的并发访问&#xff0c;在编程语言中实现事务内存。 通俗的讲&am…

【完美世界】石昊拒绝云曦相认,爱而不得,云曦悲伤无助

Hello,小伙伴们&#xff0c;我是小郑继续为大家深度解析国漫资讯。 深度爆料《完美世界云曦篇》最新一集&#xff0c;为了云曦&#xff0c;石昊不远十万里&#xff0c;亲自送她回家&#xff0c;这份感情之真挚&#xff0c;绝对毋庸置疑。然而&#xff0c;令人感到不解的是&…

二维码智慧门牌管理系统升级:引领政务服务、寄件、开锁、刻章新潮流

文章目录 前言一、政务服务二、寄件服务三、便民开锁和刻章服务四、应用范围 前言 在科技不断进步的时代&#xff0c;二维码智慧门牌管理系统升级版正在改变我们的生活&#xff0c;为政务服务、寄件、便民开锁、刻章等多种业务应用提供全新的解决方案&#xff0c;使我们的日常…

Zotero 超好用插件的下载链接及配置方法(PDF-translate/ZotFile/茉莉花/Zotero Scihub)

目录 前言插件安装方法插件一&#xff1a;文献翻译插件&#xff08;pdf-translate&#xff09;插件二&#xff1a;文献附件管理&#xff08;ZotFile&#xff09;插件三&#xff1a;中文文献插件&#xff08;茉莉花&#xff09;插件四&#xff1a;Sci-Hub 自动下载文献&#xff…

3D模型格式转换工具HOOPS Exchange对工业级3D产品HOOPS的支持与应用

一、概述 HOOPS Exchange是一套高性能模型转换软件库&#xff0c;可以给软件提供强大的模型的导入和导出功能&#xff0c;我们可以将其单独作为转换工具使用&#xff0c;也可以将其集成到自己的软件中。 同样&#xff0c;HOOPS 的其它产品&#xff0c;也离不开HOOPS Exchange…

Docker学习——②

文章目录 1、Docker是什么1.1 Docker本质1.2 Docker的引擎迭代1.3 Docker和虚拟机的区别1.4 Docker 为什么比虚拟机资源利用率高&#xff0c;启动快&#xff1f;1.5 Docker 和 JVM 虚拟化的区别&#xff1f; 2、Docker架构3、Docker生态3.1 新时代软件诉求3.2 Docker 解决方案 …

蓝桥杯 (C++ 求和 等差数列 顺子日期 灌溉)

目录 1、求和 题目&#xff1a; 思路&#xff1a; 代码&#xff1a; 2、等差数列 题目&#xff1a; 思路&#xff1a; 代码&#xff1a; 3、顺子日期 题目&#xff1a; 思路&#xff1a; 代码&#xff1a; 4、灌溉 题目&#xff1a; 代码&#xff1a; 1、求和…

误删的文件恢复了成乱码 误删的文件恢复了成乱码怎么调整

电脑系统&#xff1a;Windows11 电脑型号&#xff1a;惠普 软件版本&#xff1a;EasyRcovery14 关于电脑&#xff0c;我们可以说是非常熟悉&#xff0c;并熟练掌握了对电脑的最基本操作&#xff0c;比如复制、粘贴、新建、删除文件。但我们真的很懂它吗&#xff1f;比如误删…

Azure 机器学习 - 设置 AutoML 训练时序预测模型

目录 一、环境准备二、训练和验证数据三、配置试验支持的模型配置设置特征化步骤自定义特征化 四、可选配置频率和目标数据聚合启用深度学习目标滚动窗口聚合短时序处理非稳定时序检测和处理 五、运行试验六、用最佳模型进行预测用滚动预测评估模型精度预测未来 七、大规模预测…