tgoop.com/React_lib/668
Create:
Last Update:
Last Update:
Сегодня я покажу вам одну фишку, которую часто недооценивают — как упростить управление глобальным состоянием с помощью 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
BY React
Share with your friend now:
tgoop.com/React_lib/668