【React】使用 useContext + useReducer 实现一个轻量的状态管理库

使用 useContext + useReducer 实现的轻量级状态管理，适合中小型 React 应用使用。

---

🧠 实现思路

1. 使用 createContext 创建两个上下文：StateContext 和 DispatchContext。
2. 用 useReducer 管理状态逻辑。
3. 创建一个 Provider 组件包裹应用。
4. 提供两个 hooks：useGlobalState() 和 useGlobalDispatch()，分别获取状态和派发方法。

---

✅ 示例代码

1️⃣ 创建状态管理库：store.js

import React, { createContext, useReducer, useContext } from 'react';

// 定义初始状态
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}`);
  }
}

// 创建两个上下文
const StateContext = createContext(null);
const DispatchContext = createContext(null);

// 创建 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;

---

🧩 优点

• 不依赖第三方库（如 Redux、Zustand）
• 轻量、易用、类型安全（可结合 TS）
• 适合中小项目