Module 3Gérer l'état avec Redux
Chapitre 15 sur 18
useSelector et useDispatch, Immer, les sélecteurs, l'asynchrone, combineReducers avec l'atelier inscriptions et notes, et le TP Tennis Score.
Objectifs
Avec ce chapitre, tu sauras…
useSelector et useDispatch ;useStore) ;combineReducers (atelier inscriptions et notes) ;Leçon 1
Au chapitre 14, Redux nous a permis d'organiser la logique de l'application en trois parties : le state, les actions et le reducer, reliés par le store. Pour utiliser React et Redux ensemble efficacement, on utilise la bibliothèque React-Redux :
| Outil React-Redux | Rôle |
|---|---|
<Provider store={store}> | envoie le store à toute l'application (il l'englobe) |
useDispatch() | renvoie la fonction dispatch pour envoyer des actions depuis un composant |
useSelector(selector) | extrait un morceau du state et réaffiche le composant quand ce morceau change |
import { useSelector, useDispatch } from "react-redux";
function Compteur() {
const valeur = useSelector((state) => state.valeur); // lire
const dispatch = useDispatch(); // écrire
return <button onClick={() => dispatch({ type: "INCREMENTER" })}>{valeur}</button>;
}useSelector et useDispatch remplacent connect, mapStateToProps et mapDispatchToProps (chapitre 14) dans les composants fonction : c'est l'écriture recommandée aujourd'hui.
Vidéo · À regarder
ENRedux and Modern Redux Toolkit with Asynchronous Operation – Full Course
freeCodeCamp.org · YouTube
Leçon 2
| Valeurs primitives (non modifiables) | Objets (modifiables) |
|---|---|
booléen, null, undefined, nombre, BigInt, chaîne, symbole | tableau (array), fonction, objet… |
| Modifient le tableau d'origine (à éviter dans un reducer) | Renvoient un nouveau tableau (sans risque) |
|---|---|
ajout / suppression d'un élément : push, shift, unshift, pop, delete | ajout d'éléments : concat |
ajout / suppression de plusieurs éléments : splice | opérations sur les éléments : map, filter, reduce |
Leçon 3
Leçon 4
Vidéo · À regarder
ENRedux and Modern Redux Toolkit with Asynchronous Operation – Full Course
freeCodeCamp.org · YouTube
Leçon 5
| Avantages de Redux | Inconvénients |
|---|---|
| changements d'état prévisibles | complexité |
| état centralisé | verbosité (beaucoup de code : types, actions, reducers) |
| débogage facile | |
| conserver l'état de la page | |
| annuler / refaire (undo / redo) | |
Leçon 6
| Fonction / méthode | Rôle |
|---|---|
createStore(reducer) | reçoit le reducer (fonction (state, action)) et renvoie le store |
store.dispatch(action) | modifie l'état selon l'action. Seules les actions modifient l'état : là où React utilise this.setState(), Redux exécute une action |
store.getState() | renvoie l'état sous forme d'objet ; comme this.state, mais pour toute l'application |
store.subscribe(listener) | exécute la fonction listener() après chaque action |
Leçon 7
Vidéo · À regarder
ENRedux and Modern Redux Toolkit with Asynchronous Operation – Full Course
freeCodeCamp.org · YouTube
Leçon 8
1useSelector sert à…
2useDispatch() renvoie…
3Laquelle de ces méthodes modifie le tableau d'origine ?
4Avec Immer, on modifie…
5Depuis Immer 10, on importe…
6Un reducer peut-il appeler Math.random() ?
7combineReducers({ a: reducerA, b: reducerB }) donne un état de la forme…
8connect(null, mapDispatchToProps)(App) signifie que App…
9Redux est déconseillé pour…
L'essentiel du chapitre
<Provider store>, useSelector(state => …) (lire et se réafficher), useDispatch() (envoyer) ; ou connect(mapStateToProps, mapDispatchToProps) (null si on n'a pas besoin de l'un des deux).push, pop, shift, unshift, splice, sort, reverse, delete ; sans risque : concat, map, filter, reduce, slice, spread.produce(state, draft => { draft.x = … }) renvoie un nouvel état ; aujourd'hui import { produce } from "immer".Date/Math.random.useSelector, rangées dans selectors.js ; avec une prop : (id) => (state) => state[id] ; jamais de nouvel objet dans un sélecteur.useStore) et utilise getState / dispatch (puis Redux Thunk).combineReducers({ inscriptionHistory, notationHistory }) : un reducer par partie de l'état, actions avec payload.changement d'ordre : reverse, sort | copie superficielle : slice |
Vidéo · À regarder
ENRedux and Modern Redux Toolkit with Asynchronous Operation – Full Course
freeCodeCamp.org · YouTube
Vidéo · À regarder
ENRedux and Modern Redux Toolkit with Asynchronous Operation – Full Course
freeCodeCamp.org · YouTube
Ce que tu vas voir (en anglais, sous-titres français) : le formateur remplace connect par les hooks : useSelector(state => state.numOfCakes) pour lire une valeur du store, puis useDispatch() pour obtenir dispatch et envoyer une action au clic. Il compare les deux écritures. C'est la section 1.
En JavaScript, il y a deux sortes de valeurs :
Le contenu d'un objet peut être modifié après sa création :
const myObject = { test: true };
myObject.otherAttribute = false; // permis, même avec constL'objet garde la même référence en mémoire : on ne peut pas savoir après coup s'il a été modifié. C'est pareil pour les tableaux. Or Redux et React-Redux détectent un changement en comparant les références : si l'objet est le même, ils croient que rien n'a changé et l'écran ne se met pas à jour.
JavaScript ne rend pas les tableaux et objets immuables par défaut (les proxy contournent un peu le problème). Et certaines fonctions sont piégeuses :
useSelector pour extraire un morceau du state : (state) => state.player1.(state) => state[playerId]).selectors.js). Si le sélecteur a besoin d'une prop, on écrit une fonction qui renvoie le sélecteur.export const selectPlaying = (state) => state.playing;
export const selectWinner = (state) => state.winner;
// sélecteur qui dépend d'une prop : une fonction qui renvoie le sélecteur
export const selectPlayerScore = (playerId) => (state) => state[playerId];const score = useSelector(selectPlayerScore(playerId));useSelector((state) => ({ p1: state.player1, p2: state.player2 })) crée un nouvel objet à chaque appel : le composant se réaffiche à chaque action, même sans rapport. Fais deux useSelector séparés, qui renvoient des valeurs simples.
useStore() donne accès au store : on peut utiliser getState et dispatch dans notre action asynchrone.store.js par exemple), en leur passant le store en paramètre.export async function chargerJoueurs(store) {
const response = await fetch("https://jsonplaceholder.typicode.com/users");
const users = await response.json();
// on peut lire l'état avant d'envoyer l'action
if (store.getState().playing) {
store.dispatch({ type: "joueursCharges", payload: users.slice(0, 2) });
}
}import { useStore } from "react-redux";
import { chargerJoueurs } from "./store";
function BoutonCharger() {
const store = useStore();
return <button onClick={() => chargerJoueurs(store)}>Charger les joueurs</button>;
}Le middleware Redux Thunk (chapitre 16) fait la même chose de façon standard : dispatch(chargerJoueurs()).
Ce que tu vas voir (en anglais, sous-titres français) : comment traiter une action asynchrone (charger des utilisateurs depuis une API) : l'état loading / data / error, les trois actions request, success, failure, et pourquoi le reducer ne peut pas faire l'appel lui-même. C'est la section 4, et l'introduction du chapitre 16.
Redux n'est lié à aucune bibliothèque d'interface : on l'utilise avec React, Angular, Vue ou du JavaScript pur.
Dans une application avec une interface complexe, il y a beaucoup de composants dont il faut garder les états synchronisés : la modification des données d'un composant doit changer immédiatement l'état d'autres composants. Les données peuvent aussi arriver d'une requête réseau (API) ou d'une tâche en arrière-plan. Elles circulent alors d'une partie à l'autre de l'interface et changent de façon imprévisible : il faut beaucoup de code pour garder tout synchronisé, et quand quelque chose ne va pas, il est très difficile de savoir d'où viennent les données.
Avec Redux, au lieu de stocker les données dans plusieurs parties de l'interface, on les stocke dans un dépôt central : le store, un objet JavaScript qu'on peut voir comme une petite base de données du front-end. Les composants ne gardent plus leur propre état : ils prennent dans le store ce dont ils ont besoin. Pour mettre à jour une donnée, il y a un seul endroit à changer : le problème de synchronisation disparaît. Et si quelque chose ne va pas, on voit exactement comment, pourquoi, quand et où les données ont changé.
La mise à jour est centralisée dans le reducer : c'est lui qui dit comment l'état change à partir de l'ancien état et de l'action.
Les actions sont tout ce qui peut changer l'état. Pour une liste : ajouter un élément à la fin, supprimer un élément, inverser l'ordre, afficher seulement les éléments qui contiennent un mot. Une action peut ne rien changer à l'affichage (inverser une liste d'un seul élément) tout en changeant l'état interne (un booléen « ordre croissant »). Une action est un objet ; sa seule contrainte est d'avoir un attribut type (une constante, souvent une chaîne).
Le reducer utilise l'état actuel et l'action pour renvoyer un nouvel état. Il ne doit rien faire d'autre : pas de mise à jour de valeurs externes (bases de données, variables), pas de données autres que state et action, pas de modification de l'état actuel. C'est une fonction pure : même appel, même résultat, quel que soit le monde extérieur.
On gère les inscriptions et les notes des stagiaires :
inscriptionHistory ;notationHistory contient les notes : une note est attribuée à un stagiaire pour un module.Par convention, les types sont regroupés dans types.js :
export const ADD_INSCRIPTION = "ADD_INSCRIPTION"
export const REMOVE_INSCRIPTION = "REMOVE_INSCRIPTION"
export const ADD_NOTE = "ADD_NOTE"
export const REMOVE_NOTE = "REMOVE_NOTE"
export const UPDATE_NOTE = "UPDATE_NOTE"import * as types from './types'
// créateurs d'actions
export function add_inscription(id,nom,filiere) {
return {
type : types.ADD_INSCRIPTION,
payload :{id:id,nom:nom,filiere:filiere}
}
}
export function remove_inscription(id) {
return {
type : types.REMOVE_INSCRIPTION,
payload :{id:id}
}
}
export function add_note(id,module,note) {
return {
type : types.ADD_NOTE,
payload:{id:id,module:module,note:note}
}
}
export function remove_note(id,module) {
return {
type : types.REMOVE_NOTE,
payload : {id:id,module:module}
}
}
export function update_note(id,module,note) {
return {
type : types.UPDATE_NOTE,
payload : {id:id,module:module,note:note}
}
}Les données de l'action sont dans la propriété payload (« charge utile ») : c'est la convention la plus répandue.
Les reducers
import * as types from './types'
//reducer inscription
function inscriptionHistory(listInscription = [], action) {
if(action.type===types.ADD_INSCRIPTION){
return [...listInscription,action.payload]
}
if(action.type===types.REMOVE_INSCRIPTION){
return listInscription.filter(insc=> insc.id!==action.payload.id)
}
return listInscription;
}
//reducer notation
function notationHistory(listNotation=[],action){
if(action.type===types.ADD_NOTE){
return [...listNotation,action.payload]
}
if(action.type===types.REMOVE_NOTE){
return listNotation.filter(note=> !(note.id===action.payload.id && note.module===action.payload.module))
}
if(action.type===types.UPDATE_NOTE){
const {id,module,note}=action.payload
return [...listNotation.filter(note=> !(note.id===id && note.module===module)),{id,module,note}]
}
return listNotation
}Ce sont les fonctions pures sur les tableaux du chapitre 1 : ajouter avec le spread, supprimer avec filter, modifier avec filter + ajout.
combineReducers
Quand l'application grandit, on découpe le reducer en plusieurs fonctions, chacune gérant une partie indépendante de l'état. combineReducers transforme un objet de reducers en un seul reducer à passer à createStore. Ce reducer appelle chaque reducer enfant et rassemble leurs résultats dans un seul objet d'état, sous les clés données à combineReducers :
import { createStore, combineReducers } from 'redux'
const Etablissment = combineReducers({
inscriptionHistory: inscriptionHistory,
notationHistory:notationHistory
});
const store = createStore(Etablissment);
console.log(store.getState()); // { inscriptionHistory: [], notationHistory: [] }On modifie l'état en ajoutant des inscriptions et des notes :
store.dispatch(add_inscription(10,'RAMI','DEV')); //ajouter un stagiaire
store.dispatch(add_inscription(11,'KAMALI','INFRA'));//ajouter un stagiaire
store.dispatch(add_note(10,'POO',17)); //ajouter une note
store.dispatch(add_note(10,'Web',15)); //ajouter une note
store.dispatch(add_note(10,'JS',13)); //ajouter une note
store.dispatch(remove_note(10,'POO')); //supprimer une note
store.dispatch(update_note(10,'JS',18)); //modifier une note
console.log(store.getState());{
inscriptionHistory: [
{ id: 10, nom: 'RAMI', filiere: 'DEV' },
{ id: 11, nom: 'KAMALI', filiere: 'INFRA' }
],
notationHistory: [
{ id: 10, module: 'Web', note: 15 },
{ id: 10, module: 'JS', note: 18 }
]
}La note de POO a été supprimée, et la note de JS (modifiée à 18) est passée à la fin du tableau (elle a été retirée puis rajoutée).
Ce que tu vas voir (en anglais, sous-titres français) : le formateur crée deux reducers séparés (gâteaux et glaces), puis les réunit avec combineReducers({ cake: cakeReducer, iceCream: iceCreamReducer }) et montre la forme de l'état obtenu dans getState(). C'est exactement inscriptionHistory + notationHistory.
Le module react-redux et connect()
On installe le module : npm install react-redux. Sa méthode principale, connect(), facilite l'accès au store :
store.getState() ; l'état arrive dans des props ajoutées au composant par connect(). Si l'état contient inscriptionHistory, le composant reçoit props.inscriptionHistory, sans l'avoir créée ;connect() ajoute aussi des props pour les actions. Si l'action add_inscription(id, nom, filiere) existe, le composant peut appeler props.add_Inscription(...), sans passer par le store.Le store devient invisible : on n'a plus à le transmettre aux composants. Il doit être créé par createStore() et passé au composant <Provider>, parent de tous les autres :
import React from "react"
import ReactDOM from "react-dom"
import { createStore } from "redux"
import { Provider } from "react-redux"
import App from "./App"
import { Etablissment } from "./reducers"
const store=createStore(Etablissment)
ReactDOM.render((
<Provider store={store}>
<App/>
</Provider>),
document.querySelector("#root"))import { connect } from 'react-redux'
import { add_inscription } from './actions'
function mapStateToProps(state) {
return {
inscriptionHistory : state.inscriptionHistory
}
}
function mapDispatchToProps(dispatch) {
return {
add_Inscription :(id,nom,filiere)=>{
dispatch(add_inscription(id,nom,filiere))
}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(App)connect(mapStateToProps, mapDispatchToProps) renvoie une fonction qui reçoit le composant (App, fonction ou classe) et renvoie le composant transformé, avec de nouvelles props ;mapStateToProps(state) (1er argument) : l'accès en lecture à l'état. Si le composant n'a pas besoin de lire l'état : connect(null, mapDispatchToProps)(App) ;mapDispatchToProps(dispatch) (2e argument) : renvoie un objet de fonctions qui envoient les actions. Si le composant n'a pas besoin d'actions : connect(mapStateToProps, null)(App).reducers.js n'exporte rien, mais index.js fait import { Etablissment } from "./reducers" : ajoute export const Etablissment = combineReducers({...}) à la fin de reducers.js.mapDispatchToProps du support n'a pas ses accolades fermantes : la fonction est incomplète (corrigée ci-dessus).App est complété dans le corrigé 15.3.ReactDOM.render vient de React 17 : avec React 18 et suivants, import ReactDOM from "react-dom/client" puis ReactDOM.createRoot(document.querySelector("#root")).render(<Provider store={store}><App/></Provider>).On veut une application qui gère le score d'un jeu de tennis : 0, 15, 30, 40, puis jeu ; à 40-40, l'avantage.
1-2. Crée le projet et installe les paquets :
npx create-react-app react-redux-example
npm install redux react-redux3. Copie le state, les actions et le reducer dans src/store.js :
import { createStore } from "redux";
// state
const initialState = {
player1: 0,
player2: 0,
advantage: null,
winner: null,
playing: true,
};
// actions creators
export const playPause = () => ({ type: "playPause" });
export const restartGame = () => ({ type: "restart" });
export const pointScored = (player) => ({
type: "pointScored",
payload: { player: player },
});
function reducer(state = initialState, action) {
if (action.type === "restart") {
return initialState;
}
if (action.type === "playPause") {
if (state.winner) {
return state;
}
return {
...state,
playing: !state.playing,
};
}
if (action.type === "pointScored") {
const player = action.payload.player;
const otherPlayer = player === "player1" ? "player2" : "player1";
if (state.winner) {
// On ne peut pas marquer de point si le set est terminé
return state;
}
if (state.playing === false) {
// On ne peut pas marquer de point si le set est en pause
return state;
}
const currentPlayerScore = state[player];
if (currentPlayerScore <= 15) {
// 0 ou 15 => on ajoute 15
return { ...state, [player]: currentPlayerScore + 15 };
}
if (currentPlayerScore === 30) {
return { ...state, [player]: 40 };
}
if (currentPlayerScore === 40) {
if (state[otherPlayer] !== 40) {
// Le joueur à gagné
return { ...state, winner: player };
}
if (state.advantage === player) {
// Le joueur à gagné
return { ...state, winner: player };
}
if (state.advantage === null) {
// Le joueur a maintenant l'avantage
return { ...state, advantage: player };
}
// L'autre joueur a perdu l'avantage
return { ...state, advantage: null };
}
}
return state;
}
export const store = createStore(reducer);4. Copie le CSS dans src/index.css :
html { font-size: 16px; font-family: "Ubuntu", sans-serif; }
body { margin: 0; }
* { box-sizing: border-box; }
#root {
padding: 2rem;
text-align: center;
flex-direction: column;
display: flex;
align-items: stretch;
justify-content: center;
min-height: 100vh;
max-width: 500px;
margin: 0 auto;
}
p { margin: 0; }
.buttons { align-self: center; display: flex; flex-direction: column; }
.buttons-row { display: flex; flex-direction: row; justify-content: space-between; }
.button {
font-family: "Ubuntu", sans-serif;
margin: 0.5rem;
line-height: 1;
border: none;
padding: 0.8rem 1rem;
font-size: 1rem;
background: #232536;
border-radius: 0.3rem;
color: white;
font-weight: 300;
width: 170px;
cursor: pointer;
}
.button:hover { background: #2c2f44; }
.button:active { background: #1e212e; }
.display {
font-size: 2rem;
font-weight: 700;
padding: 1rem;
background-color: #2759f5;
color: white;
border-radius: 0.3rem;
line-height: 1.5;
margin: 0 0 1rem;
}
.player-score, .player-games {
font-size: 1.4rem;
font-weight: 400;
padding: 0.5rem 1rem;
margin-bottom: 1rem;
color: white;
border-radius: 0.3rem;
line-height: 1.5;
display: flex;
justify-content: space-between;
}
.player-score { background-color: #193ba1; }
.player-games { background-color: #ae2b2b; }5. Mets en place le Provider dans src/index.js :
import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import "./index.css";
import App from "./App";
import { store } from "./store";
ReactDOM.createRoot(document.getElementById("root")).render(
<Provider store={store}>
<StrictMode>
<App />
</StrictMode>
</Provider>
);6. Crée les composants d'affichage :
import { PlayPauseButton } from "./PlayPauseButton";
import { Display } from "./Display";
import { ResetButton } from "./ResetButton";
import { PointScoredButton } from "./PointScoredButton";
export default function App() {
return (
<div>
<Display />
<div className="buttons-row">
<PointScoredButton playerId="player1">Point Joueur 1</PointScoredButton>
<PointScoredButton playerId="player2">Point Joueur 2</PointScoredButton>
</div>
<div className="buttons-row">
<ResetButton />
<PlayPauseButton />
</div>
</div>
);
}7. Connecte les composants au store avec useSelector et useDispatch :
// on import useSelector depuis react-redux
import { useSelector } from "react-redux";
export function Display() {
// on utilise useSelector avec en paramètre une fonction
// qui permet de récupérer uniquement la propriété `playing` du state
const gameIsPlaying = useSelector((state) => state.playing);
const winner = useSelector((state) => state.winner);
const player1Score = useSelector((state) => state.player1);
const player2Score = useSelector((state) => state.player2);
const advantage = useSelector((state) => state.advantage);
if (winner) {
if (winner === "player1") {
return <p className="display">Joueur 1 gagne</p>;
} else {
return <p className="display">Joueur 2 gagne</p>;
}
} else if (gameIsPlaying === false) {
return <p className="display">C'est la pause</p>;
} else {
let text = "Le score est: " + player1Score + " - " + player2Score;
if (advantage) {
if (advantage === "player1") {
text += " avantage joueur 1";
} else {
text += " avantage joueur 2";
}
}
return <p className="display">{text}</p>;
}
}import { useDispatch } from "react-redux";
import { pointScored } from "./store";
export function PointScoredButton({ playerId, children }) {
const dispatch = useDispatch();
return (
<button className="button" onClick={() => { dispatch(pointScored(playerId)); }}>
{children}
</button>
);
}import { useDispatch } from "react-redux";
import { restartGame } from "./store";
export function ResetButton() {
const dispatch = useDispatch();
return (
<button className="button" onClick={() => { dispatch(restartGame()); }}>
Remettre à zéro
</button>
);
}import { useDispatch } from "react-redux";
import { playPause } from "./store";
export function PlayPauseButton() {
const dispatch = useDispatch();
return (
<button className="button" onClick={() => { dispatch(playPause()); }}>
Pause / Reprendre
</button>
);
}8. Deux améliorations à faire :
Pour suivre facilement le state de Redux, ajoute après la création du store (dans src/store.js) :
store.subscribe(() => {
console.log("Nouveau state:", store.getState());
});
(Le code de l'astuce manque dans le support ; c'est celui-ci.)
9. On veut afficher le nombre de jeux gagnés et le score de chaque joueur :
PlayerScore et connecte-le à Redux ;selectors.js ;PlayerPoints qui affiche le nombre de jeux gagnés par chaque joueur (avec la propriété history du state).Réalise les étapes 1 à 7 du TP, puis les améliorations des étapes 8 et 9 : le reducer avec Immer, l'historique history (un tableau des gagnants de chaque jeu), le fichier selectors.js, PlayerScore et PlayerPoints. Après un jeu gagné, « Remettre à zéro » lance un nouveau jeu sans effacer l'historique.
Écris deux fois (sans Immer, puis avec produce) le cas "terminer" d'un reducer de tâches state = { taches: [{ id, titre, faite }] } : l'action { type: "terminer", payload: { id } } passe faite à true pour la tâche de cet id.
Pour éviter ces problèmes, on utilise la bibliothèque Immer (https://immerjs.github.io/immer/).
Les 3 principes de Redux et les fonctions pures
Redux utilise deux sortes de fonctions : les actions (qui font les appels externes, comme les appels d'API, avec un middleware) et les reducers (qui mettent à jour l'état avec les données reçues dans les actions).
Un reducer est une fonction pure. Il ne peut pas :
state, action) ;Date.now(), Math.random()…).
Avec les mêmes arguments, il doit toujours renvoyer le même résultat.Immer : modifier comme d'habitude, sans toucher à l'état
Immer permet de modifier les données comme de simples tableaux ou objets, mais sans changer l'état d'origine : Immer fabrique un nouvel état à partir des modifications.
const baseState = [
{ title: "Learn TypeScript", done: true },
{ title: "Try Immer", done: false }
]On veut marquer la deuxième tâche comme faite et ajouter une troisième, sans modifier baseState et sans clonage profond (la première tâche doit rester le même objet).
const nextState = baseState.slice() // shallow clone the array
nextState[1] = { // replace element 1...
...nextState[1], // with a shallow clone of element 1
done: true // ...combined with the desired update
}
nextState.push({title: "Tweet about it"})import produce from "immer"
const nextState = produce(baseState, draft => {
draft[1].done = true
draft.push({title: "Tweet about it"})
})produce(étatDeBase, recette) donne à la recette un brouillon (draft). On modifie le brouillon directement (même avec push) ; Immer renvoie un nouvel état. baseState n'est pas modifié, et la première tâche est partagée entre les deux états (même référence).
Depuis Immer 10, l'export par défaut a été supprimé : on écrit import { produce } from "immer" (avec accolades). npm install immer pour l'installer. Redux Toolkit (chapitre 17) utilise Immer automatiquement dans ses reducers.
Ce que tu vas voir (en anglais, sous-titres français) : un reducer avec un état imbriqué (une adresse dans un objet) qu'il faut copier niveau par niveau avec le spread, puis le formateur installe Immer et réécrit le même cas avec produce(state, draft => { draft.address.street = … }). C'est la comparaison « sans Immer / avec Immer » de cette section.
Quand ne pas utiliser Redux : une application de petite ou moyenne taille, un budget serré, un petit flux de données dans l'interface, des données statiques. Pour chaque projet, il faut d'abord se demander quel problème on doit résoudre, quelles sont les contraintes, et quelle est la solution la plus simple et efficace.
Ce que tu vas voir (en anglais, sous-titres français) : quand Redux n'est pas nécessaire, et la comparaison entre useContext + useReducer et Redux : le formateur explique quel outil choisir selon la taille de l'application et la quantité d'état partagé. C'est la section 5.
Termine l'atelier de la section 7 : un composant App connecté avec connect affiche la liste des stagiaires (inscriptionHistory) et un formulaire (id, nom, filière) qui appelle props.add_Inscription. Ajoute un bouton « Supprimer » par stagiaire (remove_inscription).