Module 3Gérer l'état avec Redux
Chapitre 14 sur 18
Flux et Redux, le store, les reducers et les actions, Provider, connect, mapStateToProps et mapDispatchToProps, et le TP de la liste d'articles.
Objectifs
Avec ce chapitre, tu sauras…
subscribe, dispatch, getState), le reducer et l'action ;Provider, connect, mapStateToProps et mapDispatchToProps ;Leçon 1
Vidéo · À regarder
ENRedux and Modern Redux Toolkit with Asynchronous Operation – Full Course
freeCodeCamp.org · YouTube
Ce que tu vas voir (en anglais, active les sous-titres français) : pourquoi Redux existe : le formateur montre une application où l'état doit être partagé entre des composants éloignés, le problème des props passées sur plusieurs niveaux, puis la définition de Redux : un conteneur d'état prévisible pour les applications JavaScript. C'est la section 1.
Leçon 2
| Partie | Rôle |
|---|---|
| VIEW | une composition hiérarchique de composants React |
| ACTION | un objet pur qui décrit un événement de l'utilisateur (clic…) : le type de l'action, le moment, l'endroit, les coordonnées, et l'état qu'il veut changer |
| DISPATCHER | le seul point de l'application qui reçoit les actions |
| STORE | écoute les actions, gère les données et l'état ; répond à l'interface à partir des actions. Il peut y avoir plusieurs stores |
Leçon 3
| Partie | Rôle |
|---|---|
| VIEW PROVIDER | le framework d'affichage (React, Angular…) qui s'inscrit auprès du store |
| ACTION | objet pur qui décrit l'événement de l'utilisateur (type, heure, emplacement, coordonnées, état visé) |
| STORE | gère l'état de l'application et possède la fonction dispatch(action) |
| MIDDLEWARE | logiciel intermédiaire : agit sur les actions avant qu'elles arrivent au reducer : écrire un journal (log), produire des erreurs, faire des requêtes asynchrones, envoyer d'autres actions… |
Leçon 4
Vidéo · À regarder
ENRedux and Modern Redux Toolkit with Asynchronous Operation – Full Course
freeCodeCamp.org · YouTube
1Redux a été créé par…
2Combien de stores a une application Redux ?
3Quelle partie de Flux n'existe pas dans Redux ?
4Un reducer est…
5La méthode du store qui renvoie l'état courant est…
6Une action doit obligatoirement avoir…
7Le composant qui rend le store accessible à toute l'application est…
8mapStateToProps sert à…
9mapDispatchToProps sert à…
10Un reducer peut-il faire une requête HTTP ?
L'essentiel du chapitre
subscribe, dispatch(action), getState().type (+ données) ; créateur d'action : fonction qui renvoie l'action.(state = initialState, action) => nouvel état, switch (action.type), jamais de modification directe : { ...state, articles: state.articles.concat(x) }.<Provider store={store}> autour d'App ; connect(mapStateToProps, mapDispatchToProps)(Composant).createStore → aujourd'hui legacy_createStore ou configureStore (Redux Toolkit).| REDUCER |
| une fonction pure qui renvoie un nouvel état à partir de l'état précédent. Il ne modifie pas l'état : il crée une copie modifiée |
| Méthode du store | Rôle |
|---|---|
subscribe(listener) | inscrit un écouteur, prévenu à chaque modification du store. React s'inscrit ainsi pour mettre l'interface à jour |
dispatch(action) | envoie une action : le store exécute le reducer, qui calcule le nouvel état |
getState() | renvoie l'état courant (à ne pas modifier) |
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
Vidéo · À regarder
ENRedux and Modern Redux Toolkit with Asynchronous Operation – Full Course
freeCodeCamp.org · YouTube
L'architecture Flux a été présentée par Bill Fisher et Jing Chen à la conférence Facebook F8 en 2014. Elle remplace le modèle MVVM (Model View – View Model) par un flux de données unidirectionnel (unidirectional data flow) : les actions et les événements passent par un circuit fermé.
@startuml
skinparam shadowing false
rectangle "USER" as U
rectangle "VIEW\n(composants React UI)" as V
rectangle "ACTIONS" as A
rectangle "DISPATCHER" as D
rectangle "STORE" as S1
rectangle "STORE" as S2
U --> V : clique
V --> A
A --> D
D --> S1
D --> S2
S1 --> V : nouvel état
S2 --> V
@endumlRedux reprend Flux en enlevant la complexité inutile :
@startuml
skinparam shadowing false
rectangle "USER" as U
rectangle "VIEW PROVIDER\n(React, Angular…)" as V
rectangle "ACTION" as A
rectangle "STORE" as S {
rectangle "Middleware" as M1
rectangle "Middleware" as M2
rectangle "Reducer functions" as R
rectangle "STATE" as ST
}
U --> V
V --> A : dispatch(action)
A --> M1
M1 --> M2
M2 --> R
R --> ST : nouvel état
ST --> V : mise à jour de l'interface
@endumlOn veut une application qui ajoute un article à une liste d'articles.
Étapes 1 à 4 : l'application sans Redux
npx create-react-app react-redux-example
cd react-redux-example
npm install redux react-reduxCrée le dossier src/containers avec Articles.js :
import React, { useState } from "react"
import Article from "../components/Article"
import AddArticle from "../components/AddArticle"
const Articles = () => {
const [articles, setArticles] = useState([
{ id: 1, title: "post 1", body: "Quisque cursus, metus vitae pharetra" },
{ id: 2, title: "post 2", body: "Quisque cursus, metus vitae pharetra" },
])
const saveArticle = e => {
e.preventDefault()
}
return (
<div>
<AddArticle saveArticle={saveArticle} />
{articles.map(article => (
<Article key={article.id} article={article} />
))}
</div>
)
}
export default ArticlesCrée le dossier src/components avec Article.js et AddArticle.js :
import React from "react"
const article = ({ article }) => (
<div className="article">
<h1>{article.title}</h1>
<p>{article.body}</p>
</div>
)
export default articleimport React, { useState } from "react"
const AddArticle = ({ saveArticle }) => {
const [article, setArticle] = useState()
const handleArticleData = e => {
setArticle({
article,
[e.target.id]: e.target.value,
})
}
const addNewArticle = e => {
e.preventDefault()
saveArticle(article)
}
return (
<form onSubmit={addNewArticle} className="add-article">
<input type="text" id="title" placeholder="Title" onChange={handleArticleData} />
<input type="text" id="body" placeholder="Body" onChange={handleArticleData} />
<button>Add article</button>
</form>
)
}
export default AddArticleimport React from "react"
import Articles from "./containers/Articles"
function App() {
return <Articles />
}
export default App[e.target.id]: e.target.value est une propriété calculée : le nom de la propriété est l'id du champ (title ou body). Une seule fonction gère donc les deux champs.
setArticle({ article, [e.target.id]: e.target.value }) crée un objet avec une propriété article (l'ancien objet imbriqué) : en tapant le body, on perd le title au premier niveau. Il faut copier les propriétés avec le spread : setArticle({ ...article, [e.target.id]: e.target.value }). Le même oubli des ... se trouve dans le reducer (étape 8).
Étape 5 : le reducer
Une fonction pure qui reçoit l'état précédent et une action, et renvoie l'état mis à jour. Il ne gère que du code synchrone : aucun effet secondaire (pas de requête HTTP…). L'asynchrone se gère autrement (chapitre 16).
Par convention, on crée le dossier src/store pour les reducers, les actions, etc. :
const initialState = {
articles: [
{ id: 1, title: "post 1", body: "Quisque cursus, metus vitae pharetra" },
{ id: 2, title: "post 2", body: "Quisque cursus, metus vitae pharetra" },
],
}
const reducer = (state = initialState, action) => {
return state
}
export default reducerAu premier appel, il n'y a pas d'état précédent (undefined) : la valeur par défaut state = initialState l'initialise avec les articles prédéfinis.
Étape 6 : le store
Le store contient tout l'arbre d'état de l'application : vois-le comme un gros objet JavaScript. Pour le créer, on lui passe le reducer :
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { createStore } from "redux"
import reducer from "./store/reducer"
const store = createStore(reducer)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);createStore fonctionne toujours, mais il est barré (marqué déprécié) dans Redux 5 pour pousser vers Redux Toolkit (configureStore, chapitre 17). Pour garder ce code sans avertissement : import { legacy_createStore as createStore } from "redux".
Étape 7 : connecter le store à React
On entoure App avec le composant Provider de react-redux, et on lui passe le store en props :
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { createStore } from "redux"
import { Provider } from "react-redux"
import reducer from "./store/reducer"
const store = createStore(reducer)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<App />
</Provider>
);Ensuite, on connecte le composant Articles au store :
import React from "react"
import { connect } from "react-redux"
import Article from "../components/Article"
import AddArticle from "../components/AddArticle"
const Articles = ({ articles }) => {
const saveArticle = e => {
e.preventDefault()
// the logic will be updated later
}
return (
<div>
<AddArticle saveArticle={saveArticle} />
{articles.map(article => (
<Article key={article.id} article={article} />
))}
</div>
)
}
const mapStateToProps = state => {
return {
articles: state.articles,
}
}
export default connect(mapStateToProps)(Articles)connect() renvoie une fonction d'ordre supérieur qui reçoit un composant : elle le connecte au store ;mapStateToProps(state) (le nom est libre) reçoit l'état du store et renvoie un objet : ici { articles: state.articles } ;connect(mapStateToProps)(Articles) renvoie un composant conteneur qui injecte ces valeurs dans les props d'Articles. Le composant reçoit articles par ses props et les affiche comme avant, mais cette fois depuis Redux.Réalise le TP de la section 4 jusqu'à l'étape 9 en corrigeant les trois erreurs du support. Puis ajoute la suppression : un type REMOVE_ARTICLE, un créateur removeArticle(id), un bouton « Supprimer » dans Article, et le cas dans le reducer (avec filter).
Dans un fichier compteur.js exécuté avec Node : écris les types INCREMENTER et DECREMENTER, leurs créateurs d'action, un reducer avec l'état initial { valeur: 0 }, crée le store, abonne un console.log(store.getState()), puis dispatch 3 incrémentations et 1 décrémentation. Qu'affiche la console ?
Le store
Redux garde tous les états de l'application dans un seul objet : le store. C'est la seule source de vérité (single source of truth), accessible par tous les composants.
Le reducer
On ne peut pas modifier le store directement : Redux suit la programmation fonctionnelle et l'immuabilité (chapitre 1). On utilise une fonction appelée reducer :
(state, action) => nouvelStateElle reçoit l'état et une action, et renvoie le nouvel état selon l'action. Au programmeur de choisir la technique d'immuabilité : spread ..., Object.assign, Immer (produce, chapitre 15)… Une application a en général plusieurs reducers (un par partie de l'état).
L'action
Une action est un objet littéral (plain object) qui décrit ce qui vient de se passer : on peut la voir comme un événement. Elle a toujours une propriété type :
{ type: "ADD_ARTICLE", article: { title: "post 3", body: "…" } }L'action est passée à store.dispatch(action), l'unique point d'entrée du store. Comme toutes les modifications passent par là, on peut facilement les enregistrer (Redux DevTools, chapitre 16) ou mettre en place « annuler / refaire ».
Ce que tu vas voir (en anglais, sous-titres français) : les trois principes de Redux (un seul store, l'état en lecture seule, les changements par des fonctions pures), puis le formateur écrit une action et un créateur d'action, un reducer avec switch (action.type), crée le store et utilise getState, dispatch et subscribe en Node.js, sans React. C'est toute la section 3, ligne par ligne.
Ce que tu vas voir (en anglais, sous-titres français) : l'installation de redux et react-redux dans un projet React, la création du store et l'utilisation de <Provider store={store}> autour de l'application. C'est l'étape 7.
Ce que tu vas voir (en anglais, sous-titres français) : mapStateToProps (lire l'état du store dans les props), mapDispatchToProps (envoyer des actions depuis les props), puis connect(mapStateToProps, mapDispatchToProps)(Composant) qui relie les deux au composant. Ce sont les étapes 7 et 8.
Étape 8 : l'action
Une action est un paquet d'informations qui contient un type (REMOVE_ARTICLE, ADD_ARTICLE…). Elle est envoyée (dispatch) depuis un composant : elle porte les données du composant vers le store. L'action n'est qu'un messager : c'est le reducer qui change le store.
export const ADD_ARTICLE = "ADD_ARTICLE"import React from "react"
import { connect } from "react-redux"
import Article from "../components/Article"
import AddArticle from "../components/AddArticle"
import * as actionTypes from "../store/actionTypes"
const Articles = ({ articles, saveArticle }) => (
<div>
<AddArticle saveArticle={saveArticle} />
{articles.map(article => (
<Article key={article.id} article={article} />
))}
</div>
)
const mapStateToProps = state => {
return {
articles: state.articles,
}
}
const mapDispatchToProps = dispatch => {
return {
saveArticle: article =>
dispatch({ type: actionTypes.ADD_ARTICLE, articleData: { article } }),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Articles)mapDispatchToProps(dispatch) reçoit la fonction dispatch et renvoie un objet avec la propriété saveArticle ;saveArticle est une fonction qui reçoit l'article et envoie l'action au store avec dispatch({ type, … }) ;mapDispatchToProps en deuxième argument de connect : saveArticle arrive dans les props.On met ensuite à jour le reducer pour traiter ADD_ARTICLE :
import * as actionTypes from "./actionTypes"
const initialState = {
articles: [
{ id: 1, title: "post 1", body: "Quisque cursus, metus vitae pharetra" },
{ id: 2, title: "post 2", body: "Quisque cursus, metus vitae pharetra" },
],
}
const reducer = (state = initialState, action) => {
switch (action.type) {
case actionTypes.ADD_ARTICLE:
const newArticle = {
id: Math.random(), // not really unique but it's just an example
title: action.article.title,
body: action.article.body,
}
return {
state,
articles: state.articles.concat(newArticle),
}
}
return state
}
export default reducerSi le type est ADD_ARTICLE, on crée le nouvel article, puis on renvoie un nouvel état : l'ancien état copié, avec concat pour ajouter l'article. concat renvoie un nouveau tableau (contrairement à push) : l'état reste immuable.
articleData: { article }, mais le reducer lit action.article : action.article est undefined et l'ajout plante (« Cannot read properties of undefined »). Il faut que les deux noms correspondent : dispatch({ type: actionTypes.ADD_ARTICLE, article }).{ state, articles: … } : cela crée une propriété state imbriquée au lieu de copier l'état. Il faut { ...state, articles: … }.AddArticle, { article, … } doit être { ...article, … } (étape 4).
Le corrigé 14.4 donne le code qui fonctionne. L'étape 9 (le créateur d'action) corrige d'elle-même l'erreur 1.Étape 9 : le créateur d'action
Un créateur d'action (action creator) est une fonction qui renvoie une action. On le met dans src/store/actionCreators.js :
import * as actionTypes from "./actionTypes"
export const addArticle = article => {
return {
type: actionTypes.ADD_ARTICLE,
article,
}
}article seul est la syntaxe raccourcie ES6 de article: article. On l'utilise dans mapDispatchToProps :
import React from "react"
import { connect } from "react-redux"
import Article from "../components/Article"
import AddArticle from "../components/AddArticle"
import { addArticle } from "../store/actionCreators"
const Articles = ({ articles, saveArticle }) => (
<div>
<AddArticle saveArticle={saveArticle} />
{articles.map(article => (
<Article key={article.id} article={article} />
))}
</div>
)
const mapStateToProps = state => {
return {
articles: state.articles,
}
}
const mapDispatchToProps = dispatch => {
return {
saveArticle: article => dispatch(addArticle(article)),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Articles)Le support présente le créateur d'action comme la façon de « gérer le code asynchrone ». Ce n'est pas exact : addArticle est synchrone, il renvoie simplement l'objet action. Son intérêt est d'écrire l'action à un seul endroit (pas de faute de frappe dans le type). Pour l'asynchrone (appel d'API), il faut un middleware comme Redux Thunk, qui permet à un créateur d'action de renvoyer une fonction : c'est le sujet du chapitre 16.
Ce que tu vas voir (en anglais, sous-titres français) : le formateur définit une constante de type (const BUY_CAKE = 'BUY_CAKE'), écrit l'action { type: BUY_CAKE }, puis le créateur d'action function buyCake() { return { type: BUY_CAKE } }. C'est l'étape 9 : ADD_ARTICLE et addArticle.
Ce reducer contient deux erreurs graves. Lesquelles ?
const reducer = (state = { panier: [] }, action) => {
if (action.type === "AJOUTER") {
state.panier.push(action.produit)
return state
}
if (action.type === "VIDER") {
return { state, panier: [] }
}
return state
}