使用 Vite 和 Redux Toolkit 创建 React 项目

文章目录

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

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

1. 创建 React 项目

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

bash 复制代码
npm create vite demo

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

2. 安装依赖

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

bash 复制代码
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

javascript 复制代码
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 来管理商品数据。

javascript 复制代码
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

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。我们将之前创建的 usershop 切片的 reducer 合并到 store 中。

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

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

javascript 复制代码
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 中的状态。

javascript 复制代码
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 中的状态。

javascript 复制代码
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 开发中取得成功!

相关推荐
子燕若水25 分钟前
简要解释JSON Schema
前端·html·json
是我知白哒1 小时前
lxml提取某个外层标签里的所有文本
前端·爬虫·python
m0_748246351 小时前
前端通过new Blob下载文档流(下载zip或excel)
前端·excel
m0_607548762 小时前
什么是单例模式
开发语言·javascript·单例模式
半糖11222 小时前
将本地项目提交到远程仓库
前端·vue.js
web150850966416 小时前
【React&前端】大屏适配解决方案&从框架结构到实现(超详细)(附代码)
前端·react.js·前端框架
理想不理想v6 小时前
前端项目性能优化(详细)
前端·性能优化
Cachel wood7 小时前
Vue.js前端框架教程8:Vue消息提示ElMessage和ElMessageBox
linux·前端·javascript·vue.js·前端框架·ecmascript
PP东7 小时前
ES6学习Generator 函数(生成器)(八)
javascript·学习·es6