使用 Vite 和 Redux Toolkit 创建 React 项目

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 开发中取得成功！