在 Redux 中，“组件”通常指的是它的核心构成部分（即实现状态管理的几个关键模块），而不是 React 里的 UI 组件。Redux 体系主要由以下 5 大核心部分 组成
Redux 的核心组件
| 组件 | 作用 | 说明 |
|---|---|---|
| Store | 存储数据的地方 | 整个应用只有一个 Store，负责保存所有状态。 |
| Action | 描述“发生了什么” | 是一个普通对象，必须包含一个 type 字段（事件类型）。 |
| Reducer | 处理状态变化的纯函数 | 根据不同的 Action，返回新的 state。 |
| Dispatch | 分发 Action 的方法 | 触发状态更新的唯一方式，store.dispatch(action)。 |
| Subscriber（订阅者） | 监听 state 的变化 | 当 state 改变时，执行回调函数，比如刷新 UI。 |
数据流动示意（单向数据流）
UI 组件 → dispatch(action)↓Reducer(state, action)↓Store 更新 state↓UI 组件通过订阅获取新 state
React + Redux 常用辅助组件（结合使用）
当 Redux 和 React 一起用时，还会接触到以下“辅助组件/库”：
| 组件 / 函数 | 来自 | 作用 |
|---|---|---|
| Provider | react-redux |
用于把 Redux store 注入整个 React 组件树 |
| connect | react-redux |
高阶组件，用于连接 React 组件与 Redux store |
| useSelector | react-redux |
React hook，用于在函数组件中读取 state |
| useDispatch | react-redux |
React hook，用于在函数组件中分发 action |
| createStore | redux |
创建 Store |
| combineReducers | redux |
合并多个 reducer |
| applyMiddleware | redux |
添加中间件（如 redux-thunk、redux-saga） |
示例代码
// 1️⃣ 定义 action
const increment = () => ({ type: 'INCREMENT' });// 2️⃣ 定义 reducer
function counter(state = 0, action) {switch (action.type) {case 'INCREMENT':return state + 1;default:return state;}
}// 3️⃣ 创建 store
import { createStore } from 'redux';
const store = createStore(counter);// 4️⃣ 订阅变化
store.subscribe(() => console.log(store.getState()));// 5️⃣ 分发 action
store.dispatch(increment());