Сегодня я покажу вам одну фишку, которую часто недооценивают — как упростить управление... — 14 апреля 2026 г. в 13:27:41.714
Сегодня я покажу вам одну фишку, которую часто недооценивают — как упростить управление глобальным состоянием с помощью Context + useReducer. 🧠 Многие сразу тянут в проект Redux или Zustand, но это не всегда нужно. Если у вас приложение небольшое или средней сложности — useReducer + Context может закрыть все ваши нужды. Вот пример мини-хранилища: // counterContext.tsx import { createContext, useReducer, useContext, ReactNode } from 'react'; const CounterContext = createContext<any>(null); const initialState = { count: 0 }; function reducer(state: typeof initialState, action: { type: string }) { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count - 1 }; default: return state; } } export const CounterProvider = ({ children }: { children: ReactNode }) => { const [state, dispatch] = useReducer(reducer, initialState); return ( <CounterContext.Provider value={{ state, dispatch }}> {children} </CounterContext.Provider> ); }; export const useCounter = () => useContext(CounterContext); А вот как использовать: // App.tsx import { CounterProvider, useCounter } from './counterContext'; function Counter() { const { state, dispatch } = useCounter(); return ( <div> <p>Count: {state.count}</p> <button onClick={() => dispatch({ type: 'increment' })}>+</button> <button onClick={() => dispatch({ type: 'decrement' })}>-</button> </div> ); } export default function App() { return ( <CounterProvider> <Counter /> </CounterProvider> ); } 🎯 Такой подход помогает: - Локализовать логику - Избежать лишних зависимостей - Делать масштабирование более контролируемым Если в будущем нужно будет вынести логику в отдельные модули или добавить middlewares — это тоже можно сделать! А вы как решаете глобальное состояние в небольших проектах? Используете кастомные хуки, Zustand или всё же Redux? ✍️ @React_lib