使用 useContext + useReducer 實現(xiàn)的輕量級狀態(tài)管理，適合中小型 React 應(yīng)用使用。

---

🧠 實現(xiàn)思路

1. 使用 createContext 創(chuàng)建兩個上下文：StateContext 和 DispatchContext。
2. 用 useReducer 管理狀態(tài)邏輯。
3. 創(chuàng)建一個 Provider 組件包裹應(yīng)用。
4. 提供兩個 hooks：useGlobalState() 和 useGlobalDispatch()，分別獲取狀態(tài)和派發(fā)方法。

---

? 示例代碼

1?? 創(chuàng)建狀態(tài)管理庫：store.js

import React, { createContext, useReducer, useContext } from 'react';// 定義初始狀態(tài)
const initialState = {count: 0,user: null,
};// 定義 reducer
function reducer(state, action) {switch (action.type) {case 'INCREMENT':return { ...state, count: state.count + 1 };case 'DECREMENT':return { ...state, count: state.count - 1 };case 'SET_USER':return { ...state, user: action.payload };default:throw new Error(`Unknown action type: ${action.type}`);}
}// 創(chuàng)建兩個上下文
const StateContext = createContext(null);
const DispatchContext = createContext(null);// 創(chuàng)建 Provider
export function GlobalProvider({ children }) {const [state, dispatch] = useReducer(reducer, initialState);return (<StateContext.Provider value={state}><DispatchContext.Provider value={dispatch}>{children}</DispatchContext.Provider></StateContext.Provider>);
}// 封裝 hooks
export function useGlobalState() {const context = useContext(StateContext);if (context === undefined) {throw new Error('useGlobalState must be used within a GlobalProvider');}return context;
}export function useGlobalDispatch() {const context = useContext(DispatchContext);if (context === undefined) {throw new Error('useGlobalDispatch must be used within a GlobalProvider');}return context;
}

---

2?? 使用示例

App.js

import React from 'react';
import { GlobalProvider } from './store';
import Counter from './Counter';
import User from './User';function App() {return (<GlobalProvider><h1>My App</h1><Counter /><User /></GlobalProvider>);
}export default App;

---

Counter.js

import React from 'react';
import { useGlobalState, useGlobalDispatch } from './store';function Counter() {const { count } = useGlobalState();const dispatch = useGlobalDispatch();return (<div><h2>Count: {count}</h2><button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button><button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button></div>);
}export default Counter;

---

User.js

import React from 'react';
import { useGlobalState, useGlobalDispatch } from './store';function User() {const { user } = useGlobalState();const dispatch = useGlobalDispatch();const login = () => {dispatch({ type: 'SET_USER', payload: { name: 'Heo Hao' } });};return (<div><h2>User: {user ? user.name : 'Guest'}</h2><button onClick={login}>Login</button></div>);
}export default User;

---

🧩 優(yōu)點

• 不依賴第三方庫（如 Redux、Zustand）
• 輕量、易用、類型安全（可結(jié)合 TS）
• 適合中小項目