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

使用 Vite 和 Redux Toolkit 创建 React 项目

news 来源：原创 2025/6/15 2:17:12

文章目录

- 1. 创建 React 项目
- 2. 安装依赖
- 3. 创建状态仓库
- - user.js
  - 创建 shopSlice
- 4. 在状态仓库中合并切片
- 5. 在入口文件中导入并使用 store
- 6. 获取切片中的数据
- 7. 修改数据
- 结尾

在本教程中，我们将通过使用 Vite 创建一个 React 项目，并结合 Redux Toolkit 来管理应用的状态。我们将创建一个用户状态管理的切片（slice），并展示如何在组件中获取和修改这些状态。以下是详细的步骤解析。

1. 创建 React 项目

首先，我们使用 Vite 创建一个新的 React 项目。Vite 是一个快速的构建工具，能够提供更好的开发体验。

npm create vite demo

这个命令会创建一个名为 demo 的新项目，并为我们设置好基本的文件结构。

2. 安装依赖

接下来，我们需要安装 Redux Toolkit 和 React-Redux。这两个库将帮助我们在 React 应用中管理状态。

npm install @reduxjs/toolkit react-redux

Redux Toolkit：是 Redux 的官方工具包，简化了 Redux 的使用，提供了更简单的 API。
React-Redux：是 React 和 Redux 的绑定库，提供了 React 组件与 Redux store 之间的连接。

3. 创建状态仓库

在 src 目录下创建一个名为 stores 的文件夹，并在其中创建 user.js 文件，用于管理用户数据。

user.js

import { createSlice } from '@reduxjs/toolkit';// 创建 userSlice 切片，存储关于 user 的数据和修改 user 数据的方法 action
const userSlice = createSlice({name: 'user-slice',initialState: {user: {name: '张三',age: 18,gender: '男'}},reducers: {setName: (state, action) => {state.user.name = action.payload;},setAge: (state, action) => {state.user.age = action.payload;},setGender: (state, action) => {state.user.gender = action.payload;}}
});// 导出修改数据的方法，在组件中使用
export const { setName, setAge, setGender } = userSlice.actions;
// 导出切片的 reducer
export default userSlice.reducer;

解析

createSlice：是 Redux Toolkit 提供的一个函数，用于简化切片的创建。它接受一个配置对象，包括切片的名称、初始状态和 reducers。
初始状态：我们定义了一个包含用户信息的对象，包括姓名、年龄和性别。
reducers：定义了修改状态的方法。每个 reducer 接受当前状态和一个 action，返回新的状态。

创建 shopSlice

同样，我们可以创建一个 shopSlice 来管理商品数据。

import { createSlice } from "@reduxjs/toolkit";const shopSlice = createSlice({name: 'shop-slice',initialState: {shopList: [{name: 'xiaomi 15',price: '3999',id: 1}]},reducers: {setName: (state, action) => {state.shopList[0].name = action.payload;},setPrice: (state, action) => {state.shopList[0].price = action.payload;}}
});export const { setName, setPrice } = shopSlice.actions;
export default shopSlice.reducer;

解析

这里我们创建了一个 shopSlice，用于管理商品列表。初始状态中包含一个商品对象。
同样定义了两个 reducers，用于修改商品的名称和价格。

4. 在状态仓库中合并切片

在 stores 文件夹下创建 index.js 文件，用于合并所有的切片。

javascript

import { configureStore } from "@reduxjs/toolkit";
import user from './user';
import shop from './shop';export default configureStore({reducer: {user,shop}
});

解析

configureStore：是 Redux Toolkit 提供的函数，用于创建 Redux store。我们将之前创建的 user 和 shop 切片的 reducer 合并到 store 中。

5. 在入口文件中导入并使用 store

在 main.js 文件中，我们需要导入并使用刚刚创建的 store。

import { createRoot } from 'react-dom/client';
import App from './App.jsx';
// 导入合并好的 stores
import stores from './stores/index.js';
// 导入 redux Provider 组件传递 store
import { Provider } from 'react-redux';createRoot(document.getElementById('root')).render(<Provider store={stores}><App /></Provider>
);

解析

Provider：是 React-Redux 提供的组件，用于将 Redux store 传递给 React 组件树。这样，任何子组件都可以访问到 Redux store。

6. 获取切片中的数据

在子组件中，我们可以使用 useSelector 钩子来获取 Redux store 中的状态。

import React from 'react';
// 导入 useSelector
import { useSelector } from 'react-redux';export default function Child() {// 通过 useSelector 获取 state 的 user 切片中的 user 数据const user = useSelector(state => state.user);return (<div><h1>用户：{JSON.stringify(user)}</h1></div>);
}

解析

useSelector：是 React-Redux 提供的钩子，用于从 Redux store 中选择状态。我们传入一个函数，返回我们需要的状态部分。

7. 修改数据

我们还可以在组件中使用 useDispatch 钩子来修改 Redux store 中的状态。

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { setAge } from '../stores/user';export default function Child() {const user = useSelector(state => state.user.user);const dispatch = useDispatch();return (<div><h1>用户：{JSON.stringify(user)}</h1><button onClick={() => dispatch(setAge(user.age + 1))}>年龄加一</button></div>);
}

解析

useDispatch：是 React-Redux 提供的钩子，用于获取 dispatch 函数。我们可以使用它来派发 action，从而修改 Redux store 中的状态。
在按钮点击事件中，我们调用 dispatch 并传入 setAge action，更新用户的年龄。

结尾

通过以上步骤，我们成功地创建了一个使用 Vite 和 Redux Toolkit 的 React 项目。我们学习了如何创建状态切片、合并切片到 Redux store、以及在组件中获取和修改状态。这种状态管理的方式使得我们的应用更加可维护和可扩展。希望这个教程对你有所帮助，祝你在 React 开发中取得成功！

使用 Vite 和 Redux Toolkit 创建 React 项目

文章目录 1. 创建 React 项目2. 安装依赖3. 创建状态仓库user.js创建 shopSlice 4. 在状态仓库中合并切片5. 在入口文件中导入并使用 store6. 获取切片中的数据7. 修改数据结尾在本教程中，我们将通过使用 Vite 创建一个 React 项目，并结合 Redux Toolki…...

编程日记 2025/6/3 0:46:31

jmeter连接mysql

查询mysql数据库版本 SELECT VERSION(); 下载jmeter mysql 驱动jar包，版本低于mysql版本，放在jmeter的lib 路径下 MySQL :: Download MySQL Connector/J (Archived Versions) 添加JDBC Connection Configuration 填写 variable name 及数据库信息注意…...

编程日记 2025/5/30 3:12:13

sql中case when若条件重复执行的顺序

sql case when若条件重复执行的顺序在 SQL 中，如果你在 CASE 表达式中定义了多个 WHEN 子句，并且这些条件有重叠，那么 CASE 表达式的执行顺序遵循以下规则： （1）从上到下：SQL 引擎会按照 CASE …...

编程日记 2025/6/1 5:35:09

代码随想录算法训练营第五十天 | 图 | 并查集

Day 50 总结自己实现中遇到哪些困难今日收获，记录一下自己的学习时间 15:00 - 16:0018:00 - 19:45 图论深度收缩 & 广度搜索 BFS, DFS, visited数组, 四个方向并查集数组代表链表, 用集合中的一个元素代表集合的根最小生成树拓扑排序最短路径算法图论基…...

编程日记 2025/6/2 15:02:33

tryhackme——Pre Security(安检前)-Offensive Security（进攻性安全）

这里我用的edge的插件闪击翻译。这里我英语不好，所以用这个可以顺便学习下英语。任务一：What is Offensive Security?（什么是进攻性安全?） 很简单啊，通过阅读，知道以下哪个选项更能代表您模拟黑客操作…...

编程日记 2025/6/2 19:32:10

vue iframe进行父子页面通信并切换URL

使用通义千问提问后得到一个很好的示例。需求是2个项目需要使用同一个面包屑进行跳转，其中一个是iframe所在的项目，另一个需要通过地址访问。通过 window.parent.postMessage ，帮助 <iframe> 内嵌入的子页面和其父页面之间进行跨域通…...

编程日记 2025/6/4 12:23:51

Cesium 无人机航线规划（区域航线）

区域航线，即划定一片区域一键巡查这里选择点几个点，形成的区域内计算规划航线...

编程日记 2025/5/28 5:29:53

[NOIP2016 普及组] 海港 -STL-队列queue

[NOIP2016 普及组] 海港题目背景 NOIP2016 普及组 T3 题目描述小 K 是一个海港的海关工作人员，每天都有许多船只到达海港，船上通常有很多来自不同国家的乘客。小 K 对这些到达海港的船只非常感兴趣，他按照时间记录下了到达海港的每一…...

编程日记 2025/6/2 14:58:21

前端页面导出word

html-docx-js bug: vite使用html-docx.js会报错，点击下载上方文件替换即可正文 npm install html-docx-js -S npm install file-saver -S<template><div id"managerReport">word内容......</div> </template><script>&l…...

编程日记 2025/6/1 21:01:57

C++中的深拷贝和浅拷贝

浅拷贝浅拷贝：就是简单的赋值操作。浅拷贝问题：如果有指针指向堆区内存时，不同对象的指针成员指向同一块堆区内存，当对象释放时，该堆区内存会被释放两次。当一个对象修改堆区内存是，另一个对象也随之变…...

编程日记 2025/6/3 21:57:37

MobileLLM开发安卓AI的体验（一）

MobileLLM是一个在安卓端跑的大语言模型，关键它还有调动api的能力 https://github.com/facebookresearch/MobileLLM 项目地址是这个。看了下，似乎还是中国人团队 article{liu2024mobilellm, title{MobileLLM: Optimizing Sub-billion Parameter Langua…...

编程日记 2025/5/31 22:23:35

MySQL的并发控制与MVCC机制深度解析

目录 1. MySQL中的并发问题2. 数据库的隔离级别3. MVCC（多版本并发控制）机制3.1 MVCC的实现原理3.2 Read View详解3.3 当前读与快照读 4. MVCC在不同隔离级别下的工作方式5. MVCC解决幻读问题6. MVCC的优缺点优点：缺点： 7. MVCC在…...

编程日记 2025/6/4 17:26:20

搭建Tomcat（六）---Response的实现

目录引入一、前端项目容器的搭建重建项目: 1.创建一个新的项目： 2.创建HTML文件 3.将先前编写的所有tomcatJava文件挪过来二、配置java文件 1.重启一下MyTomcat 2.配置两个工具包 ①FileUtil ②ResponseUtil（响应头） 三、处理…...

编程日记 2025/5/31 1:06:39

深度学习物体检测之YOLOV5源码解读

V5比前面版本偏工程化,项目化,更贴合实战一.V5版本项目配置 (1)整体项目概述首先github直接查找yolov5，下载下来即可。在训练时，数据是怎么处理的？网络模型架构是怎么设计的(如各层的设计)？yolov5要求是大于python3.8与大于等…...

编程日记 2025/6/2 11:26:32

Ubuntu22.04配置3D gaussian splatting

这篇博客提供了3D gaussian splatting在新安装Ubuntu上的配置过程。 1.拉仓库 2.安装显卡驱动和cuda版本 3.安装Pytorch 4.安装Pycharm和配置Python 5.安装附加依赖项（方法一） 6.安装Anaconda（方法二） 7.测试 1.拉仓库 # HT…...

编程日记 2025/6/2 17:49:38

【Python知识】python基础-关于异常处理

python的异常处理知识概览基本用法自定义异常捕获特定异常信息异常抛出概览在Python中，异常处理是通过try、except和finally等关键字来实现的。这些关键字允许你捕获和处理在程序运行时可能出现的错误和异常情况，从而避免程序崩溃，并允许…...

编程日记 2025/6/3 4:02:04

golang 使用gzip对json例子

package main import ( "bytes" "compress/gzip" "encoding/json" "fmt" "io" "log" ) // User 结构体定义 type User struct { ID int json:"id" Name string json:"name" Age in…...

编程日记 2025/5/31 10:53:56

qt-C++笔记之自定义类继承自 `QObject` 与 `QWidget` 及开发方式详解

qt-C笔记之自定义类继承自 QObject 与 QWidget 及开发方式详解 code review! 参考笔记 1.qt-C笔记之父类窗口、父类控件、对象树的关系 2.qt-C笔记之继承自 QWidget和继承自QObject 并通过 getWidget() 显示窗口或控件时的区别和原理 3.qt-C笔记之自定义类继承自 QObject 与 QW…...

编程日记 2025/6/1 23:16:32

利用git上传项目到GitHub

GitHub是基于git实现的代码托管。git是目前最好用的版本控制系统了，非常受欢迎，比之svn更好。 GitHub可以免费使用，并且快速稳定。利用GitHub，你可以将项目存档，与其他人分享交流，并让其他开发者帮助你一…...

编程日记 2025/6/4 13:54:58

机器学习预处理-表格数据的空值处理

机器学习预处理-表格数据的空值处理机器学习预处理-表格数据的分析与可视化中详细介绍了表格数据的python可视化，可视化能够帮助我们了解数据的构成和分布，是我们进行机器学习的必备步骤。上文中也提及，原始的数据存在部分的缺失&#xff0…...

编程日记 2025/6/2 20:05:12

python学opencv|读取图像（十二）BGR图像转HSV图像

【1】引言前述已经学习了opencv中图像BGR相关知识，文章链接包括且不限于下述： python学opencv|读取图像（六）读取图像像素RGB值_opencv读取灰度图-CSDN博客 python学opencv|读取图像（七）抓取像素数据顺利…...

编程日记 2025/5/31 4:58:08

【C语言】库函数常见的陷阱与缺陷(六)：输入输出函数

目录一、printf 函数 1.1. 功能与用法 1.2. 陷阱与缺陷 1.3. 安全使用建议 1.4. 代码示例二、scanf 函数 2.1. 功能与用法 2.2. 陷阱与缺陷 2.3. 安全使用建议 2.4. 代码示例三、gets 函数 3.1. 功能与用法 3.2. 陷阱与缺陷 3.3. 安全使用建议 3.4. 代码示例…...

编程日记 2025/5/28 23:28:37

https://www.vulnhub.com/entry/sunset-midnight,517/ 主机发现端口扫描探测存活主机，8是靶机 nmap -sP 192.168.56.0/24 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-12-05 16:49 CST Nmap scan report for 192.168.56.1 …...

编程日记 2025/5/30 7:33:55

CSS Backgrounds(背景)

CSS Backgrounds(背景) Introduction(介绍) CSS backgrounds play a crucial role in web design, allowing developers to apply colors, images, and other decorative elements to the background of HTML elements. This enhances the visual appeal of web pages and he…...

编程日记 2025/6/3 7:51:14

D101【python 接口自动化学习】- pytest进阶之fixture用法

day101 pytest的fixture执行顺序学习日期：20241218 学习目标：pytest基础用法 -- pytest的fixture执行顺序学习笔记： fixtrue的作用范围实战结果 import pytestpytest.fixture(scopesession) def test_session():print(我是 session f…...

编程日记 2025/6/1 21:03:46

HCIA-Access V2.5_4_1_1路由协议基础_IP路由表

大型网络的拓扑结构一般会比较复杂，不同的部门，或者总部和分支可能处在不同的网络中，此时就需要使用路由器来连接不同的网络，实现网络之间的数据转发。本章将介绍路由协议的基础知识、路由表的分类、静态路由基础与配置、VLAN间…...

编程日记 2025/6/1 23:36:34

Meta重磅发布Llama 3.3 70B：开源AI模型的新里程碑

在人工智能领域，Meta的最新动作再次引起了全球的关注。今天，我们见证了Meta发布的Llama 3.3 70B模型，这是一个开源的人工智能模型，它不仅令人印象深刻，而且在性能上达到了一个新的高度。一，技术突破&#…...

编程日记 2025/6/3 10:39:50

20241218_segmentation

参考： 使用SA模型 https://ai.meta.com/research/publications/segment-anything/讲解生物学意义 https://www.nature.com/articles/s41593-024-01714-3#Sec13 x.0 workflow 图像分割方法识别出重要的ROI区域计算ROI区域个数（需要计算机算法&#xff…...

编程日记 2025/5/31 3:41:55

公链常用的共识算法

1. 工作量证明（Proof of Work, PoW） 工作原理：要求节点（矿工）解决一个数学难题，这个过程称为挖矿。第一个解决难题的矿工将有权添加一个新的区块到区块链上，并获得一定数量的加密货币作为奖励。…...

编程日记 2025/6/2 21:03:40

监控易在汽车制造行业信息化运维中的应用案例

引言随着汽车制造行业的数字化转型不断深入，信息化类IT软硬件设备的运行状态监控、故障告警、报表报告以及网络运行状态监控等成为了企业运维管理的关键环节。监控易作为一款全面、高效的信息化运维管理工具，在汽车制造行业中发挥着重要作用。本文将结合…...

编程日记 2025/6/4 17:51:23

Spring Boot项目使用虚拟线程

Spring Boot项目启用虚拟线程开始基本使用先写一个测试方法通过springboot配置项开启虚拟线程目前存在的问题开始虚拟线程正式发布是在JDK21，对于Spring Boot版本选择3以上。基本使用关于虚拟线程本身的使用，之前已经介绍过。这里要说的是直接将…...

编程日记 2025/6/4 0:19:43

Deveco Studio首次编译项目初始化失败

编译项目失败 Ohpm install失败的时候重新使用管理者打开程序 build init 初始化失败遇到了以下报错信息 Installing pnpm8.13.1... npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.npm.taobao.org/pnpm failed, r…...

编程日记 2025/6/2 8:01:29

Unity 开发Apple Vision Pro空间锚点应用Spatial Anchor

空间锚点具有多方面的作用虚拟物体定位与固定： 位置保持：可以把虚拟物体固定在现实世界中的特定区域或位置。即使使用者退出程序后再次打开，之前锚定过的虚拟物体仍然能够出现在之前所锚定的位置，为用户提供连贯的体验。比如在一…...

编程日记 2025/5/29 18:24:30

由学习率跟batch size 关系引起的海塞矩阵和梯度计算在训练过程中的应用思考

最近看到了个一个学习率跟batch size 关系的帖子，里面说 OpenAI的《An Empirical *** Training》通过损失函数的二阶近似分析SGD的最优学习率，得出“学习率随着Batch Size的增加而单调递增但有上界”的结论。推导过程中将学习率作为待优化参数纳入损失函…...

编程日记 2025/5/28 7:20:06

PHP开发日志 ━━ 基础知识：四种不同的变量返回方式该如何调用

最近在给框架升级，其中涉及到古早的缓存系统升级，现在准备区分类型为混合、变量和普通文件，那么变量用什么形式存储到缓存才能给后续开发带来便利和通用性呢？于是就涉及到了本文的php基础知识。好吧，又是一个无用的知…...

编程日记 2025/5/30 14:15:26

centos上配置yum源

1. 进入yum源repo的目录 cd /etc/yum.repos.d/然后可以通过ls查看下面所有的后缀为.repo的文件 2. 新建一个备份目录，将原有的.repo文件放到其中 mkdir yum.repos.d.backup mv *.repo yum.repos.d.backup/3. 获取阿里提供的repo配置文件这里使用到了wget命令&a…...

编程日记 2025/5/29 11:19:54

Web3 时代：技术变革与未来展望

Web3作为下一代互联网技术，正在逐步改变我们使用互联网的方式。它的核心特点是去中心化，利用区块链技术，使得数据不再集中存储，用户能更好地掌控自己的信息。本文将简要介绍Web3的核心技术及其未来展望。 Web3代表的是去中心化的互…...

编程日记 2025/6/3 8:33:27

小程序快速实现大模型聊天机器人

需求分析： 基于大模型，打造一个聊天机器人；使用开放API快速搭建，例如：讯飞星火；先实现UI展示，在接入API。最终实现效果如下： 一.聊天机器人UI部分 1. 创建微信小程序&#xff0c…...

编程日记 2025/6/2 6:37:00

用shell脚本来判断web服务是否运行（端口和进程两种方式）

判断web服务是否运行（1、查看进程的方式判断该程序是否运行，2、通过查看端口的方式判断该程序是否运行），如果没有运行，则启动该服务并配置防火墙规则。------这里以nginx为例一、用进程方式判断 （1&#…...

编程日记 2025/6/4 14:30:00

Android运行低版本项目可能遇到的问题

Android运行低版本项目可能遇到的问题低版本项目总是遇到各种问题的，耐心点一、gradle-xxx.xxx.xxx.zip一直下载不下来在gradle-wrapper.properties可以试下 distributionBaseGRADLE_USER_HOME distributionPathwrapper/dists zipStoreBaseGRADLE_USER_HOME …...

编程日记 2025/6/3 3:14:17

SQL Server 解决游标性能问题的替代方案

在 SQL Server 中，游标（Cursor）是一种用于逐行处理数据集的强大工具，但在某些情况下，它们可能会导致性能问题，尤其是在处理大量数据时。为了提高性能和可维护性，可以考虑使用其他替代方案。以下…...

编程日记 2025/6/1 1:01:23

【论文笔记】CLIP-guided Prototype Modulating for Few-shot Action Recognition

🍎个人主页：小嗷犬的个人主页 🍊个人网站：小嗷犬的技术小站 🥭个人信条：为天地立心，为生民立命，为往圣继绝学，为万世开太平。基本信息标题: CLIP-guided Prototype Mo…...

编程日记 2025/5/31 16:52:44

PHP：从入门到进阶的全方位探索

PHP（Hypertext Preprocessor）作为一种开源的服务器端脚本语言，自1995年问世以来，凭借其简单易学、高效灵活的特点，迅速成为了Web开发领域的中流砥柱。无论是构建动态网页、开发Web应用程序，还是处理复杂的服…...

编程日记 2025/6/4 10:57:37

vue复习

1.试述前端开发技术发展变化历程，理解推动技术发展动力以及对软件开发职业的启发。 2.当前前端开发技术主要特征有哪些？ 前后端分离开发： 前端专注页面展示效果与用户使用体验,后端专注为前端提供数据和服务。工程化特征：模块…...

编程日记 2025/6/2 8:50:25

伊克罗德与九科信息共同发布RPA+AI智能机器人解决方案

12月12日，伊克罗德信息在上海举办“创见AI，迈进智能化未来——科技赋能零售电商”活动，与九科信息、亚马逊云科技共同探讨与分享，融合生成式AI技术和智能自动化（RPA,Robotic Process Automation）在电商零售…...

编程日记 2025/6/4 0:20:03

nano编辑器的使用

nano 是一个非常简单易用的命令行文本编辑器，它常用于在 Linux 或类 Unix 系统中快速编辑文件，特别适用于需要修改配置文件或快速编辑文本的场景。以下是一些常见的 nano 使用技巧和基本操作。 1. 打开文件要使用 nano 编辑文件，打开终端并…...

编程日记 2025/5/30 1:20:17

灵当crm pdf.php存在任意文件读取漏洞

免责声明: 本文旨在提供有关特定漏洞的深入信息，帮助用户充分了解潜在的安全风险。发布此信息的目的在于提升网络安全意识和推动技术进步，未经授权访问系统、网络或应用程序，可能会导致法律责任或严重后果。因此，作者不对读者基于本文内容所采取的任何行为承担责任。读者在…...

编程日记 2025/6/1 6:10:31

Liinux下VMware Workstation Pro的安装，建议安装最新版本17.61

建议安装最新版本17.61，否则可能有兼容性问题下载VMware Workstation安装软件从官网网站下载 https://support.broadcom.com/group/ecx/productdownloads?subfamilyVMwareWorkstationPro 选择所需版本现在最新版本是17.61，否则可能有兼容性问题…...

编程日记 2025/6/1 21:11:43