首页 > 网络编程 > JavaScript > javascript类库 > React > React Redux 组件通信

React使用Redux实现组件通信的项目实践

2025-09-17 10:47:52 作者：柯南二号

本文主要介绍了React使用Redux实现组件通信的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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

一、环境准备

安装必要依赖：

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

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

八、运行效果

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

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

九、总结

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

到此这篇关于React使用Redux实现组件通信的项目实践的文章就介绍到这了,更多相关React Redux 组件通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！