Les Reducers en React

Les reducers

Un reducer c'est une fonction qui prend en paramètre une action et un state et qui selon le contenu de cette action va retourner un nouveau state.

const reducer = (oldState, action) => {
    if(action === "ADD")
    {
        return oldState + 2;
    }
    else if(action === "SUB")
    {
        return oldState - 2;
    }
    else if(action === "MUL")
    {
        return oldState * 2;
    }
    else if(action === "DIV")
    {
        return oldState / 2;
    }
    else
    {
        return oldState % 2;
    }
}

Dans l'exemple ci-dessus, nous avons donc un reducer qui applique une opération mathématique différente sur le state en fonction de l'action qui lui est passée.

Les reducers sont un concept présent dans plein de projets JavaScript, avec ou sans React, c'est un mode d'organisation assez classique pour gérer les modifications d'un état quand celui-ci devient complexe.

Utiliser les reducers dans React

Dans React pour utiliser les reducers, nous allons utiliser le hook useReducer.

Il s'appelle de la façon suivante :

const [state, dispatch] = useReducer(reducer, initialState);

state c'est l'état de votre composant
dispatch c'est une fonction qui permet d'envoyer une action au reducer pour modifier l'état
reducer c'est votre fonction reducer
initialState c'est l'état initial de votre composant

Exemple d'usage d'un reducer

Imaginons que nous avons un compteur : nous voulons pouvoir ajouter ou soustraire 1 à notre compteur en fonction de quel bouton est cliqué :

counterReducer.js

export const counterReducer = (state, action) => {
    if(action.type === "INC")
    {
        return { count : state.count + 1};
    }
    else if(action.type === "DEC")
    {
        return { count : state.count - 1};
    }
    else
    {
        return {count: 0};
    }
}

Dans le fichier ci-dessus, nous avons notre reducer : il reçoit le state et l'objet action et en fonction du contenu de l'action, il renvoie un nouveau state.

Counter.jsx

import { useReducer } from 'react';
import { counterReducer } from './counterReducer.js'

const Counter = () => {
    const [state, dispatch] = useReducer(counterReducer, {count: 0});

    function plus()
    {
        dispatch({type: "INC"});
    }

    function minus()
    {
        dispatch({type: "DEC"});
    }

    return (
        <>
            <button onClick={minus}> - </button>
            <p>{ state.count }</p>
            <button onClick={plus}> + </button>
        </>
    );
};

export default Counter;

Notre composant lui, initialise le useReducer et appelle la fonction dispatch pour indiquer au reducer ce qu'il doit faire.

03 February 2026