react(9)-redux

使用CRA快速创建react项目
npx create-react-app react-redux
安装配套工具
npm i @reduxjs/toolkit react-redux
启动项目
在创建项目时候会出现一个问题
You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1).
We no longer support global installation of Create React App.
Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app
The latest instructions for creating a new app can be found here:
解决办法
卸载全局安装的create-react-app
npm uninstall -g create-react-app
npx clear-npx-cache
npm i create-react-app
npx create-react-app@latest xxxxx项目名
案例:
创建store文件夹

使用store数据和方法的基本步骤
1、引入import { createSlice } from "@reduxjs/toolkit";
初始化值
//初始化state
initialState: {count: 0},
创建使用方法
// 修改状态的方法 同步方法 支持直接修改reducers: {increment: state => {state.count += 1;},decrement: state => {state.count -= 1;}}
解构导出
// 导出actions和reducers
const { increment, decrement } = counterStore.actions;
const reducer = counterStore.reducer;
// 按需导出
export { increment, decrement };
// 默认导出
export default reducer;
整体
import { createSlice } from "@reduxjs/toolkit";const counterStore = createSlice({name: "counter",//初始化stateinitialState: {count: 0,},// 修改状态的方法 同步方法 支持直接修改reducers: {increment: (state) => {state.count += 1;},decrement: (state) => {state.count -= 1;},},
});
// 结构counterStore// 导出actions和reducers
const { increment, decrement } = counterStore.actions;
const reducer = counterStore.reducer;
// 按需导出
export { increment, decrement };
// 默认导出
export default reducer;
2、在index文件中使用
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./modules/counterStore";
const store=configureStore({reducer: {counter: counterReducer}
});
export default store;
3、index文件中添加 Provider
import { Provider } from 'react-redux';
import store from './store';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><Provider store={store}><App /></Provider></React.StrictMode>
);
4、APP.js文件
import { useDispatch,useSelector } from "react-redux";
import { decrement,increment } from "./store/modules/counterStore";function App() {const {count}= useSelector(state=>state.counter)const dispatch= useDispatch()return (<div className="App"><button onClick={()=>dispatch(decrement())}>-</button>{count}<button onClick={()=>dispatch(increment())}>+</button></div>);
}export default App;
5 传参的写法
addToNum(state, action) {state.count += action.payload;}
不要忘记两个地方的导出
使用
<button onClick={()=>dispatch(addToNum(20))}>+</button>
案例2 异步获取数据
channenStore.js文件
import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";
// 创建store数据
const channelStore = createSlice({name: "channel",initialState: {channelList: [],},// 修改状态的方法reducers: {setChanles(state, action) {state.channelList = action.payload;},},
});
// 导出actions和reducers
const { setChanles } = channelStore.actions;
const reducer = channelStore.reducer;
// 异步请求部分
const fetchChannlList = () => {return async (dispatch) => {const res = await axios.get("http://geek.itheima.net/v1_0/channels");dispatch(setChanles(res.data.data.channels));};
};
export { fetchChannlList };
export default reducer;
store的index文件
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./modules/counterStore";
import channelReducer from "./modules/channelStore";
const store=configureStore({reducer: {counter: counterReducer,channel: channelReducer}
});
export default store;
触发
import { useDispatch, useSelector } from "react-redux";
import { decrement, increment, addToNum } from "./store/modules/counterStore";
// 引入异步函数 channelStore的函数方法
import { fetchChannlList } from "./store/modules/channelStore";
import { useEffect } from "react";function App() {const { count } = useSelector((state) => state.counter);
// 获取channelListconst { channelList } = useSelector((state) => state.channel);const dispatch = useDispatch();// 触发异步函数useEffect(() => {dispatch(fetchChannlList())},[dispatch])return (<div className="App"><button onClick={() => dispatch(decrement())}>-</button>{count}<button onClick={() => dispatch(increment())}>+</button><button onClick={() => dispatch(addToNum(20))}>+</button>{/* 列表展示 */}<ul>{channelList.map((item) => (<li key={item.id}>{item.name}</li>))}</ul></div>);
}export default App;
相关文章:
react(9)-redux
使用CRA快速创建react项目 npx create-react-app react-redux 安装配套工具 npm i reduxjs/toolkit react-redux 启动项目 在创建项目时候会出现一个问题 You are running create-react-app 5.0.0, which is behind the latest release (5.0.1). We no longer support…...
Linux内核实时机制7 - 实时改造机理 - 软中断优化下
Linux内核实时机制7 - 实时改造机理 - 软中断优化下 https://blog.csdn.net/u010971180/article/details/145722641以下分别以Linux4.19、Linux5.4、Linux5.10、Linux5.15 展开分析,深入社区实时改造机理的软中断优化过程。https://blog.csdn.net/weixin_41028621/article/det…...
企业知识管理平台重构数字时代知识体系与智能服务网络
内容概要 现代企业知识管理平台的演进呈现出全生命周期管理与智能服务网络构建的双重特征。通过四库体系(知识采集库、加工库、应用库、评估库)的协同运作,该系统实现了从知识沉淀、结构化处理到价值释放的完整闭环。其中,知识图…...
大数据组件(四)快速入门实时数据湖存储系统Apache Paimon(3)
Paimon的下载及安装,并且了解了主键表的引擎以及changelog-producer的含义参考: 大数据组件(四)快速入门实时数据湖存储系统Apache Paimon(1) 利用Paimon表做lookup join,集成mysql cdc等参考: 大数据组件(四)快速入门实时数据…...
SVN把英文换中文
原文链接:SVN设置成中文版本 都是英文,换中文 Tortoise SVN 安装汉化教程(乌龟SVN) https://pan.quark.cn/s/cb6f2eee3f90 下载中文包...
Ubuntu 的RabbitMQ安装
目录 1.安装Erlang 查看erlang版本 退出命令 2. 安装 RabbitMQ 3.确认安装结果 4.安装RabbitMQ管理界面 5.启动服务并访问 1.启动服务 2.查看服务状态 3.通过IP:port 访问界面 4.添加管理员用户 a)添加用户名:admin,密码࿱…...
基于WebRTC与AI大模型接入EasyRTC:打造轻量级、高实时、强互动的嵌入式音视频解决方案
随着物联网和嵌入式技术的快速发展,嵌入式设备对实时音视频通信的需求日益增长。然而,传统的音视频解决方案往往存在体积庞大、实时性差、互动体验不佳等问题,难以满足嵌入式设备的资源限制和应用场景需求。 针对以上痛点,本文将介…...
QML 实现一个动态的启动界面
QML 实现一个动态的启动界面 一、效果查看二、源码分享三、所用到的资源下载 一、效果查看 二、源码分享 工程结构 main.qml import QtQuick import QtQuick.Controls import QtQuick.Dialogs import Qt.labs.platformWindow {id:windowwidth: 640height: 400visible: truetit…...
智能预警系统标准化处理流程
在当今数字化时代,IT系统的稳定运行对企业的业务连续性至关重要。为了及时发现和响应系统异常,构建智能预警系统已成为许多企业的当务之急。但仅仅拥有预警系统还不够,我们还需要一套标准化的处理流程,确保问题能够高效、有序地得到解决。 © ivwdcwso (ID: u012172506) 一…...
Unity游戏制作中的C#基础(4)数组声明和使用
一、数组的声明 在 C# 中,声明数组有多种方式,每种方式都有其适用的场景,下面为你逐一详细介绍: 1. 直接初始化声明 这种方式直观且便捷,在声明数组的同时就为其赋初值,让数组从诞生之初就拥有了具体的数据…...
tailwindcss学习03
01 入门 02 vue中接入 03 工具类优先 准备 vue.svg <svg viewBox"0 0 40 40" xmlns"http://www.w3.org/2000/svg"> <defs> <linearGradient x1"50%" y1"0%" x2"50%" y2"100%" id"a"&…...
QML Component 与 Loader 结合动态加载组件
在实际项目中,有时候我们写好一个组件,但不是立即加载出来,而是触发某些条件后才动态的加载显示出来,当处理完某些操作后,再次将其关闭掉; 这样的需求,可以使用 Component 包裹着组件ÿ…...
Visual studio 2022 将打开文件的方式由单击改为双击
1. 打开vs2022,选择Tools -> Options打开Options设置页面 2. 在左侧依次展开Environment, 选择Tabs and Windows 3. 在右侧面板往下拖拽滚动条,找到Preview Tab section, unchecked "Preview selected files in Solution Explorer (Altclick t…...
网络工程师 (49)UDP协议
前言 UDP协议,即用户数据报协议(User Datagram Protocol),是一种无连接的、不可靠的、面向报文的传输层通信协议。 一、基本特点 无连接性:UDP在发送数据之前不需要与目标设备建立连接,也无需在数据发送结束…...
了解大数据
一、大数据的特点: 1.大量 2.高速 3.多样 结构化数据和非结构化数据 4.低价值密度 二、大数据的应用场景:视频推荐、电商推荐等 三、大数据的技术发展脉络 阶段1:单机时代 阶段2:大数据时代-分布式处理 阶段3:实…...
命令模式
1. 命令模式简介 命令模式(Command Pattern)是一种行为型设计模式,它将一个请求封装为一个对象,从而使您可以用不同的请求对客户进行参数化、对请求排队或记录请求日志,以及支持可撤销的操作。命令模式的核心思想是将操作和操作的执行者解耦,使得操作可以独立于执行者进…...
解放大脑!用DeepSeek自动生成PPT!
DeepSeek应用(PPT篇) DeepSeek作为当前最好的AI大模型之一,其强大的文本生成能力被广泛的应用于各个领域,本文我们来聊聊用DeepSeek来自动生成PPT。 一、DeepSeek & PPT DeepSeek本身没有直接生成PPT的能力,换个…...
GUI编程(window系统→Linux系统)
最近有个项目需要将windows系统的程序往Linux系统上面移植,由于之前程序没有考虑过多平台兼容的问题,导致部分功能不可用以下是对近期遇到的问题的总结,以及相应的解决方案和经验分享。 1. Python 模块安装与管理 在 Linux 系统中࿰…...
互推机制在开源AI智能名片2+1链动模式S2B2C商城小程序源码推广中的应用探索
摘要: 在数字化营销时代,开源AI智能名片21链动模式S2B2C商城小程序源码作为一种创新的技术解决方案,正逐步成为企业数字化转型的重要工具。然而,面对激烈的市场竞争,如何高效推广这一前沿技术产品,成为开发…...
Pytorch实现之特征损失与残差结构稳定GAN训练,并训练自己的数据集
简介 简介:生成器和鉴别器分别采用了4个新颖设计的残差结构实现,同时在损失中结合了鉴别器层的特征损失来提高模型性能。 论文题目:Image Generation by Residual Block Based Generative Adversarial Networks(基于残留块的生成对抗网络产生图像) 会议:2022 IEEE Int…...
挑战杯推荐项目
“人工智能”创意赛 - 智能艺术创作助手:借助大模型技术,开发能根据用户输入的主题、风格等要求,生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用,帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成,核心是利用 HTTP 协议的 Range 请求头指定下载范围: 实现原理 Range 请求头:向服务器请求文件的特定字节范围(如 Range: bytes1024-) 本地文件记录:保存已…...
ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来,实在找不到,希望有大佬教一下我。 还有就会议时间,我感觉不是图片时间,因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
Rust 异步编程
Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...
工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年,作为行业领先的3D工业相机及视觉系统供应商,累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成,通过稳定、易用、高回报的AI3D视觉系统,为汽车、新能源、金属制造等行…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持,不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V,是一个正整数,表示每 V V V 个普通金属 O O O 可以冶炼出 …...
iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中,性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期,开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发,但背后往往隐藏着系统资源调度不当…...
DAY 26 函数专题1
函数定义与参数知识点回顾:1. 函数的定义2. 变量作用域:局部变量和全局变量3. 函数的参数类型:位置参数、默认参数、不定参数4. 传递参数的手段:关键词参数5 题目1:计算圆的面积 任务: 编写一…...
