文章目录
- 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并传入setAgeaction，更新用户的年龄。
结尾
通过以上步骤，我们成功地创建了一个使用 Vite 和 Redux Toolkit 的 React 项目。我们学习了如何创建状态切片、合并切片到 Redux store、以及在组件中获取和修改状态。这种状态管理的方式使得我们的应用更加可维护和可扩展。希望这个教程对你有所帮助，祝你在 React 开发中取得成功！
