当前位置: 首页 > 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…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...