s16 travaux pratiques

4. Ajoutez un dossier components dans le src, puis créez AddArticle.js et Article.js. Dans Article.js import React from "react" const article = ({ article }) => ( <div className="article"> <h1>{article.title}</h1> <p>{article.body}</p> </div>

export default article Dans AddArticle.js import React, { useState } from "react" const AddArticle = ({ saveArticle }) => { const [article, setArticle] = useState() const handleArticleData = e => { setArticle({ article, [e.target.id]: e.target.value,

return ( <form onSubmit={addNewArticle} className="add-article"> <input type="text" id="title" placeholder="Title" onChange={handleArticleData}

Dans App.js import React from "react" import Articles from "./containers/Articles" function App() { return <Articles />

export default App 5. Qu'est-ce qu'un réducteur ? Un réducteur est une fonction pure qui reçoit l'ancien état (précédent) et une action comme arguments, puis renvoie en sortie l'état mis à jour. Le réducteur ne gère que le code synchrone, ce qui signifie aucun effet secondaire comme une requête HTTP ou quelque chose comme ça. Nous pouvons toujours gérer du code asynchrone avec redux et nous apprendrons comment le faire plus tard. Au passage, si vous êtes confus par le terme action, pas de soucis, ce sera beaucoup plus clair plus tard. Créons d'abord notre tout premier réducteur.

La structure de vos fichiers dépend entièrement de vous, cependant je vais suivre la convention et créer un dossier store dans le projet pour contenir nos réducteurs, actions etc. Ensuite, créez un fichier reducer.js.

export default reducer Comme je l'ai dit plus tôt, un réducteur est juste une fonction qui reçoit l'état précédent et une action en tant que paramètres et renvoie l'état mis à jour. Ici, nous n'avons pas d'état antérieur, il ne sera donc pas défini, nous devons donc l'initialiser avec initialState qui contient nos articles prédéfinis.

Maintenant que nous avons installé notre réducteur, il est temps de créer notre store 6. Qu'est-ce qu'un store ? Un magasin contient tout l'arbre d'état de notre application React. C'est là que notre état d'application vit. Vous pouvez le voir comme un gros objet JavaScript.