LEARNING REACT AND REDUX

Premiers pas avec React Redux

Cette série de défis présente comment utiliser Redux avec React. Tout
d'abord, voici un examen de certains des principes clés de chaque
technologie. React est une bibliothèque de vues que vous fournissez avec
des données, puis elle rend la vue de manière efficace et prévisible. Redux
est une infrastructure de gestion d'état que vous pouvez utiliser pour
simplifier la gestion de l'état de votre application. En règle générale, dans
une application React Redux, vous créez un seul magasin Redux qui gère
l'état de l'ensemble de votre application. Vos composants React s'abonnent
uniquement aux éléments de données du magasin qui sont pertinents pour
leur rôle. Ensuite, vous répartissez les actions directement à partir des
composants React, qui déclenchent ensuite les mises à jour du magasin.

Bien que les composants React puissent gérer leur propre état localement,
lorsque vous avez une application complexe, il est généralement préférable
de conserver l'état de l'application dans un seul emplacement avec Redux. Il
existe des exceptions lorsque des composants individuels peuvent avoir un
état local qui leur est propre. Enfin, étant donné que Redux n'est pas conçu
pour fonctionner avec React prêt à l'emploi, vous devez utiliser le react-
reduxpackage. Il vous permet de transmettre Redux stateet dispatchvos
composants React en tant que fichiers props.

Au cours des prochains défis, vous allez d'abord créer un composant React
simple qui vous permet de saisir de nouveaux messages texte. Ceux-ci sont
ajoutés à un tableau affiché dans la vue. Cela devrait être une bonne
révision de ce que vous avez appris dans les leçons React. Ensuite, vous allez
créer un magasin Redux et des actions qui gèrent l'état du tableau de
messages. Enfin, vous utiliserez react-reduxpour connecter le magasin Redux
à votre composant, extrayant ainsi l'état local dans le magasin Redux.

Commencez avec un DisplayMessagescomposant. Ajoutez un constructeur à

ce composant et initialisez-le avec un état qui a deux propriétés : input, qui
est défini sur une chaîne vide, et messages, qui est défini sur un tableau vide.
Exécutez les tests (Ctrl + Entrée)Réinitialiser cette leçon

Obtenir de l'aide

Essais

• Attente :Le DisplayMessagescomposant doit restituer un divélément

vide.
• Attente :Le DisplayMessagesconstructeur doit être appelé correctement
avec super, en passant props.
• Attente :Le DisplayMessagescomposant doit avoir un état initial égal
à {input: "", messages: []}.

class DisplayMessages extends React.Component {

// Change code below this line
constructor(props){
super(props)
this.state={
messages:[],
input:""
}
}
// Change code above this line
render() {
return <div />
}
};

Gérer l'état localement d'abord

Ici, vous finirez de créer le DisplayMessagescomposant.
Tout d'abord, dans la render()méthode, demandez au composant de rendre
un inputélément, buttonun élément et ulun élément. Lorsque l' inputélément
change, il doit déclencher une handleChange()méthode. En outre,
l' inputélément doit restituer la valeur de inputqui se trouve dans l'état du
composant. L' buttonélément doit déclencher une submitMessage()méthode
lorsqu'il est cliqué.

Deuxièmement, écrivez ces deux méthodes. La handleChange()méthode doit

mettre à jour le inputavec ce que l'utilisateur
tape. La submitMessage()méthode doit concaténer le message actuel (stocké
dans input) au messagestableau dans l'état local et effacer la valeur de input.

Enfin, utilisez le ulpour mapper sur le tableau de messageset affichez-le à

l'écran sous la forme d'une liste d' liéléments.

Exécutez les tests (Ctrl + Entrée)Réinitialiser cette leçon

Obtenir de l'aide

Essais

• Attente :Le DisplayMessagescomposant doit s'initialiser avec un état

égal à { input: "", messages: [] }.
• Attente :Le DisplayMessagescomposant doit rendre a divcontenant
un h2élément, un buttonélément, un ulélément et lides éléments en
tant qu'enfants.
• Attente :.mapdoit être utilisé sur le messagestableau.
• Attente :L' inputélément doit restituer la valeur de inputdans l'état
local.
• Attente :L'appel de la méthode handleChangedoit mettre à jour
la inputvaleur de l'état à l'entrée actuelle.
• Attente :Cliquer sur le Add messagebouton doit appeler la
méthode submitMessagequi doit ajouter le
courant inputau messagestableau dans l'état.
• Attente :La submitMessageméthode doit effacer l'entrée actuelle

class DisplayMessages extends React.Component {

constructor(props) {
super(props);
this.state = {
input: '',
messages: []
}
}
// add handleChange() and submitMessage() methods here
handleChange(event){
this.setState({
input: event.target.value,
messages: this.state.messages
})
}

submitMessage(){
this.setState({
input: '',
messages: [...this.state.messages, this.state.input]
})
}

render() {
return (
<div>
<h2>Type in a new Message:</h2>
{ /* render an input, button, and ul here */ }
 <input onChange={this.handleChange.bind(this)}
value={this.state.input}/>
<button
onClick={this.submitMessage.bind(this)}>Submit</button>
<ul>
{this.state.messages.map((x, i)=>{
return <li key={i}>{x}</li>
})}
</ul>
{ /* change code above this line */ }
</div>
);
}
};

Extraire la logique d'état vers Redux

Maintenant que vous avez terminé le composant React, vous devez déplacer
la logique qu'il exécute localement statedans Redux. Il s'agit de la première
étape pour connecter l'application React simple à Redux. La seule
fonctionnalité dont dispose votre application est d'ajouter de nouveaux
messages de l'utilisateur à une liste non ordonnée. L'exemple est simple afin
de démontrer comment React et Redux fonctionnent ensemble.

Tout d'abord, définissez un type d'action ADDet définissez-le sur un

const ADD. Ensuite, définissez un créateur d'action addMessage()qui crée
l'action pour ajouter un message. Vous devrez transmettre un messageà ce
créateur d'action et inclure le message dans le fichier action.

Créez ensuite un réducteur appelé messageReducer()qui gère l'état des

messages. L'état initial doit être égal à un tableau vide. Ce réducteur doit
ajouter un message au tableau des messages conservés dans l'état, ou
renvoyer l'état actuel. Enfin, créez votre magasin Redux et passez-lui le
réducteur.

Exécutez les tests (Ctrl + Entrée)Réinitialiser cette leçon

Obtenir de l'aide

Essais

• Attente :Le const ADDdoit exister et contenir une valeur égale à la

chaîneADD
• Attente :Le créateur de l'action addMessagedoit renvoyer un
objet typeégal à ADDet messageégal au message transmis.
• Attente :messageReducerdevrait être une fonction.
• Attente :Le magasin doit exister et avoir un état initial défini sur un
tableau vide.
• Attente :La répartition addMessagecontre le magasin doit ajouter
immuablement un nouveau message au tableau des messages
conservés dans l'état.
• Attente :Le messageReducerdoit renvoyer l'état actuel s'il est appelé
avec d'autres actions.
 Utiliser le fournisseur pour connecter
Redux à React
Dans le dernier défi, vous avez créé un magasin Redux pour gérer le tableau
de messages et créé une action pour ajouter de nouveaux messages. L'étape
suivante consiste à fournir à React un accès au magasin Redux et aux actions
dont il a besoin pour envoyer les mises à jour. React Redux fournit son react-
reduxpackage pour vous aider à accomplir ces tâches.

React Redux fournit une petite API avec deux fonctionnalités clés
: Provideret connect. Un autre défi couvre connect. Il Providers'agit d'un
composant wrapper de React Redux qui encapsule votre application
React. Ce wrapper vous permet ensuite d'accéder à
Redux storeet dispatchaux fonctions de votre arborescence de
composants. Providerprend deux accessoires, le magasin Redux et les
composants enfants de votre application. La définition d' Providerun
composant d'application peut ressembler à ceci :

<Provider store={store}>
<App/>
</Provider>

L'éditeur de code affiche maintenant tout votre code Redux et React des
derniers défis. Il comprend le magasin Redux, les actions et
le DisplayMessagescomposant. La seule pièce nouvelle est
le AppWrappercomposant en bas. Utilisez ce composant de niveau supérieur
pour rendre le Providerfrom ReactReduxet passez le magasin Redux en tant
que prop. Rendez ensuite le DisplayMessagescomposant en tant
qu'enfant. Une fois que vous avez terminé, vous devriez voir votre
composant React rendu sur la page.

Remarque : React Redux est disponible en tant que variable globale ici, vous
pouvez donc accéder au fournisseur avec une notation par points. Le code
de l'éditeur en profite et le définit sur une constante Providerà utiliser dans
la AppWrapperméthode de rendu.

Exécutez les tests (Ctrl + Entrée)Réinitialiser cette leçon

Obtenir de l'aide

Essais

• Attente :Le AppWrapperdevrait rendre.

 • Attente :Le Providercomposant wrapper doit avoir un accessoire
qui storelui est transmis, égal au magasin Redux.
• Attente :DisplayMessagesdevrait rendre comme un enfant
de AppWrapper.
• Attente :Le DisplayMessagescomposant doit rendre un
élément h2, input, buttonet ul.

// Redux:
const ADD = 'ADD';

const addMessage = (message) => {

return {
type: ADD,
message
}
};

const messageReducer = (state = [], action) => {

switch (action.type) {
case ADD:
return [
...state,
action.message
];
default:
return state;
}
};

const store = Redux.createStore(messageReducer);

// React:

class DisplayMessages extends React.Component {

constructor(props) {
super(props);
 this.state = {
input: '',
messages: []
}
this.handleChange = this.handleChange.bind(this);
this.submitMessage = this.submitMessage.bind(this);
}
handleChange(event) {
this.setState({
input: event.target.value
});
}
submitMessage() {
this.setState((state) => {
const currentMessage = state.input;
return {
input: '',
messages: state.messages.concat(currentMessage)
};
});
}
render() {
return (
<div>
<h2>Type in a new Message:</h2>
<input
value={this.state.input}
onChange={this.handleChange}/><br/>
<button onClick={this.submitMessage}>Submit</bu
tton>
<ul>
{this.state.messages.map( (message, idx) => {
return (
<li key={idx}>{message}</li>
)
})
}
</ul>
 </div>
);
}
};

const Provider = ReactRedux.Provider;

class AppWrapper extends React.Component

{
// Render the Provider below this line
render(){
return (
<Provider store={store} >
<DisplayMessages></DisplayMessages>
</Provider>
);
}
// Chan{ge code above this line
};
Mapper l'état aux accessoires
Le Providercomposant vous permet de fournir stateet dispatchà vos
composants React, mais vous devez spécifier exactement l'état et les actions
que vous souhaitez. De cette façon, vous vous assurez que chaque
composant n'a accès qu'à l'état dont il a besoin. Pour ce faire, créez deux
fonctions : mapStateToProps()et mapDispatchToProps().

Dans ces fonctions, vous déclarez à quels éléments d'état vous souhaitez
avoir accès et quels créateurs d'action vous devez pouvoir envoyer. Une fois
ces fonctions en place, vous verrez comment utiliser la connectméthode
React Redux pour les connecter à vos composants dans un autre défi.

Remarque : Dans les coulisses, React Redux utilise

la store.subscribe()méthode pour implémenter mapStateToProps().
Créez une fonction mapStateToProps(). Cette fonction doit
prendre statecomme argument, puis renvoyer un objet qui mappe cet état à
des noms de propriété spécifiques. Ces propriétés deviendront accessibles à
votre composant via props. Étant donné que cet exemple conserve l'état
entier de l'application dans un seul tableau, vous pouvez transmettre cet
état entier à votre composant. Créez une propriété messagesdans l'objet
renvoyé et définissez-la sur state.

Exécutez les tests (Ctrl + Entrée)Réinitialiser cette leçon

Obtenir de l'aide

Essais

• Attente :Le const statedoit être un tableau vide.

• Attente :mapStateToPropsdevrait être une fonction.
• Attente :mapStateToPropsdoit renvoyer un objet.
• Attente :Passer un tableau en tant qu'état à mapStateToPropsdevrait
renvoyer ce tableau assigné à une clé de messages.
• const state = [];
• const mapStateToProps=(state)=>{
• return {
• messages : state,
• }
• }
• // Change code below this line
Envoi de la carte aux accessoires
La mapDispatchToProps()fonction est utilisée pour fournir des créateurs
d'actions spécifiques à vos composants React afin qu'ils puissent envoyer
des actions contre le magasin Redux. Sa structure est similaire à
la mapStateToProps()fonction que vous avez écrite dans le dernier défi. Il
renvoie un objet qui mappe les actions de répartition aux noms de propriété,
qui deviennent component props. Cependant, au lieu de renvoyer une partie
de state, chaque propriété renvoie une fonction qui appelle dispatchavec un
créateur d'action et toutes les données d'action pertinentes. Vous y avez
accès dispatchcar il est passé à en mapDispatchToProps()tant que paramètre
lorsque vous définissez la fonction, tout comme vous l'avez
passé stateà mapStateToProps(). Dans les coulisses, React Redux utilise
Redux store.dispatch()pour effectuer ces envois
avec mapDispatchToProps(). Ceci est similaire à la façon dont il
utilisestore.subscribe()pour les composants mappés sur state.

Par exemple, vous avez un loginUser()créateur d'action qui prend

a usernamecomme charge utile d'action. L'objet
renvoyé mapDispatchToProps()par ce créateur d'action ressemblerait à :

{
submitLoginUser: function(username) {
dispatch(loginUser(username));
}
}

L'éditeur de code fournit un créateur d'action appelé addMessage(). Écrivez la

fonction mapDispatchToProps()qui prend dispatchcomme argument, puis
retourne un objet. L'objet doit avoir une propriété submitNewMessagedéfinie
sur la fonction dispatch, qui prend un paramètre pour le nouveau message à
ajouter lors de la distribution addMessage().

Exécutez les tests (Ctrl + Entrée)Réinitialiser cette leçon

Obtenir de l'aide

Essais

• Attente :addMessagedoit renvoyer un objet avec les clés typeet message.

• Attente :mapDispatchToPropsdevrait être une fonction.
• Attente :mapDispatchToPropsdoit renvoyer un objet.
• Attente :Dispatcher addMessageavec submitNewMessagefrom mapDispatch
ToPropsdevrait renvoyer un message à la fonction dispatch
• const addMessage = (message) => {
• return {
• type: 'ADD',
• message: message
 • }
• };
• const mapDispatchToProps =(dispatc
h)=>{
• return {
• submitNewMessage:function(mess
age) {
• dispatch(addMessage(message));
• }
• }
• }
• // Change code below this line
Connectez Redux à React
Maintenant que vous avez écrit à la fois mapStateToProps()les fonctions
et mapDispatchToProps(), vous pouvez les utiliser pour mapper stateet dispatchà
l' propsun de vos composants React. La connectméthode de React Redux peut
gérer cette tâche. Cette méthode prend deux arguments
facultatifs, mapStateToProps()et mapDispatchToProps(). Ils sont facultatifs car
vous pouvez avoir un composant qui n'a besoin que d'un accès statemais qui
n'a pas besoin d'envoyer d'actions, ou vice versa.

Pour utiliser cette méthode, transmettez les fonctions en tant qu'arguments

et appelez immédiatement le résultat avec votre composant. Cette syntaxe
est un peu inhabituelle et ressemble à :

connect(mapStateToProps, mapDispatchToProps)(MyComponent)
Remarque : Si vous souhaitez omettre l'un des arguments de
la connectméthode, passez-le nullà sa place.

L'éditeur de code a les fonctions mapStateToProps()et mapDispatchToProps()et

un nouveau composant React appelé Presentational. Connectez ce composant
à Redux avec la connectméthode de l' ReactReduxobjet global et appelez-le
immédiatement sur le Presentationalcomposant. Affectez le résultat à un
nouvel constappelé ConnectedComponentqui représente le composant
connecté. Ça y est, vous êtes maintenant connecté à Redux ! Essayez de
remplacer l'un des connectarguments de par nullet observez les résultats du
test.

Exécutez les tests (Ctrl + Entrée)Réinitialiser cette leçon

Obtenir de l'aide

Essais

• Attente :Le Presentationalcomposant doit s'afficher.

• Attente :Le Presentationalcomposant doit recevoir un
accessoire messagesvia connect.
• Attente :Le Presentationalcomposant doit recevoir un
accessoire submitNewMessagevia connect.
• const addMessage = (message) => {
• return {
• type: 'ADD',
• message: message
• }
• };
•
• const mapStateToProps = (state) => {
• return {
• messages: state
• }
• };
•
• const mapDispatchToProps = (dispatch) => {
• return {
• submitNewMessage: (message) => {
• dispatch(addMessage(message));
• }
• }
• };
•

• class Presentational extends React

.Component {
 • constructor(props) {
• super(props);
• }
• render() {
• return <h3>This is a Presentat
ional Component</h3>
• }
• };
•

• const connect = ReactRedux.connect

;
• const ConnectedComponent=connect(m
apStateToProps,mapDispatchToProps)
(Presentational)
• // Change code below this line
Connectez Redux à l'application
Messages
Maintenant que vous comprenez comment connectconnecter React à Redux,
vous pouvez appliquer ce que vous avez appris à votre composant React qui
gère les messages.

Dans la dernière leçon, le composant que vous avez connecté à Redux

s'appelait Presentational, et ce n'était pas arbitraire. Ce terme
fait généralement référence aux composants React qui ne sont pas
directement connectés à Redux. Ils sont simplement responsables de la
présentation des UI et le font en fonction des props qu'ils reçoivent. En
revanche, les composants de conteneur sont connectés à Redux. Ceux-ci
sont généralement responsables de la répartition des actions vers le magasin
et transmettent souvent l'état du magasin aux composants enfants en tant
qu'accessoires.
L'éditeur de code contient tout le code que vous avez écrit dans cette
section jusqu'à présent. Le seul changement est que le composant React est
renommé en Presentational. Créez un nouveau composant contenu dans une
constante appelée Containerqui utilise connectpour connecter
le Presentationalcomposant à Redux. Ensuite, dans le AppWrapper, rendez
le Providercomposant React Redux. Passez Providerle Redux storecomme
accessoire et rendez-le Containercomme un enfant. Une fois que tout est
configuré, vous verrez à nouveau l'application de messages rendue sur la
page.

Exécutez les tests (Ctrl + Entrée)Réinitialiser cette leçon

Obtenir de l'aide

Essais

• Attente :Le AppWrapperdevrait rendre à la page.

• Attente :Le Presentationalcomposant doit s'afficher sur la page.
• Attente :Le Presentationalcomposant doit restituer les
éléments h2, input, buttonet ul.
• Attente :Le Presentationalcomposant doit être reçu messagesdu magasin
Redux en tant qu'accessoire.
• Attente :Le Presentationalcomposant doit recevoir
le submitMessagecréateur de l'action comme accessoire.
• // Redux:
• const ADD = 'ADD';
•
• const addMessage = (message) => {
• return {
• type: ADD,
• message: message
• }
• };
•
• const messageReducer = (state = [], action) => {
• switch (action.type) {
• case ADD:
• return [
• ...state,
• action.message
• ];
• default:
• return state;
• }
• };
•
• const store = Redux.createStore(messageReducer);
•
• // React:
• class Presentational extends React.Component {
• constructor(props) {
• super(props);
• this.state = {
• input: '',
• messages: []
• }
• this.handleChange = this.handleChange.bind(this
);
• this.submitMessage = this.submitMessage.bind(th
is);
• }
• handleChange(event) {
• this.setState({
• input: event.target.value
• });
• }
• submitMessage() {
• this.setState((state) => {
• const currentMessage = state.input;
• return {
• input: '',
• messages: state.messages.concat(currentMess
age)
• };
• });
• }
• render() {
• return (
• <div>
• <h2>Type in a new Message:</h2>
• <input
• value={this.state.input}
• onChange={this.handleChange}/><br/>
• <button onClick={this.submitMessage}>Submit
</button>
• <ul>
• {this.state.messages.map( (message, idx)
=> {
• return (
• <li key={idx}>{message}</li>
• )
• })
• }
• </ul>
• </div>
• );
• }
• };
•
• // React-Redux:
• const mapStateToProps = (state) => {
• return { messages: state }
• };
•
• const mapDispatchToProps = (dispatch) => {
• return {
• submitNewMessage: (newMessage) => {
• dispatch(addMessage(newMessage))
• }
• }
• };
•

• const Provider = ReactRedux.Provid

er;
 • const connect = ReactRedux.connect
;
• const Container = connect(mapState
ToProps,mapDispatchToProps)(Presen
tational)
• // Define the Container component
here:
•

• class AppWrapper extends React.Com

ponent {
• constructor(props) {
• super(props);
• }
• render() {
• // Complete the return stateme
nt:
• return(
• <Provider store={store}>
• <Container/>
• </Provider>
• )
• }
• };
Extraire l'état local dans Redux
Vous avez presque fini! Rappelez-vous que vous avez écrit tout le code
Redux afin que Redux puisse contrôler la gestion de l'état de votre
application de messages React. Maintenant que Redux est connecté, vous
devez extraire la gestion de l'état du Presentationalcomposant et dans
Redux. Actuellement, Redux est connecté, mais vous gérez l'état localement
dans le Presentationalcomposant.
Dans le Presentationalcomposant, commencez par supprimer
la messagespropriété dans le local state. Ces messages seront gérés par
Redux. Ensuite, modifiez la submitMessage()méthode pour qu'elle soit
distribuée submitNewMessage()à partir de this.propset transmettez l'entrée de
message actuelle de local stateen tant qu'argument. Étant donné que vous
avez supprimé messagesde l'état local, supprimez également
la messagespropriété de l'appel à ici. this.setState()Enfin, modifiez
la render()méthode afin qu'elle soit mappée sur les messages reçus
de propsplutôt que sur state.

Une fois ces modifications apportées, l'application continuera à fonctionner

de la même manière, sauf que Redux gère l'état. Cet exemple illustre
également comment un composant peut avoir local state: votre composant
suit toujours l'entrée de l'utilisateur localement dans son propre
fichier state. Vous pouvez voir comment Redux fournit un cadre de gestion
d'état utile en plus de React. Vous avez obtenu le même résultat en utilisant
uniquement l'état local de React au début, et cela est généralement possible
avec des applications simples. Cependant, à mesure que vos applications
deviennent plus grandes et plus complexes, votre gestion d'état augmente
également, et c'est le problème que Redux résout.

Exécutez les tests (Ctrl + Entrée)Réinitialiser cette leçon

Obtenir de l'aide

Essais

• Attente :Le AppWrapperdevrait rendre à la page.

• Attente :Le Presentationalcomposant doit s'afficher sur la page.
• Attente :Le Presentationalcomposant doit restituer les
éléments h2, input, buttonet ul.
• Attente :Le Presentationalcomposant doit être reçu messagesdu magasin
Redux en tant qu'accessoire.
• Attente :Le Presentationalcomposant doit recevoir
le submitMessagecréateur de l'action comme accessoire.
• Attente :L'état du Presentationalcomposant doit contenir une
propriété, input, qui est initialisée avec une chaîne vide.
• Attente :La saisie de l' inputélément doit mettre à jour l'état
du Presentationalcomposant.
• Attente :L'envoi du submitMessagesur le Presentationalcomposant doit
mettre à jour le magasin Redux et effacer l'entrée dans l'état local.
 • Attente :Le Presentationalcomposant doit restituer le messagesdepuis le
magasin Redux.

Extraire l'état local dans Redux

Vous avez presque fini! Rappelez-vous que vous avez écrit tout le code
Redux afin que Redux puisse contrôler la gestion de l'état de votre
application de messages React. Maintenant que Redux est connecté, vous
devez extraire la gestion de l'état du Presentationalcomposant et dans
Redux. Actuellement, Redux est connecté, mais vous gérez l'état localement
dans le Presentationalcomposant.

Dans le Presentationalcomposant, commencez par supprimer

la messagespropriété dans le local state. Ces messages seront gérés par
Redux. Ensuite, modifiez la submitMessage()méthode pour qu'elle soit
distribuée submitNewMessage()à partir de this.propset transmettez l'entrée de
message actuelle de local stateen tant qu'argument. Étant donné que vous
avez supprimé messagesde l'état local, supprimez également
la messagespropriété de l'appel à ici. this.setState()Enfin, modifiez
la render()méthode afin qu'elle soit mappée sur les messages reçus
de propsplutôt que sur state.

Une fois ces modifications apportées, l'application continuera à fonctionner

de la même manière, sauf que Redux gère l'état. Cet exemple illustre
également comment un composant peut avoir local state: votre composant
suit toujours l'entrée de l'utilisateur localement dans son propre
fichier state. Vous pouvez voir comment Redux fournit un cadre de gestion
d'état utile en plus de React. Vous avez obtenu le même résultat en utilisant
uniquement l'état local de React au début, et cela est généralement possible
avec des applications simples. Cependant, à mesure que vos applications
deviennent plus grandes et plus complexes, votre gestion d'état augmente
également, et c'est le problème que Redux résout.

Exécutez les tests (Ctrl + Entrée)Réinitialiser cette leçon

Obtenir de l'aide

Essais
 • Attente :Le AppWrapperdevrait rendre à la page.
• Attente :Le Presentationalcomposant doit s'afficher sur la page.
• Attente :Le Presentationalcomposant doit restituer les
éléments h2, input, buttonet ul.
• Attente :Le Presentationalcomposant doit être reçu messagesdu magasin
Redux en tant qu'accessoire.
• Attente :Le Presentationalcomposant doit recevoir
le submitMessagecréateur de l'action comme accessoire.
• Attente :L'état du Presentationalcomposant doit contenir une
propriété, input, qui est initialisée avec une chaîne vide.
• Attente :La saisie de l' inputélément doit mettre à jour l'état
du Presentationalcomposant.
• Attente :L'envoi du submitMessagesur le Presentationalcomposant doit
mettre à jour le magasin Redux et effacer l'entrée dans l'état local.
• Attente :Le Presentationalcomposant doit restituer le messagesdepuis le
magasin Redux.

// Redux:
const ADD = 'ADD';

const addMessage = (message) => {

return {
type: ADD,
message: message
}
};

const messageReducer = (state = [], a

ction) => {
switch (action.type) {
case ADD:
return [
...state,
action.message
];
default:
 return state;
}
};

const store = Redux.createStore(messa

geReducer);

// React:
const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;

// Change code below this line

class Presentational extends React.Co
mponent {
constructor(props) {
super(props);
this.state = {
input: '',
//messages: []
}
this.handleChange = this.handleCh
ange.bind(this);
this.submitMessage = this.submitM
essage.bind(this);
}
handleChange(event) {
this.setState({
input: event.target.value
});
}
 submitMessage() {
const currentMessage = this.state
.input;

this.props.submitNewMessage(currentMe
ssage);
this.setState({
input: '',
// messages: state.messages.conc
at(state.input)
});
}
render() {
return (
<div>
<h2>Type in a new Message:</h
2>
<input
value={this.state.input}
onChange={this.handleChange
}/><br/>
<button onClick={this.submitM
essage}>Submit</button>
<ul>
{this.props.messages.map( (
message, idx) => {
return (
<li key={idx}>{messa
ge}</li>
 )
})
}
</ul>
</div>
);
}
};
// Change code above this line

const mapStateToProps = (state) => {

return {messages: state}
};

const mapDispatchToProps = (dispatch)

=> {
return {
submitNewMessage: (message) => {
dispatch(addMessage(message))
}
}
};

const Container = connect(mapStateToP

rops, mapDispatchToProps)(Presentatio
nal);

class AppWrapper extends React.Compon

ent {
render() {
 return (
<Provider store={store}>
<Container/>
</Provider>
);
}
};

FIN D’APPRENTISSAGE DE REACT-REDUX