引言：为什么我们需要 Redux？
在大型复杂的 React 单页应用（SPA）中，组件之间的通信和数据管理是一个永恒的核心话题。当你的组件树变得深邃，一个看似简单的需求，比如“在 Header 组件中显示用户的未读消息数，并在页面某处的 Modal 组件中点击按钮将其清零”，都会变得异常棘手。
你会发现自己不得不将状态提升到共同的父组件，然后通过 props 一层一层地向下传递（这叫 “Props drilling”），或者使用 Context API 配合 useReducer。但当多个状态之间存在复杂的交互，或者状态更新的逻辑散落在各处时，代码会迅速变得难以理解和维护。
Redux 就是为了解决这类问题而生的。 它是一个强大的状态容器，提供可预测化的状态管理，让组件的通信不再依赖于上下级关系，任何组件都可以自由地获取和触发全局状态的改变。本文将深入探讨如何使用 Redux 来实现多个组件间的通信，并高效地管理多个组件使用的相同状态。
一、核心概念回顾：理解 Redux 的三驾马车
在深入多组件通信之前，我们必须快速回顾 Redux 的核心概念，这是理解其如何工作的基石。
1. Store (仓库)
- 是什么？ 唯一的数据源，一个存储整个应用状态的 JavaScript 对象。
- 特点： 整个应用有且仅有一个 Store。它是“唯一的真相来源（Single Source of Truth）”。
2. Action (动作)
- 是什么？ 一个普通的 JavaScript 对象，用于描述“发生了什么”的意图。它是改变 State 的唯一途径。
- 结构： 必须包含一个
type字段来表示动作类型，其他字段用来传递数据（通常放在payload字段中）。// 一个典型的 Action const addTodoAction = { type: 'todos/todoAdded', payload: 'Buy milk' // 传递的数据 };
3. Reducer (纯函数)
- 是什么？ 一个纯函数，它接收当前的
state和一个action对象，决定如何更新状态，并返回一个新的状态。 - 核心原则：
- 不得修改旧 state： 必须返回一个全新的 state。
- 必须是纯函数： 同样的输入，必定得到同样的输出。不能执行异步逻辑或产生副作用（如 API 调用）。
数据流（One-Way Data Flow）： Redux 的数据流是严格单向的，这也是其可预测性的关键。
- 组件中
dispatch一个action。 - Store 调用 Reducer，传入当前 state 和收到的 action。
- Reducer 处理 action 并返回新的 state。
- Store 保存新的 state，并通知所有订阅了 store 的组件。
- 组件从 store 中获取更新后的 state，并重新渲染。
(图片来源：Redux 官方文档)
二、实战：多组件通信与共享状态管理
让我们通过一个经典的 “待办事项（Todo List）” 应用来具体说明。这个应用包含多个组件，它们都需要与同一个状态（todos 列表）进行交互。
<TodoList />: 显示所有的待办事项。<AddTodo />: 一个输入框和按钮，用于添加新的待办事项。<TodoItem />: 单个待办事项的展示，可以切换完成状态或删除。<Footer />: 显示未完成事项的数量，并提供筛选器（全部/活跃/已完成）。
所有这些组件都需要读取和修改 todos 状态。
步骤 1：定义 State 和 Action Types
首先，我们设计状态的结构和可能发生的动作。
State 形状 (State Shape):
{
todos: [
{ id: 1, text: 'Learn React', completed: true },
{ id: 2, text: 'Learn Redux', completed: false },
{ id: 3, text: 'Build something awesome!', completed: false }
],
visibilityFilter: 'SHOW_ALL' // 可选值: 'SHOW_ALL', 'SHOW_ACTIVE', 'SHOW_COMPLETED'
}
Action Types:
// todos 相关的 Action
const ADD_TODO = 'ADD_TODO';
const TOGGLE_TODO = 'TOGGLE_TODO';
const DELETE_TODO = 'DELETE_TODO';
// filter 相关的 Action
const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';
步骤 2：创建 Action Creators
Action Creators 是创建 action 对象的函数，使得在组件中 dispatch 更加方便。
// actionCreators.js
let nextTodoId = 0;
export const addTodo = (text) => ({
type: ADD_TODO,
payload: {
id: nextTodoId++,
text,
completed: false
}
});
export const toggleTodo = (id) => ({
type: TOGGLE_TODO,
payload: { id }
});
export const deleteTodo = (id) => ({
type: DELETE_TODO,
payload: { id }
});
export const setVisibilityFilter = (filter) => ({
type: SET_VISIBILITY_FILTER,
payload: { filter }
});
步骤 3：编写 Reducer
Reducer 指定状态如何更新。
// reducers.js
import { combineReducers } from 'redux';
// Todos Reducer
const todosInitialState = [];
const todosReducer = (state = todosInitialState, action) => {
switch (action.type) {
case ADD_TODO:
return [...state, action.payload]; // 返回新数组，添加新项
case TOGGLE_TODO:
return state.map(todo =>
todo.id === action.payload.id ? { ...todo, completed: !todo.completed } : todo
); // 返回新数组，修改特定项
case DELETE_TODO:
return state.filter(todo => todo.id !== action.payload.id); // 返回新数组，过滤掉特定项
default:
return state;
}
};
// Filter Reducer
const visibilityFilterInitialState = 'SHOW_ALL';
const visibilityFilterReducer = (state = visibilityFilterInitialState, action) => {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return action.payload.filter;
default:
return state;
}
};
// 使用 combineReducers 合并多个 reducer
// 最终 state 的形状为 { todos: ..., visibilityFilter: ... }
const rootReducer = combineReducers({
todos: todosReducer,
visibilityFilter: visibilityFilterReducer
});
export default rootReducer;
步骤 4：创建 Store
// store.js
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;
步骤 5：连接 React 组件（使用 React-Redux）
现在，关键的来了！我们如何让 React 组件与 Redux Store 通信？我们需要 react-redux 这个官方绑定库。
首先，用 <Provider> 包裹你的根组件，它将 store 传递给所有子组件。
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
然后，在任何一个需要与 store 交互的子组件中，使用 connect 函数或 useSelector/useDispatch Hooks。
方法 A：使用 useSelector 和 useDispatch Hooks (推荐)
这是现代 React Redux 应用的首选方式，代码更简洁。
<AddTodo> 组件 (发送 Action):
// AddTodo.js
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { addTodo } from './actionCreators';
const AddTodo = () => {
const [inputValue, setInputValue] = useState('');
const dispatch = useDispatch(); // 获取 dispatch 函数
const handleSubmit = (e) => {
e.preventDefault();
if (inputValue.trim()) {
dispatch(addTodo(inputValue)); // 分发 Action！
setInputValue('');
}
};
return (
<form onSubmit={handleSubmit}>
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button type="submit">Add Todo</button>
</form>
);
};
export default AddTodo;
<TodoList> 组件 (读取 State 和 发送 Action):
// TodoList.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import TodoItem from './TodoItem';
import { toggleTodo, deleteTodo } from './actionCreators';
const TodoList = () => {
// 1. 从 Redux Store 中读取状态
// useSelector 接受一个选择器函数，其参数是整个 state
const todos = useSelector(state => state.todos);
const visibilityFilter = useSelector(state => state.visibilityFilter);
const dispatch = useDispatch();
// 根据筛选条件过滤 todos
const getVisibleTodos = () => {
switch (visibilityFilter) {
case 'SHOW_COMPLETED':
return todos.filter(t => t.completed);
case 'SHOW_ACTIVE':
return todos.filter(t => !t.completed);
case 'SHOW_ALL':
default:
return todos;
}
};
const visibleTodos = getVisibleTodos();
// 2. 在需要时 dispatch action
const handleToggle = (id) => {
dispatch(toggleTodo(id));
};
const handleDelete = (id) => {
dispatch(deleteTodo(id));
};
return (
<ul>
{visibleTodos.map(todo => (
<TodoItem
key={todo.id}
todo={todo}
onToggle={handleToggle}
onDelete={handleDelete}
/>
))}
</ul>
);
};
export default TodoList;
<Footer> 组件 (读取和发送 Action):
// Footer.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { setVisibilityFilter } from './actionCreators';
const Footer = () => {
const todos = useSelector(state => state.todos);
const dispatch = useDispatch();
const unfinishedCount = todos.filter(t => !t.completed).length;
const handleFilterChange = (newFilter) => {
dispatch(setVisibilityFilter(newFilter));
};
return (
<div>
<span>{unfinishedCount} items left</span>
<button onClick={() => handleFilterChange('SHOW_ALL')}>All</button>
<button onClick={() => handleFilterChange('SHOW_ACTIVE')}>Active</button>
<button onClick={() => handleFilterChange('SHOW_COMPLETED')}>Completed</button>
</div>
);
};
export default Footer;
通信是如何发生的？
<AddTodo>组件dispatch(addTodo(text))。- Store 将当前 state 和这个 action 交给
todosReducer。 todosReducer看到ADD_TODO类型，返回一个包含了新待办项的新 todos 数组。- Store 的状态更新了。
- Store 通知所有订阅的组件（即所有使用了
useSelector的组件）。 <TodoList>和<Footer>组件中的useSelector会检查它们所依赖的 state 部分是否发生了变化。<TodoList>依赖state.todos和state.visibilityFilter，它们变了，所以<TodoList>会重新渲染。<Footer>依赖state.todos，它也变了，所以<Footer>也会重新渲染，更新未完成事项的数量。
- 用户界面保持同步。
三、最佳实践与高级技巧
1. 结构化与模块化 (Redux Ducks)
随着应用变大，你应该按功能域（feature）来组织代码，而不是按类型（reducers, actions, etc.）。这就是所谓的“Ducks”模式。一个 duck 通常包含一个 slice 的 state 相关的 reducer、action types、action creators。
2. 使用 Redux Toolkit (RTK) - 官方标配
手动编写所有模板代码非常繁琐。Redux Toolkit 是 Redux 官方推荐的、包含电池的工具集，它极大地简化了 Redux 的逻辑。
createSlice: 自动生成 action types 和 action creators，并允许你“突变”地编写 reducer 逻辑（它内部使用 Immer 库，保证实际上是不可变的）。configureStore: 简化 store 设置，默认集成 Redux DevTools 和 redux-thunk 中间件。
用 Redux Toolkit 重写上面的例子：
// todosSlice.js
import { createSlice } from '@reduxjs/toolkit';
const todosSlice = createSlice({
name: 'todos',
initialState: [],
reducers: { // 这里的 reducers 是一个对象，每个字段都是一个 case reducer
// 无需手动生成 action type 和 creator
// 在这里可以直接“改变”state，因为 Immer 在幕后工作
addTodo: (state, action) => {
state.push({
id: Date.now(), // 简单生成 ID
text: action.payload,
completed: false
});
},
toggleTodo: (state, action) => {
const todo = state.find(t => t.id === action.payload);
if (todo) {
todo.completed = !todo.completed;
}
},
deleteTodo: (state, action) => {
return state.filter(todo => todo.id !== action.payload); // 也可以返回新值
}
}
});
// 自动生成了 action creators: todosSlice.actions.addTodo, etc.
export const { addTodo, toggleTodo, deleteTodo } = todosSlice.actions;
export default todosSlice.reducer; // 导出 reducer
在组件中，你可以直接导入并使用这些自动生成的 action creators。Redux Toolkit 让代码更简洁，更不易出错。
3. 性能优化：避免不必要的重渲染
useSelector 默认使用 === 严格相等比较来检查上次结果和本次结果。如果返回的引用不同，组件就会重渲染。
- 问题： 如果
useSelector返回一个新创建的对象（例如useSelector(state => ({ todos: state.todos, filter: state.filter }))），每次都会导致重渲染，即使todos和filter没变。 - 解决：
- 多次调用
useSelector，每次返回一个原始值。 - 使用记忆化的 Reselect 库创建“记忆化选择器（memoized selectors）”，只有在输入参数变化时才重新计算。
- 多次调用
4. 处理异步逻辑：使用中间件
Reducer 必须是纯函数，那么 API 调用等异步操作放在哪里？
答案是使用 Redux 中间件（Middleware）。最常用的是 redux-thunk。
- Thunk： 它是一个函数，包装了表达式以延迟其求值。在 Redux 中，thunk 是一个返回另一个函数（接收
dispatch和getState）的 action creator。// 一个 thunk action creator const fetchUserData = (userId) => { // 返回一个 thunk 函数 return async (dispatch, getState) => { dispatch({ type: 'USER_DATA_REQUEST' }); try { const response = await api.fetchUser(userId); dispatch({ type: 'USER_DATA_SUCCESS', payload: response }); } catch (error) { dispatch({ type: 'USER_DATA_FAILURE', payload: error }); } }; }; // 在组件中 dispatch dispatch(fetchUserData(123));createAsyncThunkAPI 可以进一步简化这个过程。
四、总结
Redux 为多组件通信和共享状态管理提供了一个清晰、可预测、可扩展的解决方案。
- 多组件通信： 组件不再直接相互对话。它们通过
dispatch(action)向 Store 发送意图，并通过useSelector订阅状态的更新。Store 作为中央枢纽，协调所有更改和通知。 - 共享状态管理： 所有状态集中于唯一的 Store 中，成为“唯一的真相来源”。任何需要该状态的组件都可以直接订阅它，避免了 Props drilling 和状态同步的噩梦。
虽然 Redux 需要学习一定的概念和模板代码，但其带来的好处在复杂应用中是不可替代的：状态变化可追溯（配合 Redux DevTools）、易于测试、逻辑与UI分离。对于中小型项目，你可能不需要 Redux（Context API 或许足够），但对于大型、数据驱动型的应用，Redux 仍然是状态管理的黄金标准。
拥抱 Redux，尤其是与 Redux Toolkit 结合使用，将极大地提升你的开发体验和应用的可维护性。
进一步学习：
希望这篇详尽的指南能帮助你彻底掌握 Redux 在多组件通信和状态管理中的运用！如有疑问，欢迎在评论区留言讨论。
