Exercices sur les Reducers

Le retour de la TodoList

Le but de ce projet est de vous faire refaire l'exercice de la ToDoList mais cette fois en utilisant les reducers. Votre projet, visuellement va ressembler à ceci :

Étape 0 : Préparer le projet

Créez un repository public avec un README sur GitHub, appelez-le bre05-react-j7
Clonez-le dans le dossier sites/react de votre IDE.
Dans le dossier bre05-react-j7:
- Créez un projet appelé todo-list avec npm-create-vite
- Videz le fichier src/index.css
- Remplacez le code du fichier App.css avec le code suivant :

body {
    font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
    background-color: #272822;
    color: #f8f8f2;
    display: flex;
    justify-content: center;
    padding-top: 60px;
    margin: 0;
}

.todo-container {
    background: #272822;
    width: 380px;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid #49483e;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

h1 {
    text-align: center;
    color: #a6e22e;
    margin-bottom: 2rem;
}

.todo-form {
    display: flex;
    gap: 10px;
    margin-bottom: 2rem;
}

.todo-form input {
    flex: 1;
    background: #3e3d32;
    border: 1px solid #49483e;
    border-radius: 4px;
    padding: 10px;
    color: #f8f8f2;
    outline: none;
}


.todo-form button {
    background: #f92672;
    color: #fff;
    border: none;
    padding: 0 15px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: filter 0.2s;
}

.todo-form button:hover {
    filter: brightness(1.2);
}


.todo-list {
    list-style: none;
    padding: 0;
}

.todo-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: #3e3d32;
    margin-bottom: 8px;
    border-radius: 4px;
}

.todo-item input[type="checkbox"] {
    accent-color: #66d9ef;
    margin-right: 12px;
}

.task-text {
    flex: 1;
    color: #f8f8f2;
}

.todo-item input:checked + .task-text {
    text-decoration: line-through;
    color: #75715e;
}


.delete-btn {
    background: transparent;
    color: #e6db74;
    border: 1px solid #e6db74;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
}

.delete-btn:hover {
    background: #e6db74;
    color: #272822;
}

Remplacez le contenu du fichier App.jsx par le code suivant :

import './App.css'

function App() {
    
  return (
    <>
      
    </>
  )
}

export default App

Étape 1 : Analyser le HTML

Observer le HTML suivant qui sera celui du projet :

<div class="todo-container">
    <h1>Ma Liste</h1>

    <form class="todo-form">
        <input type="text" name="task" placeholder="Nouvelle tâche..." required>
        <button type="submit">Ajouter</button>
    </form>

    <ul class="todo-list">
        <li class="todo-item">
            <input type="checkbox" id="task1">
            <label for="task1" class="task-text">Coder le design dark mode</label>
            <button class="delete-btn">&times;</button>
        </li>
        <li class="todo-item">
            <input type="checkbox" id="task2">
            <label for="task2" class="task-text">Préparer le café</label>
            <button class="delete-btn">&times;</button>
        </li>
        <li class="todo-item">
            <input type="checkbox" id="task3">
            <label for="task3" class="task-text">Dominer le monde (ou presque)</label>
            <button class="delete-btn">&times;</button>
        </li>
    </ul>
</div>

Essayez, à partir de ce HTML de déduire la liste des composants dont vous aurez besoin. Une fois que vous pensez avoir votre liste, envoyez-moi un message sur Discord pour que l'on valide ensemble.

Étape 2 : déterminer quel composant a besoin d'un state

Pour chacun de vos composants, déterminez s'il a besoin d'un state et si oui, ce que ce state doit contenir.

Pour déterminer si un composant a besoin d'un state, il faut regarder s'il y a des données qui changent dans le composant et qui doivent être gardées entre les rendus. Si ces données changent, c'est un state, sinon ce sont des props.

Étape 3 : déterminer les actions des composants

Pour chacun de vos composants, vous allez devoir déterminer quelles actions il peut faire : peut-il modifier le state ? Si oui comment ?

Étape 4 : créer le reducer

Maintenant que nous connaissons la structure du state et les actions qui peuvent intervenir dessus : nous pouvons créer notre reducer.

Dans un fichier src/listReducer.js, créez et exportez le reducer de votre To Do List.

Ensuite, utilisez useReducer pour utiliser votre reducer dans le composant approprié.

Étape 5 : passer les props aux composants

Vous allez maintenant devoir passer les bonnes informations à vos différents composants : transmettez les props aux composants qui en ont besoin. N'oubliez pas de transmettre également les fonctions de manipulation du state si besoin.

Étape 6 : les évènements

Certains de vos composants vont devoir manipuler des évènements : rajouter bien les appels de fonctions et les écouteurs d'évènements dans vos composants.

Étape 7 : testez votre application

Votre application devrait maintenant pouvoir fonctionner. Testez-la. Si certains comportements ne sont pas les bons, prenez-en note et cherchez dans les différentes étapes de conception ce qui ne se comporte pas comme prévu. Reyracez le parcours des informations et les valeurs contenues dans vos states en faisant des console.log là ou c'est nécéssaire.

04 February 2026