React 18 学习笔记与 Redux 纯函数

一句话：React 核心三件事 — 组件、状态、副作用；Redux reducer 必须纯函数。

学习资源

工程配置

• CRA + craco：扩展 webpack 而不 eject
• Redux 栈：RTK + redux-persist + 中间件（redux-thunk 处理异步；与 redux-promise 二选一即可）

常见问题

1. useEffect 无限循环

必须传依赖数组；缺省则每次 render 都执行。

useEffect(() => {
  fetchData();
}, [id]); // 仅 id 变时重跑

2. reducer 为何必须是纯函数？

Redux 单向数据流：dispatch(action) → reducer(state, action) → newState。

纯函数要求：相同输入 → 相同输出，无副作用。因此 reducer 内禁止：

• 修改 state 参数（应 { ...state, token }）
• API 请求、路由跳转
• Date.now() / Math.random() 等非确定性逻辑

异步放在 thunk 或 RTK createAsyncThunk。

const global = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_TOKEN':
      return { ...state, token: action.token };
    default:
      return state;
  }
};

RTK 内部用 Immer，写法上可「突变 draft」，语义仍应保持纯函数。

与 Vue 对照

小结

• 先掌握函数组件 + Hooks，再碰 Redux
• 全栈对照可看 Next.js 学习路线

延伸阅读

• Redux 风格指南