Сегодня я покажу вам одну фишку, которую часто недооценивают — как упростить управление глобальным состоянием с помощью Context + useReducer.

🧠 Многие сразу тянут в проект Redux или Zustand, но это не всегда нужно. Если у вас приложение небольшое или средней сложности — useReducer + Context может закрыть все ваши нужды.

Вот пример мини-хранилища:


// counterContext.tsx
import { createContext, useReducer, useContext, ReactNode } from 'react';

const CounterContext = createContext(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 (

{children}

);
};

export const useCounter = () => useContext(CounterContext);


А вот как использовать:


// App.tsx
import { CounterProvider, useCounter } from './counterContext';

function Counter() {
const { state, dispatch } = useCounter();

return (

Count: {state.count}
dispatch({ type: 'increment' })}>+
dispatch({ type: 'decrement' })}>-

);
}

export default function App() {
return (



);
}


🎯 Такой подход помогает:
- Локализовать логику
- Избежать лишних зависимостей
- Делать масштабирование более контролируемым

Если в будущем нужно будет вынести логику в отдельные модули или добавить middlewares — это тоже можно сделать!

А вы как решаете глобальное состояние в небольших проектах? Используете кастомные хуки, Zustand или всё же Redux?

📲 Мы в MAX

✍️ @React_lib