State Reducer Pattern

React 🔴 Senior

Definition

Pattern qui permet au consommateur d'un composant de personnaliser les transitions d'etat en fournissant son propre reducer, fusionnant avec le comportement par defaut.

Analogie

Comme un pilote automatique avec override : l'avion vole seul mais le pilote peut reprendre le controle a tout moment.

Exemple de code

function useToggle({ reducer = defaultReducer } = {}) {
  const [state, dispatch] = useReducer(reducer, { on: false });
  const toggle = () => dispatch({ type: 'TOGGLE' });
  return { ...state, toggle };
}
// L'utilisateur peut injecter son reducer custom
const { on, toggle } = useToggle({
  reducer: (state, action) => action.type === 'TOGGLE' && tooMany ? state : defaultReducer(state, action)
});

Cas d'usage

Librairies/composants generiques ou l'utilisateur doit pouvoir overrider le comportement interne.

#patterns#advanced