Le hook useReducer — Formation Apprendre React

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