Redux 核心原则

一句话：全局状态管理

Redux 就是把所有状态都放到一个"仓库"里，所有组件都从这个仓库读取数据。

三大原则

1. 单一数据源

整个应用只有一个 Store，所有状态都放在这里。

好处：调试方便，可以随时"时间旅行"回滚状态。

2. State 是只读的

不能直接改 State，只能通过 Action 来"描述发生了什么"。

// ❌ 直接改
state.count = 1;

// ✅ 派发 Action
dispatch({ type: "INCREMENT" });

3. Reducer 是纯函数

Reducer 接收旧 State 和 Action，返回新 State。不能有副作用。

function counter(state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1; // 返回新状态
    default:
      return state;
  }
}

工作流程

  1. View 点按钮，dispatch(action)
  2. Middleware 拦截 action，处理副作用（比如发请求），处理完再 dispatch 新 action
  3. Reducer 接收 action，计算新 State
  4. Store 更新，通知 View 重渲染

现在怎么用？Redux Toolkit

手写 Redux 太麻烦，现在官方推荐 Redux Toolkit (RTK)：

内置 Immer

可以直接写"可变式"代码，Immer 自动帮你转成不可变更新：

state.count += 1; // 看起来是修改，实际是 immutable

内置 Thunk

异步处理直接写：

const fetchUser = () => async (dispatch) => {
  const res = await fetch("/api/user");
  dispatch({ type: "SET_USER", payload: res });
};

代码少 90%

// 以前要写一堆：action types、action creators、reducer、store...
// 现在只需要：
const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
  },
});

总结

概念作用
Store唯一状态仓库
Action描述"发生了什么"
Reducer计算新 State
dispatch触发 Action
Redux Toolkit现在推荐这样用

记住：Redux 的本质就是"状态集中管理"，通过 Action -> Reducer -> State 这个单向流来更新数据。