State Reducer Pattern

React 🔴 Senior

Définition

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

Analogie

Comme un pilote automatique avec override : l'avion vole seul mais le pilote peut reprendre le contrôle 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 génériques ou l'utilisateur doit pouvoir overrider le comportement interne.

#patterns#advanced

← → au clavier pour passer d'une fiche à l'autre