当前位置：首页 > news >正文

redux 数据流通的过程？

news 2025/12/16 5:43:50

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>);
}

按下按钮：