---

前言

在 React 開發中，useReducer 是管理復雜狀態邏輯的利器。它類似于 Redux 的簡化版，允許我們將狀態更新邏輯抽離為獨立的 reducer 函數，提升代碼的可讀性和可維護性。本文將深入探討手寫 React 中的 Reducer，從原理到實踐，幫助你徹底掌握這一核心概念。

一、為什么需要 Reducer？

1. 狀態邏輯集中化：將狀態更新邏輯從組件中抽離，避免狀態更新邏輯分散。
2. 可預測性：通過純函數（Reducer）處理狀態，確保狀態變化可追蹤。
3. 復雜狀態管理：適合處理嵌套對象或數組等復雜狀態。
4. 性能優化：減少不必要的渲染（結合 React.memo 或 useMemo）。

二、Reducer 的核心概念

1. Reducer 函數

Reducer 是一個純函數，接收兩個參數：

• state：當前狀態。
• action：描述狀態變化的動作（包含 type 和 payload）。

	type State = { count: number };type Action = { type: 'INCREMENT' } | { type: 'DECREMENT' };const reducer = (state: State, action: Action): State => {switch (action.type) {case 'INCREMENT':return { count: state.count + 1 };case 'DECREMENT':return { count: state.count - 1 };default:throw new Error('未知 action 類型');}};

2. useReducer 鉤子

React 提供的 useReducer 鉤子用于在組件中使用 Reducer：

	const [state, dispatch] = useReducer(reducer, initialState);

• state：當前狀態。
• dispatch：觸發狀態更新的函數（發送 action）。

三，手寫react中的useReducer

reducer中的dispatch觸發就是在setState（更新我們傳入的reducer返回的最新狀態值）

// useReducer 分貝要傳入一個reducder函數和初始數據
import { useState } from "react";
export function useReducer<T, D>(reducer: (state: T, action: D) => T,initialState: T
) {const [state, setState] = useState(initialState);const dispatch = (action: D) => {setState(reducer(state, action));};return [state, dispatch] as const;
}

使用示例：
結合了useContext

import type { IConfig } from "../data/data";
import { useReducer } from "./utils/reducer/myReducer";interface Action {type: "set" | "get";key: keyof IConfig;value: string;
}// 我們的具體邏輯實現const configReducer = (state: IConfig, action: Action) => {switch (action.type) {case "get":return state;case "set":return { ...state, [action.key]: action.value };default:return state;}
};type IConfig = typeof data;const data = {title: "小路",content: "小瑪麗，小馬路，小瑪麗，小馬路",
};const App = () => {// 使用我們自己的useReducerconst [config, dispatch] = useReducer(configReducer, data);return (<div><ConfigContext value={{ config, dispatch }}><ToodList /></ConfigContext></div>);
};export default App;

總結

本文深入解析React中的useReducer原理與實踐，從狀態管理需求出發，闡述Reducer的核心優勢：邏輯集中化、狀態可預測性及復雜狀態處理能力。通過代碼示例演示Reducer純函數結構（接收state/action參數）和useReducer鉤子用法，并重點實現自定義useReducer：利用useState存儲狀態，通過dispatch觸發更新。文章結合useContext展示完整應用場景，呈現如何用Reducer模式構建可維護的狀態管理方案。（149字）