解决谷歌Redux DevTools调试React+Typescript项目数据对不上/连接不上问题

news2024/12/23 14:27:18

上文 React+Typescript项目环境中搭建并使用redux环境 我们创建了一个redux项目的环境
但是我们用谷歌浏览器插件调试
会发现 要不 匹配的数据有问题 看不到数据 要不 就压根连接不到
而且 我们点击加减号 去改变值 调试工具也没有任何反应
在这里插入图片描述
我们终端输入

npm install --save-dev redux-devtools-extension @types/redux-devtools-extension

引入一下依赖
在这里插入图片描述
然偶 我们在 store 下的 index.tsx 引入 redux-devtools-extension下的 composeWithDevTools 函数

然后当做enthusiasm 的第二个参数

import { createStore, Reducer } from 'redux';
import { enthusiasm } from '../reducer/index';
import { EnthusiasmAction } from '../actions/index';
import { IStoreState } from '../types/index';
import { composeWithDevTools } from "redux-devtools-extension"

const initialState: IStoreState = {
  enthusiasmLevel: 1,
  languageName: 'TypeScript'
};

const store = createStore<IStoreState, EnthusiasmAction, {}, {}>(enthusiasm as Reducer<IStoreState, EnthusiasmAction>, initialState,composeWithDevTools());

export default store;

也有些版本是这样写的
在这里插入图片描述
然后我们再次启动项目 打开调试工具
就能看到我们实际设置的数据了
在这里插入图片描述
然后 我们再点击 加减号 去操作数值
这样 我们调试器就会弹出新的改动了
在这里插入图片描述

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

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

相关文章

VSCode安装离线插件

1. 打开 VSCode 插件市场网址 Extensions for the Visual Studio family of product&#xff0c;输入你想要的插件名称&#xff0c;比如这里我想要安装的是 Markdown All in One 插件 2. 点击进入插件主页&#xff0c;点击右侧的 Download Extension 链接&#xff0c;得到下载…

Hugging News #0925: 一览近期的新功能发布

每一周&#xff0c;我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新&#xff0c;包括我们的产品和平台更新、社区活动、学习资源和内容更新、开源库和模型更新等&#xff0c;我们将其称之为「Hugging News」。本期 Hugging News 有哪些有趣的消息&#xff0…

通讯网关软件013——利用CommGate X2ORACLE实现Modbus RTU数据转储ORACLE

本文介绍利用CommGate X2ORACLE实现从Modbus RTU设备读取数据并转储至ORACLE数据库。CommGate X2ORACLE是宁波科安网信开发的网关软件&#xff0c;软件可以登录到网信智汇(wangxinzhihui.com)下载。 【案例】如下图所示&#xff0c;实现从Modbus RTU设备读取数据并转储至ORACL…

【漏洞复现】某友GRP-U8 SQL注入

漏洞描述 某友GRP-U8是某友软件推出的企业级管理软件套件,旨在助力企业实现全面数字化管理及业务优化,某友GRP-U8的bx_historyDataCheck.jsp接口对用户传入的参数未进行有效的过滤,直接拼接至SQL查询的语句中,导致SQL注入漏洞,攻击者可利用该漏洞获取数据库的敏感信息 …

springboot实战(八)之整合redis

目录 序言&#xff1a; 环境&#xff1a; 依赖&#xff1a; 配置&#xff1a; 测试&#xff1a; redis序列化配置&#xff1a; 连接池&#xff1a; 序言&#xff1a; Redis是我们Java开发中&#xff0c;使用频次非常高的一个nosql数据库&#xff0c;数据以key-value键…

Linux下使用yum安装的东西都去哪儿了?(新手友好)

常见的安装路径 使用yum安装的软件包通常都会遵循相似的目录结构 安装路径含义/etc配置文件/var/log日志文件/usr/sbin可执行文件(包括服务管理工具) 面对不同的软件如何看安装位置 上面给出的是一些软件包安装几乎必备的几个安装路径&#xff0c;具体用yum去安装不同的软件…

element-ui form表单,内嵌表单数据校验

在最近开发的功能的过程中,遇到一个很复杂的表单;外层一个大表单;里面有一项是动态添加的,而且内嵌一个表单。每一项还有校验规则;如下图 记录一下调试结果。 无论多少层form, 注意几个事项; form的model/ref; form_item的prop这个关系到,校验作用具体那个框框 数据…

【LeetCode热题100】--48.旋转图像

48.旋转图像 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在原地旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要使用另一个矩阵来旋转图像。 使用辅助数组 class Solution {public void rotate(int[][] matrix)…

2023-9-26 JZ 复杂链表的复制

题目链接&#xff1a;复杂链表的复制 import java.util.*; /* public class RandomListNode {int label;RandomListNode next null;RandomListNode random null;RandomListNode(int label) {this.label label;} } */ public class Solution {public RandomListNode Clone(Ra…

跨域问题的原理及解决方法

一.同源策略 如果没有进行特殊处理&#xff0c;我们在进行前后端联调的时候游览器会发生报错&#xff1a; 这是因为请求被同源策略被阻止&#xff0c;浏览器出于安全的考虑&#xff0c;使用XMLHttpRequest对象发起HTTP请求&#xff08;异步请求&#xff09;时必须遵守同源策略…

数据库基础知识以及MySQL简介

关于MySQL的读法 MySQL如何发音&#xff1f;在国内MySQL发音有很多种&#xff0c;Oracle官方文档说他们念作 My sequal[si:kwəl]。 数据库基本概念 数据 数据&#xff08;Data&#xff09;是指对客观事物进行描述并可以鉴别的符号&#xff0c;这些符号是可识别的、抽象的。它…

W5100S_EVB_PICO快速入门之MQTT篇(十二)

目录 1. 前言 2. MQTT介绍 2.1 什么是mqtt&#xff1f; 2.2 特点 2.3 应用场景 2.4 MQTT协议实现方式 3. 硬件及接线方式 3.1 硬件准备 3.2 硬件介绍 3.3 接线图 4. 测试 4.1 MQTT测试流程图 4.2 相关代码 4.3 测试现象 5. 相关链接&#xff1a; 1. 前言 随着物…

C++,名称空间、运算符重载、模板/泛型

目录 一、名称空间 二、重载运算符 三、模板/泛型 一、名称空间 C中名称空间可以区别同名C风格函数、同名C风格全局变量、同名类。名称空间还可以无限嵌套。 namespace ns1 { ..... namespace ns2 { ..... } } 同一个名称空间名字可以多处书写,比如&#xff0c;在demo1.h中…

腾讯云最新优惠活动有哪些?活动入口在哪里?

腾讯云作为国内知名的云计算服务提供商&#xff0c;为了吸引用户&#xff0c;经常推出各种优惠活动。以下是近期腾讯云的一些优惠活动及其入口&#xff1a; 一、腾讯云新用户优惠券【点此领取】 腾讯云新用户专属大礼包&#xff0c;无门槛领取总价值高达2860元代金券&#xff…

postmain 存储接口返回值

1、postmain 存储接口返回值 //把json字符串转化为对象 var dataJSON.parse(responseBody);//获取data对象的utoken值。 var tokendata.data;//设置成全局变量 pm.globals.set("webToken", token); 2、固定参数设置

RocketMQ —消息存储和清理机制

本文为您介绍 Apache RocketMQ 中消息的存储机制&#xff0c;包括消息的存储粒度、判断依据及后续处理策略等。 背景信息​ 参考 Apache RocketMQ 中队列的定义&#xff0c;消息按照达到服务器的先后顺序被存储到队列中&#xff0c;理论上每个队列都支持无限存储。 但是在实…

87、Redis 的 value 所支持的数据类型(String、List、Set、Zset、Hash)---->List相关命令

本次讲解要点&#xff1a; List相关命令&#xff1a;是指value中的数据类型 启动redis服务器&#xff1a; 打开小黑窗&#xff1a; C:\Users\JH>e: E:>cd E:\install\Redis6.0\Redis-x64-6.0.14\bin E:\install\Redis6.0\Redis-x64-6.0.14\bin>redis-server.exe redi…

电压信号拉线位移编码器有何突出的特点

电压信号拉线位移编码器有何突出的特点 电压信号拉线位移编码器原理简单&#xff0c;外观工艺做工精细&#xff0c;由铝合金精心打造、坚固耐磨&#xff1b;适合空间较小的环境安装。该产品重复精度达到0.01%&#xff1b;工作电压上可选择5V或5-24V供电&#xff0c;保护功能上具…

博客摘录「 MPLS/LDP原理介绍+报文分析+配置示例」2023年9月26日

//首先发送UDP Hello组播包进行发现&#xff1b;随后TCP三次握手开始建立Session&#xff0c;Active端和Passive端互相初始化和Keepalive保活确认&#xff1b;完成之后可开始进行标签交互。 //首先发送UDP Hello组播包进行发现&#xff1b;随后TCP三次握手开始建立Session&…

2023-9-26 JZ23 链表中环的入口结点

题目链接&#xff1a;链表中环的入口结点 import java.util.*; /*public class ListNode {int val;ListNode next null;ListNode(int val) {this.val val;} } */ public class Solution {public ListNode EntryNodeOfLoop(ListNode head) {if(head null || head.next null …