useContext、useReducer 組合使用
簡單來說，useContext + useReducer 是 React 內建的「全域狀態管理」，讓你不必一層一層傳遞資料，就能在任何元件中讀取和更新共用狀態。
想像你家大樓有一塊公佈欄（Context），上面寫著最新公告（state）。大樓裡的任何人出入時，都能直接看到公佈欄的內容，也能透過一份「申請表」（dispatch an action）來請求更新公告，而不用逐戶傳話。常見錯誤提醒
- 忘記用 Provider 包住元件樹：如果子元件外層沒有對應的 <Context.Provider>，useContext 就會拿到 createContext() 的預設值（若建立時未傳入參數，則為 undefined）。此時如果像範例程式碼一樣直接進行解構賦值（
const { state, dispatch } = ...），程式就會拋出 TypeError 導致畫面崩潰報錯。 - 在 reducer 裡直接修改舊 state：Reducer 必須回傳一個全新的物件，不能寫
state.count++這種直接修改的寫法，否則 React 偵測不到變化，畫面不會更新。
import { createContext, useContext, useReducer } from "react";
const Ctx = createContext(); // 建立 Context
function reducer(state, action) { // 定義 reducer：根據 action 回傳新 state
if (action.type === "ADD") return { count: state.count + 1 };
return state;
}
function Counter() {
const { state, dispatch } = useContext(Ctx); // 任何子元件都能直接取用
return <button onClick={() => dispatch({ type: "ADD" })}>Count: {state.count}</button>;
}
export default function App() {
const [state, dispatch] = useReducer(reducer, { count: 0 }); // 初始化狀態與 dispatch
return (
<Ctx.Provider value={{ state, dispatch }}> {/* 透過 Provider 廣播給所有子元件 */}
<Counter />
</Ctx.Provider>
);
}
