你怎么理解redux的state的?
state 是 Redux 的核心概念之一
一句话理解
Redux 的 state 是应用的“单一数据源(Single Source of Truth)”。
它就像是整个应用的“中央数据库”,保存了当前应用中所有需要共享的状态。
所有组件都可以从它那里读取数据、订阅变化,但不能直接修改它。
举个例子
假设你有一个购物车应用:
{
user: { name: "yh", loggedIn: true },
cart: { items: [ { id: 1, name: "苹果", qty: 3 } ], total: 30 },
ui: { loading: false }
}
上面这一整个对象就是 Redux 的 state 树(state tree)。
无论是登录状态、购物车数据,还是界面状态,都在这个 单一对象 中统一管理。
Redux state 的 3 个特征
唯一性
整个应用只有一个 store(即一个 state 树):
const store = createStore(reducer);
这样可以保证:
-
数据源唯一;
-
调试和追踪简单;
-
状态变化可预测。
只读
你不能直接改 state:
store.getState().count = 10; // ❌ 错的!
必须通过 action 来描述“发生了什么”:
store.dispatch({ type: 'INCREMENT' });
然后通过 reducer 返回新的 state:
function counter(state = { count: 0 }, action) {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 }
default:
return state
}
}
Redux 内部会用这个新对象替换旧的 state(不可变更新)。
可追踪
每一次 state 的变化都是由一个 action 引起的,所以:
-
可以回溯历史(time travel debugging);
-
可以记录日志;
-
可以在 devtools 中看到整个变化过程。
这也是 Redux 非常强大的地方。
简单类比
| 对象 | 在 Redux 中的角色 | 作用 |
|---|---|---|
| 数据库 | state | 保存所有数据 |
| SQL 语句 | action | 描述“要干什么” |
| 数据库触发器 | reducer | 具体实现修改逻辑 |
| 数据订阅 | store.subscribe | 通知组件更新 |
总结
Redux 的 state 是整个应用的唯一数据源,
是一个不可直接修改的对象,
所有变化都必须通过 action → reducer → new state 的流程产生。
浙公网安备 33010602011771号