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

【大前端】React 使用 Redux 实现组件通信的 Demo 示例

news 2025/9/4 5:18:58

React 使用 Redux 实现组件通信的 Demo 示例

在 React 项目中，父子组件通信通常依赖 props，兄弟组件通信则通过 状态提升 或 Context。但是当应用逐渐复杂时，这种方式会显得繁琐。此时 Redux 就派上用场了 —— 它可以集中管理全局状态，任何组件都能方便地订阅和修改状态。

本文将带你实现一个简单的 计数器 demo，演示 Redux 在 React 中的组件通信。

一、环境准备

安装必要依赖：

npm install @reduxjs/toolkit react-redux

Redux Toolkit（RTK）是 Redux 官方推荐的写法，简化了很多冗余代码。

二、目录结构

src/store.tsfeatures/counter/counterSlice.tsCounterA.tsxCounterB.tsxApp.tsxindex.tsxhooks.ts

这里我们会写两个兄弟组件：CounterA 和 CounterB，通过 Redux 实现通信。

三、配置 Redux Store

src/store.ts

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./features/counter/counterSlice";export const store = configureStore({reducer: {counter: counterReducer,},
});export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

四、定义 Slice（状态逻辑）

src/features/counter/counterSlice.ts

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { RootState } from "../../store";interface CounterState {value: number;
}const initialState: CounterState = { value: 0 };const counterSlice = createSlice({name: "counter",initialState,reducers: {increment: (state) => {state.value += 1;},decrement: (state) => {state.value -= 1;},addBy: (state, action: PayloadAction<number>) => {state.value += action.payload;},},
});export const { increment, decrement, addBy } = counterSlice.actions;
export default counterSlice.reducer;// 选择器
export const selectCount = (state: RootState) => state.counter.value;

五、封装 Typed Hooks（TS推荐）

src/hooks.ts

import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import type { RootState, AppDispatch } from "./store";export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

六、兄弟组件通信示例

`CounterA.tsx`

import React from "react";
import { useAppDispatch } from "../../hooks";
import { increment, addBy } from "./counterSlice";export default function CounterA() {const dispatch = useAppDispatch();return (<div style={{ border: "1px solid #ccc", padding: 10, margin: 10 }}><h3>我是 CounterA</h3><button onClick={() => dispatch(increment())}>+1</button><button onClick={() => dispatch(addBy(5))}>+5</button></div>);
}

`CounterB.tsx`

import React from "react";
import { useAppSelector } from "../../hooks";
import { selectCount } from "./counterSlice";export default function CounterB() {const count = useAppSelector(selectCount);return (<div style={{ border: "1px solid #ccc", padding: 10, margin: 10 }}><h3>我是 CounterB</h3><p>当前计数：{count}</p></div>);
}

七、应用入口

`App.tsx`

import React from "react";
import CounterA from "./features/counter/CounterA";
import CounterB from "./features/counter/CounterB";export default function App() {return (<div style={{ padding: 20 }}><h2>Redux 通信 Demo</h2><CounterA /><CounterB /></div>);
}

`index.tsx`

import React from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import { store } from "./store";
import App from "./App";const root = createRoot(document.getElementById("root")!);
root.render(<Provider store={store}><App /></Provider>
);