Redux 数据流通的完整过程（单向数据流）
Redux 的核心思想就是：状态只存在一个地方，所有变化都是可预测的、可追踪的，并且遵循单向数据流。
下面是完整流程，从 UI 到 Action → Reducer → Store → UI：
1. UI 触发 Action
UI（React 组件）中用户操作，触发一个 action：
dispatch({type: 'ADD_TODO',payload: '学习 Redux'
})
也可能是通过 action creator：
dispatch(addTodo('学习 Redux'));
Action 只是一个普通对象，描述“发生了什么”。
2. dispatch(action) 发送给 Store
dispatch() 是唯一触发状态更新的方式。
Redux 接到 action 后，会把它交给 reducer 处理。
3. Reducer 根据 Action 更新 State（纯函数）
Reducer 是一个纯函数：
(state, action) => newState
示例：
function todoReducer(state = initialState, action) {switch (action.type) {case 'ADD_TODO':return {...state,list: [...state.list, action.payload]};default:return state;}
}
Reducer 不能修改原 state，只能返回新 state。
4. Store 保存新 State
Redux Store 接收到 reducer 产出的 newState
覆盖原 state
保存最新的全局状态
5. UI（React）重新渲染
React-Redux（connect / useSelector）会订阅 store：
当 store 改变时：
- 自动触发组件重新渲染
- UI 更新为最新数据
举例：
const todos = useSelector(state => state.todos);
当 state 更新时，该组件会自动刷新。
Redux 数据流闭环：
UI 触发事件↓dispatch(action)↓Reducer 计算新 state↓Store 更新状态↓
React UI 自动刷新
全程 单向数据流（One-way data flow）
状态变化可追溯
数据管理可控、稳定
简单举例（完整流程）
// 1. Action Creators
const add = () => ({ type: 'ADD' });// 2. Reducer
function counter(state = 0, action) {switch (action.type) {case 'ADD':return state + 1;default:return state;}
}// 3. Component
function App() {const count = useSelector(state => state.counter);const dispatch = useDispatch();return (<button onClick={() => dispatch(add())}>点击 +1 （{count}）</button>);
}
按下按钮：
- dispatch(send action)
- reducer(state + 1)
- store 更新
- UI 自动刷新
总结
Redux 数据流就是 5 步：
-
用户操作 → dispatch(action)
-
Store 接收 action
-
Reducer 返回新 state
-
Store 保存 state
-
React UI 自动刷新
关键词：单向数据流、可预测性、纯函数 reducer、集中式 store
