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

介绍

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

目录结构

以用户数据全局共享为例来演示

用户模块

user.js

// 从 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

// 从 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

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();

获取数据

import {useSelector } from "react-redux";  // 从 react-redux 中导入 hooks

const { userName } = useSelector(state => state.user);

更新数据

import { useDispatch} from "react-redux";  // 从 react-redux 中导入 hooks

const 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 的 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;

效果图