Redux 的结构和工作流
Redux structure and workflow
一句话：单向环—— view 派发 action → 中间件处理 → reducer 算出新 state → store 更新 → 订阅的组件重渲染。
五个角色：
- store——唯一的状态容器， 提供
getState/dispatch/subscribe。 - action——描述「发生了什么」的普通对象，必须有
type。它只描述，不做事。 - reducer——
(state, action) => newState，必须是纯函数。 - middleware—— 在 action 到 reducer 之前拦一道（#354）。
- selector—— 从 store 里挑出组件需要的那部分。
Redux Toolkit（RTK）改变了什么—— 必答，因为现在没人手写 Redux 了：
createSlice一次生成 reducer + action creators + action types， 样板代码少一大半。- 内置 Immer， 所以你可以写起来像在改
state.list.push(x)， 实际产出的是新对象—— 但要注意这只在createSlice里成立。 - 默认装好 thunk 和 DevTools。
createAsyncThunk管异步的三个状态 （pending / fulfilled / rejected）。
会追问：「为什么必须单向？」—— 因为状态变化的路径唯一， 所以出 bug 时可以从 action 记录里 倒推每一步。 双向绑定的框架里 「这个值到底是谁改的」经常查不清。
In one line: a one-way loop — the view dispatches an action, middleware handles it, a reducer computes the new state, the store updates, and the subscribed components re-render.
Five roles:
- store — the single container for state, exposing
getState,dispatchandsubscribe. - action — a plain object that describes what happened and must have a
type. It only describes; it does nothing. - reducer —
(state, action) => newState, and it has to be pure. - middleware — intercepts the action on its way to the reducer (#354).
- selector — picks the part of the store a component needs.
What Redux Toolkit (RTK) changed — you have to cover this, because nobody hand-writes Redux any more:
createSlicegenerates the reducer, the action creators and the action types at once, cutting more than half the boilerplate.- Immer is built in, so you can write what looks like a mutation —
state.list.push(x)— and still get a new object out. Just remember this only holds insidecreateSlice. - thunk and DevTools are wired up by default.
createAsyncThunkhandles the three async states (pending / fulfilled / rejected).
Follow-up: “Why does it have to be one-way?” — because there is exactly one path a change can take, so when something breaks you can walk back through the action log step by step. In a two-way binding framework, “who actually changed this value” is often unanswerable.