当前位置: 首页 > news >正文

React中Redux的基本用法

Redux是React中使用较多的状态管理库,这篇文章主要介绍了Redux的基本用法,快来看看吧
首先我们需要新建一个React项目,我使用的React+TS,文件结构如下
在这里插入图片描述
Redux的相关使用主要在store文件中

  1. Store:存储整个应用的状态
  2. Action:一个描述发生了什么的JS对象
  3. Reducer:一个纯函数,根据传入的action更新相关的状态
  4. Dispatch:发送action到reducer的方法
  5. Selector:从Store中获取函数的函数

接下来,需要安装相关的包

npm install redux react-redux

之后,我们在相关文件中写相关的规范

  1. types.ts
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
  1. action.ts
import { INCREMENT, DECREMENT } from './types';export const increment = () => ({type: INCREMENT,
});export const decrement = () => ({type: DECREMENT,
});
  1. reducers.ts
import { INCREMENT, DECREMENT } from './types';const initialState = {count: 0,
};const counterReducer = (state = initialState, action) => {switch (action.type) {case INCREMENT:return { ...state, count: state.count + 1 };case DECREMENT:return { ...state, count: state.count - 1 };default:return state;}
};export default counterReducer;
  1. index.js
import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import counterReducer from './reducers';const store = createStore(counterReducer, composeWithDevTools());export default store;

之后,我们需要将store提供给React应用来使用,在main.tsx中,进行如下修改

// import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import store from './store/index.ts'
import { Provider } from 'react-redux'createRoot(document.getElementById('root')!).render(// <StrictMode><Provider store={store}><App /></Provider>// </StrictMode>,
)

这样做的目的是,将 Redux Store 注入到整个 React 应用中,这样子组件都可以通过 useSelector 和 useDispatch 访问 Store

接下来,就是在组件中进行使用了,在我们的App.tsx文件中,将相关的方法进行引用

import './App.css'
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './store/action';function App() {// 使用 useSelector 从 Redux Store 获取数据const count = useSelector((state) => state.count);// 使用 useDispatch 发送 actionconst dispatch = useDispatch();return (<><div><h2>Count: {count}</h2><button onClick={() => dispatch(increment())}>Increment</button><button onClick={() => dispatch(decrement())}>Decrement</button></div></>)
}export default App

useSelector() 可以从 Store 中选择数据,然后调用useDispatch() 返回 dispatch 方法,可以触发相关的action,这样就可以成功使用Redux了

但是,在实际开发中,我们大多数情况下都是会处理异步的情况,那么在Redux中如何使用异步呢?由于Redux本身只支持同步数据流,如果处理异步操作,我们需要使用React Thunk中间件
首先需要在store文件夹下边index.ts文件中进行如下修改

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import counterReducer from './reducers';const store = createStore(counterReducer,composeWithDevTools(applyMiddleware(thunk))
);export default store;

接下来就可以在action.ts文件中封装相关的异步操作,案例如下

export const fetchData = () => {return async (dispatch) => {try {const response = await fetch('www.baidu.com');const res = await response.json();dispatch({ type: 'FETCH_SUCCESS', payload: data });} catch (error) {dispatch({ type: 'FETCH_ERROR', payload: error });}};
};

最后在reducers.ts中进行数据返回即可

const initialState = {count: 0,data: null,error: null,
};const counterReducer = (state = initialState, action) => {switch (action.type) {case 'FETCH_SUCCESS':return { ...state, data: action.payload };case 'FETCH_ERROR':return { ...state, error: action.payload };default:return state;}
};export default counterReducer;

以上便是Redux的基本操作,希望可以帮助到你

相关文章:

React中Redux的基本用法

Redux是React中使用较多的状态管理库&#xff0c;这篇文章主要介绍了Redux的基本用法&#xff0c;快来看看吧 首先我们需要新建一个React项目&#xff0c;我使用的ReactTS&#xff0c;文件结构如下 Redux的相关使用主要在store文件中 Store&#xff1a;存储整个应用的状态Act…...

unity3d————基础篇小项目(设置界面)

代码示例&#xff1a; 设置界面 using System.Collections; using System.Collections.Generic; using UnityEngine;public class SettingPanel : BasePanel<SettingPanel> {public UIButton btnClose;public UISlider sliderMusic;public UISlider sliderSound;public…...

推荐几个 VSCode 流程图工具

Visual Studio Code&#xff08;简称VSCode&#xff09;是一个由微软开发的免费、开源的代码编辑器。 VSCode 发布于 2015 年&#xff0c;而且很快就成为开发者社区中广受欢迎的开发工具。 VSCode 可用于 Windows、macOS 和 Linux 等操作系统。 VSCode 拥有一个庞大的扩展市…...

用java和redis实现考试成绩排行榜

一、引言 在各类考试场景中&#xff0c;无论是学校里的学业测试&#xff0c;还是线上培训课程的考核&#xff0c;亦或是各类竞赛的选拔&#xff0c;成绩排行榜都是大家颇为关注的一个元素。它不仅能直观地展示考生之间的成绩差异&#xff0c;激发大家的竞争意识&#xff0c;还能…...

hhdb数据库介绍(9-24)

计算节点参数说明 failoverAutoresetslave 参数说明&#xff1a; PropertyValue参数值failoverAutoresetslave是否可见是参数说明故障切换时&#xff0c;是否自动重置主从复制关系默认值falseReload是否生效否 参数设置&#xff1a; <property name"failoverAutor…...

HDMI数据传输三种使用场景

视频和音频的传输 在HDMI传输音频中有3种方式进行传输&#xff0c;第一种将音频和视频信号被嵌入到同一数据流中&#xff0c;通过一个TMDS&#xff08;Transition Minimized Differential Signaling&#xff09;通道传输。第二种ARC。第三张种eARC。这三种音频的传输在HDMI线中…...

unigui 登陆界面

新建项目&#xff0c;因为我的Main页面做了其他的东西&#xff0c;所以我在这里新建一个form File -> New -> From(Unigui) -> 登录窗体 添加组件&#xff1a;FDConnection&#xff0c;FDQuery&#xff0c;DataSource&#xff0c;Unipanel和几个uniedit&#xff0c;…...

无人机 PX4飞控 | CUAV 7-Nano 飞行控制器介绍与使用

无人机 PX4飞控 | CUAV 7-Nano 飞行控制器介绍与使用 7-Nano简介硬件参数接口定义模块连接供电部分遥控器电机 固件安装 7-Nano简介 7-Nano是一款针对小型化无人系统设备研发的微型自动驾驶仪。它由雷迅创新自主研发和生产&#xff0c;其创新性的采用叠层设计&#xff0c;在极…...

安装spark

spark依赖java和scale。所以先安装java&#xff0c;再安装scale&#xff0c;再是spark。 总体教程跟着这个链接 我跟着这个教程走安装java链接&#xff0c;但是有一些不同&#xff0c;原教程有一些错误&#xff0c;在环境变量设置的地方。 java 首先下载jdk。 先看自己的环境…...

佛山三水戴尔R740服务器黄灯故障处理

1&#xff1a;佛山三水某某大型商场用户反馈一台DELL PowerEdge R740服务器近期出现了黄灯警告故障&#xff0c;需要冠峰工程师协助检查故障灯原因。 2&#xff1a;工程师协助该用户通过笔记本网线直连到服务器尾部的IDRAC管理端口&#xff0c;默认ip 192.168.0.120 密码一般在…...

大学课程项目中的记忆深刻 Bug —— 一次意外的数组越界

开头 在编程的世界里&#xff0c;每一行代码都像是一个小小的宇宙&#xff0c;承载着开发者的心血与智慧。然而&#xff0c;即便是最精心编写的代码&#xff0c;也难免会遇到那些突如其来的 bug&#xff0c;它们就像是潜伏在暗处的小怪兽&#xff0c;时不时跳出来捣乱。 在我…...

html数据类型

数据类型是字面含义&#xff0c;表示各种数据的类型。在任何语言中都存在数据类型&#xff0c;因为数据是各式各样。 1.数值类型 number let a 1; let num 1.1; // 整数小数都是数字值 ​ // 数字肯定有个范围 正无穷大和负无穷大 // Infinity 正无穷大 // -Infinity 负…...

Kotlin Multiplatform 未来将采用基于 JetBrains Fleet 定制的独立 IDE

近期 Jetbrains 可以说是动作不断&#xff0c;我们刚介绍了 IntelliJ IDEA 2024.3 K2 模式发布了稳定版支持 &#xff0c;而在官方最近刚调整过的 Kotlin Multiplatform Roadmap 优先关键事项里&#xff0c;可以看到其中就包含了「独立的 Kotlin Multiplatform IDE&#xff0c;…...

Redis中常见的数据类型及其应用场景

五种常见数据类型 Redis中的数据类型指的是 value存储的数据类型&#xff0c;key都是以String类型存储的&#xff0c;value根据场景需要&#xff0c;可以以String、List等类型进行存储。 各数据类型介绍&#xff1a; Redis数据类型对应的底层数据结构 String 类型的应用场景 常…...

代理IP在后端开发中的应用与后端工程师的角色

目录 引言 代理IP的基本概念和工作原理 代理IP在后端开发中的应用 网络爬虫与数据采集 负载均衡与性能优化 安全防护与隐私保护 后端工程师在使用代理IP时面临的挑战 结论 引言 在数字化时代&#xff0c;网络技术的飞速发展极大地推动了各行各业的发展。其中&#xff…...

工作流和流程引擎有什么区别?

在企业的数字化转型中&#xff0c;如何提升效率、优化业务流程是每个管理者都在思考的问题。而在这个过程中&#xff0c;工作流&#xff08;Workflow&#xff09;和流程引擎&#xff08;Process Engine&#xff09;这两个术语频频出现&#xff0c;成为企业流程自动化和智能化的…...

【SpringBoot】27 拦截器

Gitee仓库 https://gitee.com/Lin_DH/system 介绍 拦截器&#xff1a;拦截器是 Spring 框架提供的核心功能之一&#xff0c;主要用来拦截用户请求&#xff0c;在指定方法前后&#xff0c;根据业务需要执行预先设定的代码。 拦截器允许开发人员提前预定义一些逻辑&#xff0c…...

AI对开发者的影响,以及传统软件开发 与 AI参与的软件开发区别

AI 大模型&#xff0c;尤其是像 GPT-4、BERT 这样的语言模型&#xff0c;正以深远的影响改变着软件开发流程。传统的软件开发流程通常依赖开发人员进行代码编写、测试、调试等工作&#xff0c;但随着 AI 技术的进步&#xff0c;AI 可以承担越来越多的任务&#xff0c;自动化和优…...

HBase Java基础操作

Apache HBase 是一个开源的、分布式的、可扩展的大数据存储系统&#xff0c;它基于 Google 的 Bigtable 模型。使用 Java 操作 HBase 通常需要借助 HBase 提供的 Java API。以下是一个基本的示例&#xff0c;展示了如何在 Java 中连接到 HBase 并执行一些基本的操作&#xff0c…...

关于一次开源java spring快速开发平台项目RuoYi部署的记录

关于一次开源java spring快速开发平台项目RuoYi部署的记录 本次因为需要一些练习环境&#xff0c;想要快速搭建一个javaweb 项目作为练习环境&#xff0c;经过查询和实验找到一个文档详细&#xff0c;搭建简单&#xff0c;架构也相对比较新的开源项目RuoYi。 项目介绍&#xf…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

【Veristand】Veristand环境安装教程-Linux RT / Windows

首先声明&#xff0c;此教程是针对Simulink编译模型并导入Veristand中编写的&#xff0c;同时需要注意的是老用户编译可能用的是Veristand Model Framework&#xff0c;那个是历史版本&#xff0c;且NI不会再维护&#xff0c;新版本编译支持为VeriStand Model Generation Suppo…...

全面解析数据库:从基础概念到前沿应用​

在数字化时代&#xff0c;数据已成为企业和社会发展的核心资产&#xff0c;而数据库作为存储、管理和处理数据的关键工具&#xff0c;在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理&#xff0c;到社交网络的用户数据存储&#xff0c;再到金融行业的交易记录处理&a…...

2025年- H71-Lc179--39.组合总和(回溯,组合)--Java版

1.题目描述 2.思路 当前的元素可以重复使用。 &#xff08;1&#xff09;确定回溯算法函数的参数和返回值&#xff08;一般是void类型&#xff09; &#xff08;2&#xff09;因为是用递归实现的&#xff0c;所以我们要确定终止条件 &#xff08;3&#xff09;单层搜索逻辑 二…...

echarts使用graphic强行给图增加一个边框(边框根据自己的图形大小设置)- 适用于无法使用dom的样式

pdf-lib https://blog.csdn.net/Shi_haoliu/article/details/148157624?spm1001.2014.3001.5501 为了完成在pdf中导出echarts图&#xff0c;如果边框加在dom上面&#xff0c;pdf-lib导出svg的时候并不会导出边框&#xff0c;所以只能在echarts图上面加边框 grid的边框是在图里…...