À propos de ce tutoriel
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