当前位置：首页 > news >正文

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

news 来源：原创 2025/6/13 8:28:43

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

🧠 实现思路

使用 createContext 创建两个上下文：StateContext 和 DispatchContext。
用 useReducer 管理状态逻辑。
创建一个 Provider 组件包裹应用。
提供两个 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;