Préparer les contrôles et l'EFM

Avec Redux Toolkit, crée la gestion d'une bibliothèque :

1. la slice livres : état { items: [], loading: false, error: "" }, reducers ajouterLivre({ titre, auteur }) (id avec nanoid), supprimerLivre(id), basculerEmprunt(id) (le champ emprunte passe de false à true et inversement) ;
2. un thunk chargerLivres avec createAsyncThunk qui charge https://jsonplaceholder.typicode.com/posts?_limit=5 et transforme chaque post en livre { id, titre: post.title, auteur: "Auteur " + post.userId, emprunte: false } ;
3. le store avec configureStore et le Provider ;
4. le composant Bibliotheque : un formulaire contrôlé d'ajout, la liste (le titre barré si le livre est emprunté), les boutons « Emprunter / Rendre » et « Supprimer », le nombre de livres disponibles (sélecteur dans selectors.js), le chargement automatique au montage, le message de chargement et l'erreur en rouge.

Le jour du contrôle

• Je relis l'énoncé et je repère les composants à créer avant d'écrire du code
• Je mets une key à chaque élément créé par map
• Je ne modifie jamais l'état directement (setX, setState, spread, filter)
• J'écris onClick={f} ou onClick={() => f(x)}
• Je n'oublie pas e.preventDefault() dans onSubmit
• J'importe ce que j'utilise (useState, useEffect, axios, Link…)

Crée le composant classe Panier qui reçoit en props produits = [{ id, nom, prix }]. Son état contient quantites (un objet { id: quantité }, vide au départ). Chaque produit a un bouton « + » qui ajoute 1 à sa quantité (sans modifier l'ancien objet). En bas, le composant affiche le total (somme prix × quantité, avec reduce). Si le total dépasse 1000 DH, il affiche « Livraison gratuite ».

Crée une application avec React Router : la page / affiche la liste des utilisateurs de https://jsonplaceholder.typicode.com/users (chargés avec axios dans useEffect), avec un champ de recherche contrôlé qui filtre par nom ; chaque nom est un Link vers /users/:id, qui affiche le détail (email, téléphone, ville) chargé avec fetch. Les deux pages affichent « Chargement… » pendant la requête.