介绍
Redux 是一个用于 JavaScript 应用程序的状态管理库，特别是在 React 这样的 UI 库中非常常见。将应用的状态集中管理，并且通过特定的规则和方式更新这些状态。
-
Store：所有的状态数据都保存在这个 Store 中。应用中的各个部分通过连接（connect）到 Store 来访问这些状态。
-
Actions：每次状态发生变化时，通知 Redux。Action 是一个普通的 JavaScript 对象，包含了更新数据所需的类型（type）和数据（payload）。
-
Reducers：根据 Action 更新 Store 中的状态。它接收当前的状态和 Action，并返回一个新的状态。是更新状态的地方。
-
Dispatch：当你需要更新状态时，你会通过 dispatch 方法来触发一个 Action，进而引发 Reducer 更新状态。
安装依赖
javascript
npm i @reduxjs/toolkit react-redux目录结构
以用户数据全局共享为例来演示
用户模块
user.js
javascript
// 从 Redux Toolkit 导入 createSlice
import { createSlice } from "@reduxjs/toolkit";
// 创建一个切片，用于管理 "user" 的相关状态
const useUser = createSlice({
name: 'user', // 定义切片的名称，用于调试时区分
//Store：所有的状态数据都保存在这个 Store 中。应用中的各个部分通过连接（connect）到 Store 来访问这些状态。
// 初始化状态，包含 userId 和 userName
initialState: {
userId: 1, // 初始的 userId 为 1
userName: '生产队的驴', // 初始的 userName 为 '生产队的驴'
},
//- Reducers：根据 Action 更新 Store 中的状态。它接收当前的状态和 Action，并返回一个新的状态。是更新状态的地方。
// reducers 定义了处理 state 的操作方法
reducers: {
// updateUserName 方法用于更新 userName
updateUserName(state, action) {
state.userName = action.payload; // 根据传入的 action.payload 更新 userName
}
}
});
// 从切片中解构出 updateUserName 操作方法
const { updateUserName } = useUser.actions;
// 获取切片的 reducer
const reducer = useUser.reducer;
// 导出 updateUserName 方法，供外部调用
export { updateUserName };
// 导出 reducer，供 Redux store 使用
export default reducer;模块入口
store/index.js
javascript
// 从 Redux Toolkit 导入 configureStore
import { configureStore } from "@reduxjs/toolkit";
// 导入 user 模块中的 reducer
import user from "./modules/user";
// 使用 configureStore 创建 Redux store
const store = configureStore({
// reducer 配置项，user 是我们之前定义的 reducer
reducer: {
user, // 添加 user reducer 到 Redux store
}
});
// 导出 store，以便在应用中使用
export default store;导入全局使用
index.js
javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from "./store"; // 引入Redux store
import {Provider} from "react-redux"; // 从react-redux引入Provider组件，用于连接Redux和React
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode> // 严格模式，开发环境下进行额外检查
<Provider store={store}> {/* 使用Provider将Redux的store传递给整个应用 */}
<App /> {/* 渲染主应用组件 */}
</Provider>
</React.StrictMode>
);
reportWebVitals();获取数据
javascript
import {useSelector } from "react-redux"; // 从 react-redux 中导入 hooks
const { userName } = useSelector(state => state.user);更新数据
javascript
import { useDispatch} from "react-redux"; // 从 react-redux 中导入 hooks
const dispatch = useDispatch();
<button onClick={() => {
dispatch(updateUserName('SSSSSSSSS')); // 调用 updateUserName action 更新 userName
}}>
更新数据
</button>获取且更新
javascript
import './App.css'; // 引入应用的样式文件
import { useDispatch, useSelector } from "react-redux"; // 从 react-redux 中导入 hooks
import { updateUserName } from "./store/modules/user"; // 引入 Redux 的 action
function App() {
// 使用 useSelector 从 Redux store 获取 userName 状态
const { userName } = useSelector(state => state.user);
// 使用 useDispatch 获取 dispatch 函数
const dispatch = useDispatch();
return (
<div className="box">
{/* 显示当前的 userName */}
{userName}
{/* 点击按钮时，触发 dispatch，更新 userName */}
<button onClick={() => {
dispatch(updateUserName('SSSSSSSSS')); // 调用 updateUserName action 更新 userName
}}>
更新数据
</button>
</div>
);
}
export default App;效果图
