React使用Redux

news/2025/1/12 10:09:44/

Redux

Redux 是一个用于 JavaScript 应用的状态容器,Redux 的核心思想是将应用程序的所有状态存储在一个单一的、全局的 store 中,并提供了一套规则来确保状态以一种可预测的方式进行变更.

安装

npm i @reduxjs/toolkit react-redux

创建目录

创建store文件夹,在文件夹下创建index.js(注册文件)和modules以及他下面的countStore.js(状态文件)
在这里插入图片描述

编写状态管理类

// 导入createSlice函数,用于创建Redux状态管理中的slice
import {createSlice} from "@reduxjs/toolkit";// 创建一个名为"counter"的slice,用于管理计数器的状态
const countStore = createSlice({// 定义slice的名称name:"counter",// 定义初始状态,计数器的初始值为0initialState: {count:0},// 定义 reducer 函数,用于处理状态变化reducers:{// 增加计数器的值increment:(state,action)=>{// 将传入的值加到当前计数器上state.count+=action.payload},// 减少计数器的值decrement:(state)=>{// 当前计数器值减1state.count-=1}}}
)// 从生成的actions中解构出increment和decrement
const {increment,decrement} = countStore.actions
// 获取slice的reducer函数
const countReducer = countStore.reducer
// 导出increment和decrement动作,供外部调用
export {increment,decrement}
// 导出reducer函数,供Redux store使用
export default countReducer

注册store

import {configureStore} from "@reduxjs/toolkit";
import countReducer from "./modules/countStore.js";const store = configureStore({reducer:{counter:countReducer}
})export default store

使用Redux

修改main.jsx,将redux挂载到组件中

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import store from "./store/index.js";
import { Provider } from "react-redux";createRoot(document.getElementById('root')).render(<StrictMode><Provider store={store}><App /></Provider></StrictMode>
)

在组件中使用

import {useDispatch, useSelector} from "react-redux";
import {increment,decrement} from './store/modules/countStore.js'
function App() {const { count } = useSelector(state => state.counter)const dispatch = useDispatch();return (<div><div><h3>{count}</h3><button onClick={() => dispatch(increment(1))}>+</button><button onClick={() => dispatch(increment(10))}>+10</button><button onClick={() => dispatch(decrement())}>-</button></div></div>)
}export default App

http://www.ppmy.cn/news/1562466.html

相关文章

CTF随题思路—Misc[XMAN2018排位赛]通行证

打开题目是一串奇怪的base编码&#xff0c;猜测是多重解密或者加密 base64解码后得到 因为这串是flag&#xff0c;所以{}的顺序有问题&#xff0c;应使用栅栏密码&#xff0c;使用解码后发现顺序还是有问题&#xff0c;查看大佬的wp发现是W型栅栏加密&#xff0c;多次尝试后得…

C++11(2)

1.右值引用中的移动构造函数 对于右值的认识和划分,我们可以把右值分为纯右值(内置类型),将亡值(自定义类型),而对于左值和纯右值的构造,一般来说都是进行的拷贝构造. 就拿这个来说如果传的是左值,和纯右值,那么直接揍上面的那个函数进行拷贝构造,如果传的是一个将亡值,那就走…

手机租赁系统开发解决方案与市场趋势分析

内容概要 手机租赁系统开发正如一场技术与商业的双重舞会&#xff0c;双方时而相互辉映&#xff0c;时而却也是一场较量。在这片快速变幻的市场中&#xff0c;了解当前的技术实现与挑战尤为重要。例如&#xff0c;系统架构的选择、数据安全性以及用户体验设计都可能成为企业发…

Spring Boot开发——结合Redis实现接口防止重复提交

文章目录 一、准备工作1、引入依赖2、配置Redis 二、实现代码1、创建Redis服务类2、创建AOP切面类3、自定义注解4、处理异常5、使用注解 三、测试验证1、启动Redis服务2、启动Spring Boot应用3、模拟重复提交 在Web开发中&#xff0c;防止用户重复提交表单是一个常见的需求。例…

Hadoop高可用集群搭建

在三台虚拟机上搭建具有两个NameNode节点和两个ResourceManager节点的Hadoop高可用集群。步骤如下&#xff1a; 1.在3台虚拟机中的/export/servers目录中创建目录hadoop-HA&#xff0c;用于存放部署Hadoop高可用集群的Hadoop安装目录&#xff0c;命令如下&#xff1a; 2.安装H…

JavaWeb—Servlet详解

前言&#xff1a; 本章节主要学习Servlet基础知识点&#xff0c;收录于JavaWeb系列&#xff0c;该系列主要讲解Servlet、JSP、Filter过滤器、Session、分层开发概念等知识点&#xff0c;欢迎童鞋们互相交流。觉得不错可以三连订阅喔。 目标&#xff1a; 一、概念 二、入门程…

【灵码助力安全2】——利用通义灵码辅助复现未公开漏洞的实践

前言 暨上一篇【灵码助力安全1】——利用通义灵码辅助快速代码审计的最佳实践之后&#xff0c;这第二篇主要是想分享一下通义灵码在复现未公开漏洞方面的应用&#xff0c;当然&#xff0c;前提也是必须得有相应的源码。 有的时候&#xff0c;由于安全人员水平的限制和时间、…

Redis 三大问题:缓存穿透、缓存击穿、缓存雪崩

Redis 作为高性能的内存数据库&#xff0c;广泛应用于缓存场景。然而&#xff0c;在实际使用中&#xff0c;可能会遇到三大经典问题&#xff1a;缓存穿透、缓存击穿 和 缓存雪崩。这些问题如果不加以解决&#xff0c;可能会导致系统性能下降甚至崩溃。 1. 缓存穿透 问题描述 …