Le hook useReducer

13min
il y a 2 ans
Télécharger la vidéo
Résumé Support

Le hook useReducer est un hook qui va permettre de représenter des changement d'état complexes à l'aide d'un réducteur. Le réducteur est une fonction qui reçoit en paramètre l'état et l'action à effectuer et qui doit renvoyer une nouvelle version de l'état.

function reducer(state, action) { switch (action.type) { case 'REMOVE_TODO': { return { todos: state.todo.filter(t => t !== action.todo) }; }; case 'ADD_TODO': { return { todos: [{ id: state.todos.length, text: action.text }, ...state.todos] } } } throw Error('Action non reconnue: ' + action.type); }

Ce réducteur sera utilisé par useReducer()

function MonComposant () { const [state, dispatch] = useReducer(reducer, { todos: [] }) }

La fonction dispatch permettra de demander un changement d'état compris par le réducteur.

<button onClick={dispatch({type: 'ADD_TODO', text: 'Ma nouvelle tâche'})}> Ajouter </button>

Pour plus d'exemples, n'hésitez pas à vous rendre sur la documentation de useReducer