`Hook-ul useReducer în React` în React & Next.js

Ghid complet pentru useReducer în React: gestionarea stărilor complexe cu acțiuni tipizate și funcții reducer pure inspirate din Redux.

Sintaxă

const [state, dispatch] = useReducer(reducer, initialArg);

Când starea unei componente devine complexă (multiple sub-valori dependente sau fluxuri de tranziție de tip mașină de stări), useReducer oferă o separare curată între declanșarea acțiunilor (dispatch) și logica de transformare a stării.

Implementare useReducer cu Acțiuni Tipizate

type State = { count: number };
type Action = { type: 'increment' } | { type: 'decrement' } | { type: 'reset' };

function counterReducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    case 'reset': return { count: 0 };
  }
}