react使用react-redux状态管理

1、安装

npm install react-redux

2、创建store.js

import { createStore } from 'redux';// 定义初始状态
const initialState = {counter: 888
};// 定义 reducer 函数,根据 action 类型更新状态
function reducer(state = initialState, action) {switch (action.type) {case 'INCREMENT':return {...state, counter: state.counter + 1 };case 'DECREMENT':return {...state, counter: state.counter - 1 };default:return state;}
}// 创建 store
const store = createStore(reducer);export default store;

在这里插入图片描述
3、在主文件index.tsx全局引入

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// redux全局参数
import { Provider } from 'react-redux';
import store from './store/store.js';const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement
);
root.render(<Provider store={store}><React.StrictMode><App /></React.StrictMode></Provider>
);
reportWebVitals();

在这里插入图片描述
4、使用
1、在两个tex文件引入使用查看效果
第一个tex文件

//引入
import store from '../store/store';console.log("大得333")
//获得打印
console.log(store.getState().counter)
//修改
store.getState().counter = 6666

第二个文件

import store from './store/store';
function dade(){// 获取状态console.log("大得")console.log(store.getState().counter)store.getState().counter = 999console.log(store.getState().counter)
}
dade()

效果
在这里插入图片描述

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

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

相关文章

计算机网络 | IP地址、子网掩码、网络地址、主机地址计算方式详解

关注&#xff1a;CodingTechWork 引言 在计算机网络中&#xff0c;IP地址、子网掩码和网络地址是构建网络通信的基本元素。无论是企业网络架构、互联网连接&#xff0c;还是局域网&#xff08;LAN&#xff09;配置&#xff0c;它们都起着至关重要的作用。理解它们的工作原理&a…

JAVA使用自定义注解,在项目中实现EXCEL文件的导出

首先定义一个注解 Retention(RetentionPolicy.RUNTIME) Target(ElementType.FIELD) public interface Excel {/*** 导出时在excel中排序*/int sort() default Integer.MAX_VALUE;/*** 导出到Excel中的名字.*/String name() default "";/*** 首行字段的批注*/String …

数据可视化大屏设计与实现

本文将带你一步步了解如何使用 ECharts 实现一个数据可视化大屏&#xff0c;并且如何动态加载天气数据展示。通过整合 HTML、CSS、JavaScript 以及后端接口请求&#xff0c;我们可以构建一个响应式的数据可视化页面。 1. 页面结构介绍 在此例中&#xff0c;整个页面分为几个主…

搭建Hadoop源代码阅读环境

个人博客地址:搭建Hadoop源代码阅读环境 | 一张假钞的真实世界 环境 Mac OS X EI Capitan 10.11.6java version “1.7.0_80”git version 2.7.4 (Apple Git-66)Apache Maven 3.3.9下载源代码 从Git上下载最新源代码: git clone git://git.apache.org/hadoop-common.git 构…

【2024年华为OD机试】 (B卷,100分)- 金字塔,BOSS的收入(Java JS PythonC/C++)

一、问题描述 微商模式收入计算 题目描述 微商模式中&#xff0c;下级每赚 100 元就要上交 15 元。给定每个级别的收入&#xff0c;求出金字塔尖上的人的收入。 输入描述 第一行输入 N&#xff0c;表示有 N 个代理商上下级关系。接下来输入 N 行&#xff0c;每行三个数&am…

光伏储能交直流微电网Matlab/Simulink仿真模型

博士毕业后项目和课题的交接工作也都基本上结束了&#xff0c;之前从20年我博一开始创作的博客&#xff0c;我也将从25年伊始重新进行更新&#xff0c;在保留原有内容的基础上&#xff0c;在对现如今的研究热点进行补充&#xff0c;希望能为各位校友提供一定的研究思路。首先是…

Windows中安装RabbitMQ

安装Erlang 下载地址&#xff1a;https://www.erlang.org/downloads 配置环境变量 变量名&#xff1a;ERLANG_HOME 变量值&#xff1a;D:\tools\Erlang-27.2 Path&#xff1a;%ERLANG_HOME%\bin 验证配置是否成功 erl 安装RabbitMQ 下载地址&#xff1a;https://www.rabbitm…

线性代数概述

矩阵与线性代数的关系 矩阵是线性代数的研究对象之一&#xff1a; 矩阵&#xff08;Matrix&#xff09;是一个按照长方阵列排列的复数或实数集合&#xff0c;是线性代数中的核心概念之一。矩阵的定义和性质构成了线性代数中矩阵理论的基础&#xff0c;而矩阵运算则简洁地表示和…

2024年度总结:从后端Java到全栈成长的蜕变

目录 前言1. 用数据与实践书写成长篇章2. 技术与生活的双重蜕变3. 技术的进阶与生活的绽放 前言 今年是我入行的第十年&#xff0c;也是记录在CSDN平台上的第五年。这五年来&#xff0c;我始终坚持记录成长的点滴&#xff0c;将个人事业与博客创作紧密相连。一路走来&#xff0…

关于new和delete的匹配问题

目录 引入 原理 引入 大家先看如下代码&#xff1a; class A { private:int _a 0; };int main() {A* arr1 new A[10];delete arr1;return 0; } 可以发现这里new了一个数组但却用delete释放。先看运行结果&#xff1a; 可以看到程序正常结束并没有崩 &#xff0c;别急我们…

蓝桥杯3526 子树的大小 | 数学规律

题目传送门 这个题目是一个数学题&#xff0c;比较好的方法是从上往下寻找子树的最左和最右的结点&#xff0c;每层统计子结点数&#xff0c;到树的底部时打印结果。 如何求最左、最右的子结点呢&#xff1f; 对于第i个结点,其前面有i-1个结点,每个结点各有m个孩子,再加上1号结…

计算机毕业设计Python+卷积神经网络租房推荐系统 租房大屏可视化 租房爬虫 hadoop spark 58同城租房爬虫 房源推荐系统

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

Rust实现内网穿透工具:从原理到实现

目录 1.前言2.内网穿透原理3.丐版实现3.1 share3.2 server3.3 client3.4 测试4.项目优化4.1 工作空间4.2 代码合并4.3 无锁优化4.4 数据分离4.5 错误处理4.6 测试代码4.7 参数解析本篇原文为:Rust实现内网穿透工具:从原理到实现 更多C++进阶、rust、python、逆向等等教程,可…

Mysql 主从复制原理及其工作过程,配置一主两从实验

主从原理&#xff1a;MySQL 主从同步是一种数据库复制技术&#xff0c;它通过将主服务器上的数据更改复制到一个或多个从服务器&#xff0c;实现数据的自动同步。 主从同步的核心原理是将主服务器上的二进制日志复制到从服务器&#xff0c;并在从服务器上执行这些日志中的操作…

【Vue3进阶】Pinia 中的 Store 组合式写法

Hey小伙伴们&#xff01;今天来给大家分享一个 Vue3 状态管理库 Pinia 中非常实用的功能——Store 的组合式写法。通过这种写法&#xff0c;我们可以将多个 store 进行组合和复用&#xff0c;使得代码更加模块化、清晰易读。 如果你对 Vue3 和 Pinia 感兴趣&#xff0c;或者想…

00_专栏《Redis 7.x企业级开发实战教程》介绍

大家好,我是袁庭新。Redis作为一款高性能、多用途的内存数据库,凭借其丰富的数据结构、高速读写能力、原子操作特性及发布订阅等功能,在缓存加速、分布式锁、消息队列等场景中不可或缺,极大提升了系统性能与开发效率,是现代互联网应用架构的关键组件。 你是否在学习Redis…

TensorFlow DAY3: 高阶 API(Keras,Estimator)(完)

TensorFlow 作为深度学习框架&#xff0c;当然是为了帮助我们更便捷地构建神经网络。所以&#xff0c;本次实验将会了解如何使用 TensorFlow 来构建神经网络&#xff0c;并学会 TensorFlow 构建神经网络的重要函数和方法。 知识点 Keras 顺序模型Keras 函数模型Keras 模型存储…

第14章:Python TDD应对货币类开发变化(一)

写在前面 这本书是我们老板推荐过的&#xff0c;我在《价值心法》的推荐书单里也看到了它。用了一段时间 Cursor 软件后&#xff0c;我突然思考&#xff0c;对于测试开发工程师来说&#xff0c;什么才更有价值呢&#xff1f;如何让 AI 工具更好地辅助自己写代码&#xff0c;或许…

macOS查看当前项目的 tree 结构

文章目录 使用 tree 命令 macOS 系统默认不包含 tree 命令 使用 tree 命令 使用homebrew自动安装脚本/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"安装 tree&#xff1a;brew install tree查看项目的 tree 结构&#…

Python自动化:基于faker批量生成模拟数据(以电商行业销售数据为例)

引言&#xff1a;个人认为&#xff0c;“造数据”是一个数据分析师的一项基本技能&#xff0c;当然啦&#xff0c;“造数据”不是说胡编乱造&#xff0c;而是根据自己的需求去构造一些模拟数据集&#xff0c;用于测试等用途&#xff0c;而且使用虚拟数据不用担心数据隐私和安全…