Redux - 数据流

Redux - Data Flow（数据流）

Redux 强制执行严格的 unidirectional data flow（单向数据流）。这意味着应用中的数据始终沿一个方向流动，这使得逻辑可预测且更易于理解。它防止了可能在双向数据绑定中发生的复杂更新链和潜在的无限循环。

典型的 Redux 应用（特别是使用 React 等 UI 库的应用）中的数据流生命周期遵循以下步骤：

Redux Data Flow 循环

想象用户与你的应用进行交互，例如点击一个按钮。

1. 1. Action Dispatch（动作派发）： UI 中发生一个事件（例如，按钮点击）。事件处理程序调用 dispatch(action)。action 是一个描述发生了什么的普通对象（例如，{ type: 'todos/add', payload: 'Learn Redux' }）。
2. 2. Middleware（中间件）（可选）： 派发的 action 首先通过任何配置的 middleware。Middleware 可以拦截 action，执行 side effects（副作用）（例如 API 调用），派发其他 actions，或者在将 action 传递下去之前修改它。对于 asynchronous operations（异步操作），像 redux-thunk 这样的 middleware 允许派发处理异步逻辑并在完成后派发进一步 actions 的函数。
3. 3. Reducer Processing（处理器处理）： action（可能被 middleware 修改或延迟）到达 root reducer function（根处理器函数）。store 使用当前 state 和 action 调用 root reducer。
4. 4. State Update（状态更新）： root reducer（通常由更小的 slice reducers（分片处理器） 组成）根据 action type 确定 state 如何改变。它以 immutable（不可变） 的方式计算 next state（下一个状态）（这意味着对于 state 中任何改变的部分，它都会创建新的对象/数组）并返回它。如果没有 reducer 识别 action type，则返回当前 state 不变。
5. 5. Store Update（存储更新）： Redux store 保存 root reducer 返回的新 state。
6. 6. Listeners Notified（监听器通知）： store 通知所有注册的 listeners（监听器）（subscribed components（订阅的组件）） state 可能已更改。它调用提供给 store.subscribe() 的监听器函数。
7. 7. UI Update（UI 更新）： 连接到 Redux store 的 Components（组件）（例如，使用 react-redux 的 useSelector hook 或 connect）使用新 state 重新运行其 selector functions（选择器函数）。如果 selected data（选择的数据） 发生变化，component 会重新渲染以反映更新后的 state。

这个循环确保了：

• State 变化只能通过派发的 actions 来启动。
• State 转换由 reducers 集中且纯粹地处理。
• UI 始终反映 store 中的当前 state。

这种可预测的 flow 是 Redux 的主要优势之一，特别是在大型应用中，跟踪 state 变化可能会变得具有挑战性。

Data Flow 的文本表示

你可以将这个 flow 可视化为：

UI Event -> dispatch(action) -> [Middleware (optional)] -> Reducer(state, action) -> New State -> Store -> Notify Listeners -> UI Re-renders with New State