解释 Redux 的工作流

知识点图片

Redux 是一个用于 JavaScript 应用的可预测状态管理库，通常与 React 配合使用。它的核心思想是将整个应用的状态保存在一个单一的全局 store中，并通过严格的单向数据流来管理状态的更新。

下面是 Redux 的工作流程详解：

🌟 Redux 的三大原则

单一数据源（Single Source of Truth）：整个应用的状态存储在一个对象树中（即 Store）。
状态是只读的（State is Read-Only）：唯一改变状态的方式是触发一个 Action。
使用纯函数进行修改（Changes by Pure Functions）：通过 Reducer（纯函数）来返回新的状态。

🔁 Redux 工作流图（文字描述）

plaintext

View (UI) → Action → Dispatcher (Store.dispatch) → Reducer → State → View (updated UI)

🧱 Redux 的核心组成

Store：保存应用的所有状态。
Action：描述“发生了什么”的普通 JavaScript 对象，必须有一个 type 字段。
Reducer：根据当前状态和 action，返回新状态的纯函数。
Dispatch：发送 action 的方法（store.dispatch(action)）。
（可选）Middleware（如 redux-thunk、redux-saga）：处理异步逻辑或复杂副作用。

✅ Redux 工作流步骤详解

Step 1：用户操作触发事件

例如用户点击按钮、提交表单等，在组件中调用 dispatch()。

// Component.js
store.dispatch({ type: 'INCREMENT' });

Step 2：创建并分发 Action

Action 是一个包含 type 和（可选的）payload 的对象，用于描述要执行的操作。

const action = {
    type: 'ADD_TODO',
    payload: { text: 'Learn Redux' }
};
store.dispatch(action);

Step 3：Store 自动调用 Reducer

Redux Store 接收到 Action后，会将当前的 state和该 action传给 Reducer。

// reducer.js
function todoApp(state = initialState, action) {
    switch (action.type) {
        case 'ADD_TODO':
            return {
                ...state,
                todos: [...state.todos, action.payload]
            };
        default:
            return state;
    }
}

⚠️ Reducer必须是纯函数 ——不能修改原 state、不能有异步操作或副作用。

Step 4：生成新的 State并返回给 Store

Reducer根据action类型处理完逻辑后返回一个新的状态对象，Store会保存这个新的状态。

Step 5：通知视图更新（UI）

当 state发生变化时，React-Redux等绑定库会自动将最新的 state传递给组件，从而触发组件的重新渲染。

// mapStateToProps / useSelector()
const count = useSelector(state => state.count);

🔄总结流程图示：