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

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

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

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

一、环境准备

安装必要依赖：

bash 复制代码

npm install @reduxjs/toolkit react-redux

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

二、目录结构

复制代码

src/
  store.ts
  features/
    counter/
      counterSlice.ts
      CounterA.tsx
      CounterB.tsx
  App.tsx
  index.tsx
  hooks.ts

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

三、配置 Redux Store

src/store.ts

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

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

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`

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`

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`

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`

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

八、运行效果

点击 CounterA 中的 +1 或 +5 按钮，会触发 Redux 的 dispatch，修改全局状态。
CounterB 会实时响应，展示最新的计数值。

👉 这就实现了 兄弟组件通信，而且随着应用规模扩大，你只需要在需要的地方使用 Redux，不再需要复杂的 props 传递。

九、总结

父子通信：直接用 props。
兄弟通信：Redux 是一种集中化管理方式，适合跨层级或复杂场景。
Redux Toolkit 简化了 reducer 和 action 的写法，官方推荐。
在更大规模应用中，还可以结合 Redux Persist （持久化存储）、RTK Query（数据请求管理）。