快速使用react 全局状态管理工具--redux

redux

Redux 是 JavaScript 应用中管理应用状态的工具,特别适用于复杂的、需要共享状态的中大型应用。Redux 的核心思想是将应用的所有状态存储在一个单一的、不可变的状态树(state tree)中,状态只能通过触发特定的 action 来更新。

官方文档 https://cn.redux.js.org/tutorials/typescript-quick-start

如果对react 不了解 可以看我其他文章
React 核心语法

1. 核心概念

在开始之前,先了解几个 Redux 的核心概念:

  • Store:存储应用的全局状态,应用中只能有一个 store。
  • Action:描述发生了什么事情,通常是一个包含 typepayload 的对象。 修改的函数
  • Reducer:纯函数,接收当前的 state 和 action,返回一个新的 state。主要定义全局修改的函数
  • Dispatch:发送 action 到 reducer 以触发状态的变化。(和vuex差不多)
  • Middleware:拦截 action,可以用于异步操作(如 redux-thunk)或日志记录。

2. 安装 Redux 和相关工具

你可以使用 npm 或 yarn 来安装 Redux 和 react-redux(React 的绑定库),以及 Redux DevTools 用于调试:

npm install redux react-redux @reduxjs/toolkit

或者:

yarn add redux react-redux @reduxjs/toolkit

@reduxjs/toolkit 是 Redux 官方推荐的简化工具包,用于减少 Redux 样板代码,并提供了一些优化的功能。

3. Redux 使用示例

3.1 定义一个 Redux Store

Redux Store 是整个应用状态的存储中心。我们可以使用 configureStore 来创建 Redux store。

也就是pinia 模块化中的index

index.ts

import { configureStore } from '@reduxjs/toolkit';const store = configureStore({//进行模块导入reducer: {// 你的 reducers}
});export default store;
3.2 创建 Slice(使用 Redux Toolkit)

createSlice 是 Redux Toolkit 中的一个 API,能够简化 action 和 reducer 的编写。

在counter 目录下新建 counterStore.ts 或者tsx都可以

import { createSlice } from '@reduxjs/toolkit';// 定义一个 counter 的 slice
const counterStore = createSlice({name: 'counter', // slice 的进行多环境时候隔离的名称initialState: { count: 0 }, // 初始状态reducers: {// 定义 reducer 方法increment: (state) => {state.count += 1; // 直接修改 state},decrement: (state) => {state.count -= 1;},reset: (state) => {state.count = 0;}}
});// 导出 actions 交给具体组件使用
export const { increment, decrement, reset } = counterStore.actions;// 导出 reducer,供 store index.ts  注册 使用
export default counterStore.reducer;
3.3 将 Slice 合并到 Store

counterSlice.reducer 添加到 Redux store 中。

index.ts 此时完成注册 返回注册的配置的store对象

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';const store = configureStore({reducer: {counter: counterReducer, // 将 counterReducer 添加到 store 中}
});export default store;
3.4 在 React 中使用 Redux

现在,你可以使用 react-redux 提供的 Provider 组件将 store 注入到 React 组件中。

挂载react 组件数 ,让store范围内的组件 都可以使用 (感觉就像hook中的useContext pro max 版本)

main.tsx

/*** <StrictMode> 是 React 提供的一个开发工具,用于帮助检测应用程序中的潜在问题。它主要用于在开发模式下运行时,对组件进行额外的检查和警告。<StrictMode> 不会在生产环境中影响应用程序的性能。** <StrictMode> 的主要功能包括:* 识别不安全的生命周期方法:在 React 16.3 之后,一些生命周期方法被标记为不安全,<StrictMode> 可以帮助你识别这些方法的使用。* 检测过时的字符串 ref API:<StrictMode> 会警告你使用过时的字符串 ref API,建议使用函数或 createRef API。* 检测意外的副作用:<StrictMode> 会帮助你检测组件中可能存在的副作用,例如在渲染过程中修改状态或执行其他副作用操作。* 检测遗留的 context API:<StrictMode> 会警告你使用过时的 context API,建议使用新的 context API。*///3.添加到组件树
createRoot(document.getElementById('root')!).render(<StrictMode><Provider store={store}><App /></Provider></StrictMode>,)
3.5 在组件中访问 Redux 状态

为了在 React 组件中访问 Redux 状态,我们可以使用 useSelectoruseDispatch 钩子。

  • useSelector: 从 Redux store 中获取选择哪个模块的状态。
  • useDispatch: 用于 dispatch 一个 action,触发状态更新。

新建一个demo 演示组件


import { useSelector, useDispatch } from 'react-redux';
// 导出需要使用的函数
import { increment, decrement, reset } from '../../store/counter/conterStoreUSER.tsx';function Counter() {// 使用 useSelector  选择需要的全局存储模块  获取模块当前状态 const count = useSelector((state) => state.counter.count);// 使用 useDispatch 获取 dispatch 函数 用于传递执行的actionconst dispatch = useDispatch();return (<div><h1>全局技术器Counter: {count}</h1><button onClick={() => dispatch(increment())}>Increment</button><button onClick={() => dispatch(decrement())}>Decrement</button><button onClick={() => dispatch(reset())}>Reset</button><Son></Son></div>);
}
//演示深层 组件也可以获取到全局状态
function Son() {const count = useSelector((state) => state.counter.count);return (<div><h1>层级别省的也可以拿到数据Counter: {count}</h1></div>);
}export default Counter;

main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
// import App from './AppUSER.tsx'
import Counter from './page/test/demo1USER.tsx'
import './index.css'
import store from "./store";
import {Provider} from "react-redux";createRoot(document.getElementById('root')!).render(<StrictMode><Provider store={store}>{/*<App />*/}<Counter /></Provider></StrictMode>,)

演示成功,此时就已经可以成功使用redux 全局状态管理的功能了,还是相当简单的

目录结构
在这里插入图片描述

效果

在这里插入图片描述

3.6 使用 Redux DevTools 调试

Redux DevTools 是调试 Redux 状态变化的强大工具,默认情况下与 Redux Toolkit 兼容。

打开浏览器的 Redux DevTools 即可查看 Redux 状态的变化。

4. 优缺点

  • 优点

    • 全局状态管理,适用于复杂的大型应用。
    • 状态不可变,调试方便,状态变化容易追踪。
    • Redux DevTools 支持时间旅行等调试功能。
  • 缺点

    • 开发小型应用时可能过于复杂,增加不必要的样板代码。
  • 需要理解 actions、reducers 等概念,有一定的学习曲线。

5.其他功能

核心功能就上面 kiit 工具包用后很简单
其他功能可以看官方文档
https://cn.redux.js.org/introduction/why-rtk-is-redux-today

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

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

相关文章

Linux系统管理包命令大盘点

在Linux系统中&#xff0c;管理包的命令通常依赖于你使用的包管理器。不同的Linux发行版使用不同的包管理器。以下是一些常见的包管理器及其相关的命令&#xff1a; 一、Linux不同版本&#xff0c;包管理器及其命令 1. APT (Advanced Package Tool)- 主要用于Debian及其衍生版…

硬件基础知识

驱动开发分为&#xff1a;裸机驱动、linux驱动 嵌入式&#xff1a;以计算机技术为基础&#xff0c;软硬结合的、可移植、可剪裁的专用计算机 单片机最小单元&#xff1a;vcc gnd reset 晶振 cpu --- soc :system on chip 片上外设 所有的程序都是在soc&#xff08;cpu&…

学习贵在善假于物

以前我们学习&#xff0c;主要依赖于书本&#xff0c;老师。当然&#xff0c;还有必不可少的练习&#xff08;实践&#xff09;。 后来&#xff0c;搜索引擎的出现&#xff0c;打开了另一扇门&#xff0c;获取知识变得越来越方便快捷。 如今&#xff0c;人工智能的飞跃发展&a…

【Android安全】Ubuntu 16.04安装GDB和GEF

1. 安装GDB sudo apt install gdb-multiarch 2. 安装GEF(GDB Enhanced Features) 官网地址&#xff1a;https://github.com/hugsy/gef 2.1 安装2021.10版本 但是在Ubuntu 16.04上&#xff0c;bash -c "$(curl -fsSL https://gef.blah.cat/sh)"等命令不好使&…

Pandas语句

数据加载与保存 读取数据 pd.read_csv(‘filename.csv’)&#xff1a;读取 CSV 文件。 pd.read_excel(‘filename.xlsx’)&#xff1a;读取 Excel 文件。 pd.read_sql(query, connection_object)&#xff1a;从 SQL 数据库中读取数据。 pd.read_json(‘filename.json’)&#x…

蓝桥杯2024省C

P10898 [蓝桥杯 2024 省 C] 拼正方形 题目描述 小蓝正在玩拼图游戏&#xff0c;他有 7385137888721个 22的方块和 10470245 个 11 的方块&#xff0c;他需要从中挑出一些来拼出一个正方形&#xff0c;比如用 3 个 22 和 4 个 11 的方块可以拼出一个 44 的正方形&#xff0c;用…

深度学习自编码器 - 收缩自编码器(CAE)篇

序言 在深度学习的浪潮中&#xff0c;收缩自编码器&#xff08; Compressive Autoencoder, CAE \text{Compressive Autoencoder, CAE} Compressive Autoencoder, CAE&#xff09;作为自编码器的一种高级形式&#xff0c;正逐步崭露头角。收缩自编码器在保留自编码器核心功能—…

【贪心算法】贪心算法一

贪心算法一 1.柠檬水找零2.将数组和减半的最少操作次数3.最大数4.摆动序列 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1f603;&#x1f603; 1.柠檬水找零 题目…

【安当产品应用案例100集】017-助力软件服务商高效集成多因素认证

一、企业案例背景 在本案例中&#xff0c;某企业作为一家软件技术服务商&#xff0c;为包括银行、政府机构在内的多个行业提供定制化的软件服务。由于各个行业的安全需求各异&#xff0c;例如银行和政府机构倾向于使用UKEY进行身份验证&#xff0c;而其他企业则可能偏好使用数…

创建Django 项目

创建一个新的 Django 项目&#xff1a; django-admin startproject myproject cd myproject 在 Django 项目中创建一个新的应用&#xff1a; python manage.py startapp myapp设置数据库 编辑 myproject/settings.py 文件中的数据库设置&#xff1a; DATABASES {default:…

OJ在线评测系统 前端开发设计优化通用菜单组件二 调试用户自动登录

通用的菜单组件开发二 接下来要完善 权限功能 就是只有登录后才能进入题目查看界面 用户只能看到我们有权限的菜单 我们要在路由文件里面去操作 原理是控制路由设置隐藏 只要用户没有权限 就过滤掉隐藏 全局权限管理 实现想清楚有那些权限 /*** 权限定义*/ const ACCES…

UAC2.0 麦克风——同时支持 16bit,24bit 和 32bit

UAC2.0 麦克风系列文章 UAC2.0 麦克风——单声道 USB 麦克风(16bit) UAC2.0 麦克风——类特殊请求 UAC2.0 麦克风——音量控制 UAC2.0 麦克风——多采样率支持 UAC2.0 麦克风——24/32bit 支持 UAC2.0 麦克风——麦克风数据传输 UAC2.0 麦克风——同时支持 16bit,24bit 和 …

2017年国赛高教杯数学建模A题CT系统参数标定及成像解题全过程文档及程序

2017年国赛高教杯数学建模 A题 CT系统参数标定及成像 CT(Computed Tomography)可以在不破坏样品的情况下&#xff0c;利用样品对射线能量的吸收特性对生物组织和工程材料的样品进行断层成像&#xff0c;由此获取样品内部的结构信息。一种典型的二维CT系统如图1所示&#xff0c…

瑞芯微RK3588开发板Linux系统添加自启动命令的方法,深圳触觉智能Arm嵌入式鸿蒙硬件方案商

本文适用于触觉智能所有Linux系统的开发板、主板添加自启动命令的方法&#xff0c;本次使用了触觉智能的EVB3588开发板演示&#xff0c;搭载了瑞芯微RK3588旗舰芯片。 该开发板为核心板加底板设计&#xff0c;为工业场景设计研发的模块化产品&#xff0c;10年以上稳定供货,帮助…

U盘显示未被格式化:深度解析与数据恢复指南

一、现象解析&#xff1a;U盘显示未被格式化之谜 在日常使用U盘的过程中&#xff0c;不少用户可能会遭遇一个令人头疼的问题——插入U盘后&#xff0c;系统提示“U盘未被格式化”&#xff0c;要求用户进行格式化操作以继续访问。这一突如其来的提示不仅打断了正常的工作流程&a…

Java 数据类型转换详解:隐式转换(自动转换)与强制转换(手动转换)

目录 前言 取值范围从小到大的关系&#xff1a; 隐式转换&#xff08;自动转换&#xff09; &#x1f4dc;示例 1&#xff1a;基本类型隐式转换 &#x1f4dc;示例 2&#xff1a;算术运算中的类型提升 &#x1f4dc;示例 3&#xff1a;byte、short 和 char 的自动转换 隐…

如何上传tauri项目到csdn gitcode

如何上传tauri项目到csdn gitcode 首先保证项目目录有.gitignore&#xff0c;避免不必要的文件上传分享。 gitignore文件 # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* pnpm-debug.log* lerna-debug.log*node_modules dist dist-ssr *.local# Editor …

代码随想录:打家劫舍||

打家劫舍|| 循环数组用拼接数组处理&#xff0c;并多起点dp&#xff0c;取所有结果的最大值。 class Solution { public:int rob(vector<int>& nums) {int dp[500] ;int nnums.size(); if(n1)return nums[0];nums.insert(nums.end(),nums.begin(),nums.end());//数…

【计算机基础题目】二叉树的前序中序后续遍历之间相互转换 详细例子

创作日志&#xff1a; 笔试题目&#xff0c;掌握了技巧之后这道题就是 so easy~ 一、 1、已知二叉树的 前序和中序&#xff0c;可以求出后序 2、已知二叉树的 中序和后序&#xff0c;可以求出前序 3、已知二叉树的 前序和后序&#xff0c;无法求出唯一的中序 二、求法 求法是…

基于SSM的宿舍管理系统的设计与实现 (含源码+sql+视频导入教程+文档+PPT)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于SSM的宿舍管理系统9拥有两种角色&#xff1a;管理员和用户 管理员&#xff1a;宿舍管理、学生管理、水电费管理、报修管理、访客管理、各种信息统计报表 用户&#xff1a;个人信息管…