@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.mzph.cn/news/126955.shtml

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

相关文章

2023年免费CRM软件盘点:14款热门工具全面比较(含开源)

在初创企业或小型企业阶段&#xff0c;特别是在预算有限且客户管理需求较为基础的情境下&#xff0c;使用免费的CRM系统通常是一个理智的选择。这类系统虽然在功能上可能不如付费版本丰富&#xff0c;但基本的客户信息管理、销售跟踪和沟通记录等核心功能通常都能满足需求。 对…

Flink SQL Hive Connector使用场景

目录 1.介绍 2.使用 2.1注册HiveCatalog 2.2Hive Read 2.2.1流读关键配置 2.2.2示例

玩了一下 Jenkins,最新版本 + JDK11

背景 今年五月的时候玩了一下 Jenkins&#xff0c;最新版本 2.414.3 &#xff0c;JDK 11 。本机有两个 JDK&#xff0c;只放到 Tomcat 里面了&#xff0c;看到了一个启动页面&#xff0c;后面有其他事情就忘记了。最近又想起来&#xff0c;觉得还是应该玩一下这么有技术含量的…

对一个金融风控测额公式的理解

目录 公式&#xff1a;&#xff08;近3个月回款总额/过去3个月的FBA平均库存价值&#xff09;*最近FBA的库存价值*过去13周FBA发货比例 详细讨论一下这个&#xff1a;&#xff08;近3个月回款总额/过去3个月的FBA平均库存价值&#xff09; 既然&#xff08;近3个月回款总额/…

liunx相关指令以及操作(未完待续)

1. 安装unzip和zip apt需要超级用户权限&#xff0c;可能需要在sudo下运行如下命令 sudo apt update sudo apt install unzip zip2. 删除压缩文件 删除名为xxx的压缩文件 !rm -rf xxx.zip3. 删除文件夹及文件夹下的所有 删除名字为xxx的文件夹及其所有内容 !rm -rf xxx4.…

kafka生产者源码精华总结

kafka的源码阅读起来思路很清晰&#xff0c;命名也很规范。 KafkaProducer值得学习的地方&#xff1a; Kafka的网络部分的设计绝对是一个亮点&#xff0c;Kafka基于NIO封装了一套自己的网络架构&#xff0c;支持一个客户端与多个Broker建立连接。处理拆包和粘包的思路和代码&…

PTA 函数题(C语言)-- 阶乘计算升级版

题目title&#xff1a; 阶乘计算升级版 题目作者&#xff1a; 陈越 浙江大学 本题要求实现一个打印非负整数阶乘的函数。 函数接口定义&#xff1a; void Print_Factorial ( const int N ); 其中N是用户传入的参数&#xff0c;其值不超过1000。如果N是非负整数&#…

数据结构和算法——用C语言实现所有图状结构及相关算法

文章目录 前言图的基本概念图的存储方式邻接矩阵邻接表十字链表临界多重表 图的遍历最小生成树普里姆算法&#xff08;Prim&#xff09;克鲁斯卡尔算法&#xff08;Kruskal&#xff09; 最短路径BFS求最短路径迪杰斯特拉算法&#xff08;Dijkstra&#xff09;弗洛伊德算法&…

chorme安装esay scholar及chrome 无法从该网站添加应用、扩展程序和用户脚本解决方案

问题描述 如题&#xff0c;博主想安装easy scholar用于查询论文的分区&#xff0c;结果安装了半天一直出现chrome 无法从该网站添加应用、扩展程序和用户脚本解决方案的问题。 解决方案 先从这个网址下载&#xff1a;https://www.easyscholar.cc/download 然后对下载好的文…

MFC网络通信-Udp服务端

目录 1、UI的布局 2、代码的实现&#xff1a; &#xff08;1&#xff09;、自定义的子类CServerSocket &#xff08;2&#xff09;、重写OnReceive事件 &#xff08;3&#xff09;、在CUdpServerDlg类中处理 &#xff08;4&#xff09;、在OnInitDialog函数中 &#xff0…

计算1到100的和

一、不好的写法 public static void main(String[] args) {int sum 0;int n 100;for (int i 1; i < n; i) {sum i;}System.out.println("sum" sum);}1.定义两个整型变量&#xff1b; 2.执行100次加法运算&#xff1b; 3.打印结果到控制台&#xff1b; 二、好…

图解Kafka高性能之谜(五)

高性能的多分区、冗余副本集群架构 高性能网络模型NIO 简单架构设计&#xff1a; 详细架构设计&#xff1a; 高性能的磁盘写技术 高性能的消息查找设计 索引文件定位使用跳表的设计 偏移量定位消息时使用稀疏索引&#xff1a; 高响应的磁盘拷贝技术 kafka采用sendFile()的…

Qwt QwtPolarPlot类使用

1.概述 QwtPolarPlot是Qwt库中用于绘制极坐标图的类。它继承自QwtPolarItemDict和QFrame类&#xff0c;并且可以作为QwtPlot控件的一部分使用。 以下是类的继承关系图&#xff1a; 2.常用方法 设置标签&#xff1a; void setTitle (const QString &)void setTitle (con…

ClickHouse Java多参UDF

一、环境版本 环境版本docker clickhouse22.3.10.22 docker pull clickhouse/clickhouse-server:22.3.10.22二、XML配置 2.1 配置文件 # 创建udf配置文件 vim /etc/clickhouse-server/demo_function.xml<functions><function><type>executable</type&…

美创科技位居IDC MarketScape:中国数据安全管理平台市场「领导者」类别

近日&#xff0c;IDC发布《IDC MarketScape: 中国数据安全管理平台2023年厂商评估》 报告&#xff0c;报告从交付、产品特性、创新能力、研发速度、客户满意度等多个维度对国内厂商进行全面评估。美创科技列为『领导者』类别&#xff01; ◼︎ 报告中&#xff0c;从关键战略指…

MFC网络编程-Udp客户端

目录 1、UI的设计&#xff1a; 2、代码的实现&#xff1a; &#xff08;1&#xff09;、重写CSocket虚函数OnReceive&#xff0c;并且传入对话框的指针 &#xff08;2&#xff09;、初始化SOCKET &#xff08;3&#xff09;、绑定本地IP和端口 &#xff08;4&#xff09;、…

Vue xlsx插件前端导出

一、安装 xlsx npm install --save xlsx file-saver二、具体使用整体代码 如果数据格式是这样就用下面的&#xff0c;直接把数据传到 XLSX.utils.json_to_sheet list: [ { name: John, age: 25 }, { name: Jane, age: 30 }, // ... ]<template><button click"ex…

RCU初学参考资料

参考资料&#xff1a; 1.预备知识&#xff1a;QSBR算法 b-tree-QSBR简介 QSBR是通过quiescent state来检测grace period。如果线程T在某时刻不再持有共享对象的引用&#xff0c;那么该线程T在此时就处于quiescent state。如果一个时间区间内&#xff0c;所有线程都曾处于quie…

kubectl详解

陈述式资源管理方法&#xff1a; 1.kubernetes 集群管理集群资源的唯一入口是通过相应的方法调用 apiserver 的接口 2.kubectl 是官方的CLI命令行工具&#xff0c;用于与 apiserver 进行通信&#xff0c;将用户在命令行输入的命令&#xff0c;组织并转化为 apiserver 能识别的信…

LabVIEW开发双目立体系统猪重估算

LabVIEW开发双目立体系统猪重估算 动物的活重是各种研究中的重要参考&#xff0c;例如动物生长&#xff0c;饲料转化率&#xff0c;健康状况和疾病发生。生长中的动物的体重为保持它们处于适当的营养和环境水平提供了一个有价值的参数或指标。动物的利润通常与收入和成本之间的…