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

React 集成Redux数据状态管理数据共享全局共享

news 2025/10/24 7:54:07

介绍

Redux 是一个用于 JavaScript 应用程序的状态管理库，特别是在 React 这样的 UI 库中非常常见。将应用的状态集中管理，并且通过特定的规则和方式更新这些状态。

Store：所有的状态数据都保存在这个 Store 中。应用中的各个部分通过连接（connect）到 Store 来访问这些状态。
Actions：每次状态发生变化时，通知 Redux。Action 是一个普通的 JavaScript 对象，包含了更新数据所需的类型（type）和数据（payload）。
Reducers：根据 Action 更新 Store 中的状态。它接收当前的状态和 Action，并返回一个新的状态。是更新状态的地方。
Dispatch：当你需要更新状态时，你会通过 dispatch 方法来触发一个 Action，进而引发 Reducer 更新状态。

安装依赖

npm i @reduxjs/toolkit react-redux

目录结构

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/65a908ad0e7642f7b01001a264c4f194.png
以用户数据全局共享为例来演示

用户模块

user.js

// 从 Redux Toolkit 导入 createSlice
import { createSlice } from "@reduxjs/toolkit";// 创建一个切片，用于管理 "user" 的相关状态
const useUser = createSlice({name: 'user', // 定义切片的名称，用于调试时区分//Store：所有的状态数据都保存在这个 Store 中。应用中的各个部分通过连接（connect）到 Store 来访问这些状态。// 初始化状态，包含 userId 和 userNameinitialState: {userId: 1, // 初始的 userId 为 1userName: '生产队的驴', // 初始的 userName 为 '生产队的驴'},//- Reducers：根据 Action 更新 Store 中的状态。它接收当前的状态和 Action，并返回一个新的状态。是更新状态的地方。// reducers 定义了处理 state 的操作方法reducers: {// updateUserName 方法用于更新 userNameupdateUserName(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

// 从 Redux Toolkit 导入 configureStore
import { configureStore } from "@reduxjs/toolkit";// 导入 user 模块中的 reducer
import user from "./modules/user";// 使用 configureStore 创建 Redux store
const store = configureStore({// reducer 配置项，user 是我们之前定义的 reducerreducer: {user, // 添加 user reducer 到 Redux store}
});// 导出 store，以便在应用中使用
export default store;

导入全局使用

index.js

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和Reactconst root = ReactDOM.createRoot(document.getElementById('root'));root.render(<React.StrictMode>  // 严格模式，开发环境下进行额外检查<Provider store={store}>  {/* 使用Provider将Redux的store传递给整个应用 */}<App />  {/* 渲染主应用组件 */}</Provider></React.StrictMode>
);reportWebVitals();

获取数据

import {useSelector } from "react-redux";  // 从 react-redux 中导入 hooksconst { userName } = useSelector(state => state.user);

更新数据

import { useDispatch} from "react-redux";  // 从 react-redux 中导入 hooksconst dispatch = useDispatch();<button onClick={() => {dispatch(updateUserName('SSSSSSSSS'));  // 调用 updateUserName 					action 更新 userName}}>更新数据
</button>

获取且更新

import './App.css';  // 引入应用的样式文件
import { useDispatch, useSelector } from "react-redux";  // 从 react-redux 中导入 hooks
import { updateUserName } from "./store/modules/user";  // 引入 Redux 的 actionfunction 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;