>[danger]用useContext和useReducer模擬實現redux Redux 是 React 中常用的狀態管理庫，而 useContext 和 useReducer 是 React 內置的 Hooks 函數。這兩個 Hooks 函數結合起來可以模擬實現 Redux 的狀態管理功能。 下面是利用 useContext 和 useReducer 模擬實現 Redux 的簡單示例： 首先，我們需要創建一個全局的 Context 對象，用于存儲應用程序的狀態和操作方法： ```jsx // 創建全局的 Context 對象 const GlobalContext = React.createContext(); // 定義初始狀態和操作方法 const initialState = { count: 0 }; function reducer(state, action) { switch (action.type) { case 'INCREMENT': return { count: state.count + 1 }; case 'DECREMENT': return { count: state.count - 1 }; default: throw new Error(); } } ``` 接著，我們可以使用 useReducer 函數創建一個狀態管理器，并將它掛載到 Context 上： ```jsx // 在全局 Context 中使用 useReducer 函數創建狀態管理器 function GlobalProvider({ children }) { const [state, dispatch] = useReducer(reducer, initialState); return ( <GlobalContext.Provider value={{ state, dispatch }}> {children} </GlobalContext.Provider> ); } ``` 在組件中，我們可以使用 useContext 函數獲取全局的 Context 對象，然后進行狀態的讀取和修改： ```jsx // 在組件中使用 useContext 函數獲取全局的 Context 對象 function Counter() { const { state, dispatch } = useContext(GlobalContext); return ( <div> <p>Count: {state.count}</p> <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button> <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button> </div> ); } ``` 最后，在應用程序的根組件中，我們可以將 GlobalProvider 組件包裹在最外層，從而讓所有子組件都能夠獲取到全局的狀態和操作方法： ```jsx function App() { return ( <GlobalProvider> <Counter /> </GlobalProvider> ); } ``` 以上就是利用 useContext 和 useReducer 模擬實現 Redux 的簡單示例。需要注意的是，這只是一個簡單的示例，真正的 Redux 還包括了更多的功能和細節處理，例如異步操作、中間件等。