SlideShare une entreprise Scribd logo

React redux-tutoriel-1

S
Sem Koto

Tutoriel sur react et redux : projet pratique

1  sur  9
Télécharger pour lire hors ligne
Tutoriel N°0057
ReactJs + Redux
Objectif du projet :
1) Comprendre React dans sa globalité, Flux , Redux ;
2) Comprendre les différentes étapes/parcours à suivre pour une bonne
implémentation ;
3) Projet pratique résumant tout le parcours.
Commençons maintenant !
1) Comprendre React dans sa globalité, Flux, Redux
React est une librairie créée par Facebook permettant de générer des
composants web au travers d’une API. React est aujourd’hui utilisé en
production par plusieurs entreprises telles que Facebook ou AirBnb avec de
très bons résultats, et est donc bel est bien une alternative viable aux
frameworks tels qu’Angular ou Ember.
Cependant l’utilisation de React, qui ne permet que de créer des
composants, pose des questions quant à l’architecture logicielle qu’il faut
utiliser : comment aller chercher sa donnée ? Comment mettre à jour les
composants lorsque la donnée change ? Il est possible de choisir d’utiliser
une approche MVC classique, avec Backbone ou encore Angular, mais
l’approche semble peu naturelle et ne pas respecter la philosophie de React,
qui encourage l’immutabilité et le flux de données à sens unique.
Flux,
Flux est une architecture (ça n’est pas une librairie, et encore moins un
framework) simple et se caractérise par le fait que le flux de données est
unidirectionnel.
Cette architecture contient des vues, les composants React, qui écoutent les
modifications de store pour se mettre à jour. En cas d’évènement utilisateur
(clique, frappe sur le clavier, etc.), le composant React appelle une méthode
d’un objet Action qui lui même appelle le dispatcher, servant ici de "bus
d’évènements". Les stores écoutent le dispatcher et se mettent alors à jour
en fonction des évènements envoyés.
POURQUOI UTILISER REDUX ?
Redux reprend les concepts de Flux mais en simplifiant beaucoup le
processus de développement. Cette simplification est en partie due au fait
que Redux utilise des concepts liés à la programmation fonctionnelle pour
changer l’état de l’application.
Voici un exemple d’une application Redux toute simple :
import { createStore } from 'redux'
Le reducer est une fonction dite "pure" ayant (state, action) => state
comme signature. Il va décrire comment une action transforme le state
(l'état) de l'application en un nouvel état. L'implémentation de l'état de
l'application dépend totalement de votre cas et peut être une primitive, un
tableau, un objet, ou bien même une structure de données immutable (basé
sur Immutable.js par exemple). La seule chose à retenir est que cette partie
ne DOIT PAS modifier l'objet correspondant à l'état de l'application lorsque
l'état change. Dans cet exemple, on utilise un switch et des strings, mais on
pourra très bien utiliser un helper qui va suivre une autre manière de faire.
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
On crée un Redux store, qui va garder l'état de notre app.
L'api correspond à trois fonctions { subscribe, dispatch, getState }.
On peut s'abonner manuellement ou bien lier l'état à une vue
automatiquement à l'aide du binding.
store.subscribe(() =>
console.log(store.getState())
)
Le seul moyen de modifier l'état de l'application est de dispatcher des
actions.
Les actions peuvent être serialisées, loggées ou sauvegardées pour plus
tard.
store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1
Plutôt que de modifier l’état de l’application directement, on spécifie
les modifications qui peuvent arriver avec de simple objets appelés actions.
Puis on écrit une fonction appelée reducer, qui se chargera de décider
comment chaque action transforme l’état de l’application.
DIFFÉRENCES AVEC FLUX ?
1. Redux n’a pas de dispatcher
2. Redux n’a pas la possibilité de définir plusieurs Stores.
A la place, nous avons un store unique avec un seul reducer. Au fur et a
mesure que l’application se complexifie, l’unique reducer va être découpé
en plusieurs petit reducer indépendants.
L’architecture de Redux, semble assez impressionnante (surtout pour une
application de compteur) mais la beauté de la chose est de voir a quel point
on peut “scaler” et comment on arrive à gérer des applications complexes
de manière très simple.
2) COMPRENDRE LES DIFFERENTS
PARCOURS POUR IMPLEMENTER
L’ARCHITECTURE.
3)PROJET PRATIQUE RESUMANT TOUT LE
PARCOURS.
Où allons nous ?
Nous allons créer une liste de fruit qui au click, nous affichera des
informations sur ce dernier
Télécharger le dossier de base ICI
Et installer toutes les dependance : npm install
L’execution de cette commande créera un dossier node_module qui
comportera tous les plugin dont on aura besoin.
L’arboressence de notre dossier en general :
/assets
/dev
/src
Package
README
webpack.config
les assets nous aurons tous les fichiers associer à notre projets (css, js,
images …..)
dev , là se retrouvera tous notre code qui sera regrouper dans un dossier
js
le premier fichier est index.js
import 'babel-polyfill';
import React from 'react';
import ReactDOM from "react-dom";
ReactDOM.render(
<h1> Bonjour chers tous!</h1>,
document.getElementById('root')
);
petite explication
Publicité

Recommandé

Android-Tp5 : web services
Android-Tp5 : web servicesAndroid-Tp5 : web services
Android-Tp5 : web servicesLilia Sfaxi
 
4 asynch task_services_thread
4 asynch task_services_thread4 asynch task_services_thread
4 asynch task_services_threadSaber LAJILI
 
Android-Tp1: éléments graphiques de base et intents
Android-Tp1: éléments graphiques de base et intentsAndroid-Tp1: éléments graphiques de base et intents
Android-Tp1: éléments graphiques de base et intentsLilia Sfaxi
 

Contenu connexe

Tendances

Android-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateursAndroid-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateursLilia Sfaxi
 
3 shared preference_sq_lite
3 shared preference_sq_lite3 shared preference_sq_lite
3 shared preference_sq_liteSaber LAJILI
 
4 asynch task_services_thread
4 asynch task_services_thread4 asynch task_services_thread
4 asynch task_services_threadSaber LAJILI
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniterAtsé François-Xavier KOBON
 
Les ateliers android_1_vers2015
Les ateliers android_1_vers2015Les ateliers android_1_vers2015
Les ateliers android_1_vers2015Sabeur LAJILI
 
20100225 Ippon Osgi Are You Ready
20100225 Ippon Osgi Are You Ready20100225 Ippon Osgi Are You Ready
20100225 Ippon Osgi Are You ReadyGeoffray Gruel
 
eServices-Tp1: Web Services
eServices-Tp1: Web ServiceseServices-Tp1: Web Services
eServices-Tp1: Web ServicesLilia Sfaxi
 
Android-Tp4: stockage
Android-Tp4: stockageAndroid-Tp4: stockage
Android-Tp4: stockageLilia Sfaxi
 
Architecture java j2 ee a partager
Architecture java j2 ee a partagerArchitecture java j2 ee a partager
Architecture java j2 ee a partageraliagadir
 
Tp1 - WS avec JAXWS
Tp1 - WS avec JAXWSTp1 - WS avec JAXWS
Tp1 - WS avec JAXWSLilia Sfaxi
 
eServices-Tp4: esb++
eServices-Tp4: esb++eServices-Tp4: esb++
eServices-Tp4: esb++Lilia Sfaxi
 
Presentation Tomcat Load Balancer
Presentation Tomcat Load BalancerPresentation Tomcat Load Balancer
Presentation Tomcat Load Balancertarkaus
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJSAbdoulaye Dieng
 
Marzouk une introduction à jdbc
Marzouk une introduction à jdbcMarzouk une introduction à jdbc
Marzouk une introduction à jdbcabderrahim marzouk
 

Tendances (17)

Android-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateursAndroid-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateurs
 
3 shared preference_sq_lite
3 shared preference_sq_lite3 shared preference_sq_lite
3 shared preference_sq_lite
 
4 asynch task_services_thread
4 asynch task_services_thread4 asynch task_services_thread
4 asynch task_services_thread
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
 
Les ateliers android_1_vers2015
Les ateliers android_1_vers2015Les ateliers android_1_vers2015
Les ateliers android_1_vers2015
 
20100225 Ippon Osgi Are You Ready
20100225 Ippon Osgi Are You Ready20100225 Ippon Osgi Are You Ready
20100225 Ippon Osgi Are You Ready
 
eServices-Tp1: Web Services
eServices-Tp1: Web ServiceseServices-Tp1: Web Services
eServices-Tp1: Web Services
 
Marzouk jsp
Marzouk jspMarzouk jsp
Marzouk jsp
 
Android-Tp4: stockage
Android-Tp4: stockageAndroid-Tp4: stockage
Android-Tp4: stockage
 
Cours jee 1
Cours jee 1Cours jee 1
Cours jee 1
 
Architecture java j2 ee a partager
Architecture java j2 ee a partagerArchitecture java j2 ee a partager
Architecture java j2 ee a partager
 
Tp1 - WS avec JAXWS
Tp1 - WS avec JAXWSTp1 - WS avec JAXWS
Tp1 - WS avec JAXWS
 
eServices-Tp4: esb++
eServices-Tp4: esb++eServices-Tp4: esb++
eServices-Tp4: esb++
 
Presentation Tomcat Load Balancer
Presentation Tomcat Load BalancerPresentation Tomcat Load Balancer
Presentation Tomcat Load Balancer
 
#2 Architecture OSGi
#2 Architecture OSGi#2 Architecture OSGi
#2 Architecture OSGi
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
 
Marzouk une introduction à jdbc
Marzouk une introduction à jdbcMarzouk une introduction à jdbc
Marzouk une introduction à jdbc
 

En vedette

Chapitre 1: VII. Distorsions des impulsions miraculeuses
Chapitre 1: VII. Distorsions des impulsions miraculeusesChapitre 1: VII. Distorsions des impulsions miraculeuses
Chapitre 1: VII. Distorsions des impulsions miraculeusesPierrot Caron
 
JDTP Y AKTP BASE DE DATOS 903
JDTP Y AKTP BASE DE DATOS 903JDTP Y AKTP BASE DE DATOS 903
JDTP Y AKTP BASE DE DATOS 903aktp2311
 
En iyi koçluk eğitimi
En iyi koçluk eğitimiEn iyi koçluk eğitimi
En iyi koçluk eğitimiE Koc
 
Arquitectura moderna
Arquitectura modernaArquitectura moderna
Arquitectura modernaYODALIS ROJAS
 
Case studies for presentation
Case studies for presentationCase studies for presentation
Case studies for presentationhanaa_m
 
4 psikomotor ve fiziksel gelişim
4   psikomotor ve fiziksel gelişim4   psikomotor ve fiziksel gelişim
4 psikomotor ve fiziksel gelişimKenan Polat
 
Final Audience profile
Final Audience profileFinal Audience profile
Final Audience profileIsabelle Humm
 
(Gelişim+psikolojisi+dersi+için)+motor+gelişim+2.+slayt
(Gelişim+psikolojisi+dersi+için)+motor+gelişim+2.+slayt(Gelişim+psikolojisi+dersi+için)+motor+gelişim+2.+slayt
(Gelişim+psikolojisi+dersi+için)+motor+gelişim+2.+slaytbendelimiyim
 
The BBC Insitution
The BBC InsitutionThe BBC Insitution
The BBC InsitutionMollie Owen
 
Comment se logent les voyageurs d'affaires à Paris ?
Comment se logent les voyageurs d'affaires à Paris ?Comment se logent les voyageurs d'affaires à Paris ?
Comment se logent les voyageurs d'affaires à Paris ?Paris Attitude
 
Your Ultimate Hourly Insights Guide: What do your hourly employees really want?
Your Ultimate Hourly Insights Guide: What do your hourly employees really want?Your Ultimate Hourly Insights Guide: What do your hourly employees really want?
Your Ultimate Hourly Insights Guide: What do your hourly employees really want?Snag
 

En vedette (18)

Chapitre 1: VII. Distorsions des impulsions miraculeuses
Chapitre 1: VII. Distorsions des impulsions miraculeusesChapitre 1: VII. Distorsions des impulsions miraculeuses
Chapitre 1: VII. Distorsions des impulsions miraculeuses
 
JDTP Y AKTP BASE DE DATOS 903
JDTP Y AKTP BASE DE DATOS 903JDTP Y AKTP BASE DE DATOS 903
JDTP Y AKTP BASE DE DATOS 903
 
Certificates
CertificatesCertificates
Certificates
 
Magazine evaluation
Magazine evaluationMagazine evaluation
Magazine evaluation
 
Pubblicità e informazione (per avvocati) Limiti e ambiti applicativi
Pubblicità e informazione (per avvocati) Limiti e ambiti applicativiPubblicità e informazione (per avvocati) Limiti e ambiti applicativi
Pubblicità e informazione (per avvocati) Limiti e ambiti applicativi
 
Barroc 2 a
Barroc 2 aBarroc 2 a
Barroc 2 a
 
En iyi koçluk eğitimi
En iyi koçluk eğitimiEn iyi koçluk eğitimi
En iyi koçluk eğitimi
 
Arquitectura moderna
Arquitectura modernaArquitectura moderna
Arquitectura moderna
 
Case studies for presentation
Case studies for presentationCase studies for presentation
Case studies for presentation
 
4 psikomotor ve fiziksel gelişim
4   psikomotor ve fiziksel gelişim4   psikomotor ve fiziksel gelişim
4 psikomotor ve fiziksel gelişim
 
Final Audience profile
Final Audience profileFinal Audience profile
Final Audience profile
 
(Gelişim+psikolojisi+dersi+için)+motor+gelişim+2.+slayt
(Gelişim+psikolojisi+dersi+için)+motor+gelişim+2.+slayt(Gelişim+psikolojisi+dersi+için)+motor+gelişim+2.+slayt
(Gelişim+psikolojisi+dersi+için)+motor+gelişim+2.+slayt
 
OOP Inheritance
OOP InheritanceOOP Inheritance
OOP Inheritance
 
Marca Personal
Marca Personal Marca Personal
Marca Personal
 
Luxito.ir
Luxito.irLuxito.ir
Luxito.ir
 
The BBC Insitution
The BBC InsitutionThe BBC Insitution
The BBC Insitution
 
Comment se logent les voyageurs d'affaires à Paris ?
Comment se logent les voyageurs d'affaires à Paris ?Comment se logent les voyageurs d'affaires à Paris ?
Comment se logent les voyageurs d'affaires à Paris ?
 
Your Ultimate Hourly Insights Guide: What do your hourly employees really want?
Your Ultimate Hourly Insights Guide: What do your hourly employees really want?Your Ultimate Hourly Insights Guide: What do your hourly employees really want?
Your Ultimate Hourly Insights Guide: What do your hourly employees really want?
 

Similaire à React redux-tutoriel-1

Chapitre_11-_React-Redux.pdf
Chapitre_11-_React-Redux.pdfChapitre_11-_React-Redux.pdf
Chapitre_11-_React-Redux.pdfHassanHachicha2
 
react-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basicreact-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basiczineblahib2
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2dhugomallet
 
ESTEM_ReactJS_S1.pptx
ESTEM_ReactJS_S1.pptxESTEM_ReactJS_S1.pptx
ESTEM_ReactJS_S1.pptxaissamjadli
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon
 
Introduction à Hibernate p.1
Introduction à Hibernate p.1Introduction à Hibernate p.1
Introduction à Hibernate p.1ATHMAN HAJ-HAMOU
 
Activity
ActivityActivity
Activitydido
 
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbreact (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbzineblahib2
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EEInes Ouaz
 
Webserver tomcat-jboss-jrun-jonas doc
Webserver tomcat-jboss-jrun-jonas docWebserver tomcat-jboss-jrun-jonas doc
Webserver tomcat-jboss-jrun-jonas docWinslo Nwan
 
Mise en place de l'ActionBarCompat dans vos projets Android.
Mise en place de l'ActionBarCompat dans vos projets Android.Mise en place de l'ActionBarCompat dans vos projets Android.
Mise en place de l'ActionBarCompat dans vos projets Android.Mathias Seguy
 
jQuery Mobile & Applications Web
jQuery Mobile & Applications WebjQuery Mobile & Applications Web
jQuery Mobile & Applications WebNicolas Hoffmann
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JSAbdoulaye Dieng
 
Framework Hibernate
Framework HibernateFramework Hibernate
Framework HibernateInes Ouaz
 

Similaire à React redux-tutoriel-1 (20)

Chapitre_11-_React-Redux.pdf
Chapitre_11-_React-Redux.pdfChapitre_11-_React-Redux.pdf
Chapitre_11-_React-Redux.pdf
 
react-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basicreact-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basic
 
React-cours.pdf
React-cours.pdfReact-cours.pdf
React-cours.pdf
 
2016_js_react.pdf
2016_js_react.pdf2016_js_react.pdf
2016_js_react.pdf
 
react-fr.pdf
react-fr.pdfreact-fr.pdf
react-fr.pdf
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
 
ESTEM_ReactJS_S1.pptx
ESTEM_ReactJS_S1.pptxESTEM_ReactJS_S1.pptx
ESTEM_ReactJS_S1.pptx
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
 
Introduction à Hibernate p.1
Introduction à Hibernate p.1Introduction à Hibernate p.1
Introduction à Hibernate p.1
 
Activity
ActivityActivity
Activity
 
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbreact (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EE
 
Webserver tomcat-jboss-jrun-jonas doc
Webserver tomcat-jboss-jrun-jonas docWebserver tomcat-jboss-jrun-jonas doc
Webserver tomcat-jboss-jrun-jonas doc
 
575
575575
575
 
Mise en place de l'ActionBarCompat dans vos projets Android.
Mise en place de l'ActionBarCompat dans vos projets Android.Mise en place de l'ActionBarCompat dans vos projets Android.
Mise en place de l'ActionBarCompat dans vos projets Android.
 
Tuto spring
Tuto springTuto spring
Tuto spring
 
TP_1.pdf
TP_1.pdfTP_1.pdf
TP_1.pdf
 
jQuery Mobile & Applications Web
jQuery Mobile & Applications WebjQuery Mobile & Applications Web
jQuery Mobile & Applications Web
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
Framework Hibernate
Framework HibernateFramework Hibernate
Framework Hibernate
 

Dernier

Offres d'emploi (Mise à Jour le 19/02).pptx
Offres d'emploi (Mise à Jour le 19/02).pptxOffres d'emploi (Mise à Jour le 19/02).pptx
Offres d'emploi (Mise à Jour le 19/02).pptxMissionLocale
 
Le langage n'est-il qu'un instrument de communication ? (V2)
Le langage n'est-il qu'un instrument de communication ? (V2)Le langage n'est-il qu'un instrument de communication ? (V2)
Le langage n'est-il qu'un instrument de communication ? (V2)Gabriel Gay-Para
 
Français langue étrangère: L'impératif présent 2024
Français langue étrangère: L'impératif présent 2024Français langue étrangère: L'impératif présent 2024
Français langue étrangère: L'impératif présent 2024Paulo Marques
 
Fabriquer une femme.Livre écrit par Marie Darrieussecq
Fabriquer une femme.Livre écrit par Marie DarrieussecqFabriquer une femme.Livre écrit par Marie Darrieussecq
Fabriquer une femme.Livre écrit par Marie DarrieussecqTxaruka
 
Calendrier de la semaine du 19 au 23 février 2024
Calendrier de la semaine du 19 au 23 février 2024Calendrier de la semaine du 19 au 23 février 2024
Calendrier de la semaine du 19 au 23 février 2024frizzole
 
antigone de jean Anouilh la tragédie moderne
antigone de jean Anouilh la tragédie moderneantigone de jean Anouilh la tragédie moderne
antigone de jean Anouilh la tragédie moderneayoubrhammadi2
 
Activités mercredis cycle 3 - año 2020.pdf
Activités mercredis cycle 3 - año 2020.pdfActivités mercredis cycle 3 - año 2020.pdf
Activités mercredis cycle 3 - año 2020.pdfLallaJamilaFtaich1
 
Marseille XIXe fiche de travail 2024.pdf
Marseille XIXe fiche de travail 2024.pdfMarseille XIXe fiche de travail 2024.pdf
Marseille XIXe fiche de travail 2024.pdfNadineHG
 
Modulation Fm Tp presentation avancée USTHB
Modulation Fm Tp presentation avancée USTHBModulation Fm Tp presentation avancée USTHB
Modulation Fm Tp presentation avancée USTHBUsaPlay2
 
Français langue étrangère: Le but et l'obligation 2024
Français langue étrangère: Le but et l'obligation 2024Français langue étrangère: Le but et l'obligation 2024
Français langue étrangère: Le but et l'obligation 2024Paulo Marques
 

Dernier (10)

Offres d'emploi (Mise à Jour le 19/02).pptx
Offres d'emploi (Mise à Jour le 19/02).pptxOffres d'emploi (Mise à Jour le 19/02).pptx
Offres d'emploi (Mise à Jour le 19/02).pptx
 
Le langage n'est-il qu'un instrument de communication ? (V2)
Le langage n'est-il qu'un instrument de communication ? (V2)Le langage n'est-il qu'un instrument de communication ? (V2)
Le langage n'est-il qu'un instrument de communication ? (V2)
 
Français langue étrangère: L'impératif présent 2024
Français langue étrangère: L'impératif présent 2024Français langue étrangère: L'impératif présent 2024
Français langue étrangère: L'impératif présent 2024
 
Fabriquer une femme.Livre écrit par Marie Darrieussecq
Fabriquer une femme.Livre écrit par Marie DarrieussecqFabriquer une femme.Livre écrit par Marie Darrieussecq
Fabriquer une femme.Livre écrit par Marie Darrieussecq
 
Calendrier de la semaine du 19 au 23 février 2024
Calendrier de la semaine du 19 au 23 février 2024Calendrier de la semaine du 19 au 23 février 2024
Calendrier de la semaine du 19 au 23 février 2024
 
antigone de jean Anouilh la tragédie moderne
antigone de jean Anouilh la tragédie moderneantigone de jean Anouilh la tragédie moderne
antigone de jean Anouilh la tragédie moderne
 
Activités mercredis cycle 3 - año 2020.pdf
Activités mercredis cycle 3 - año 2020.pdfActivités mercredis cycle 3 - año 2020.pdf
Activités mercredis cycle 3 - año 2020.pdf
 
Marseille XIXe fiche de travail 2024.pdf
Marseille XIXe fiche de travail 2024.pdfMarseille XIXe fiche de travail 2024.pdf
Marseille XIXe fiche de travail 2024.pdf
 
Modulation Fm Tp presentation avancée USTHB
Modulation Fm Tp presentation avancée USTHBModulation Fm Tp presentation avancée USTHB
Modulation Fm Tp presentation avancée USTHB
 
Français langue étrangère: Le but et l'obligation 2024
Français langue étrangère: Le but et l'obligation 2024Français langue étrangère: Le but et l'obligation 2024
Français langue étrangère: Le but et l'obligation 2024
 

React redux-tutoriel-1

  • 1. Tutoriel N°0057 ReactJs + Redux Objectif du projet : 1) Comprendre React dans sa globalité, Flux , Redux ; 2) Comprendre les différentes étapes/parcours à suivre pour une bonne implémentation ; 3) Projet pratique résumant tout le parcours. Commençons maintenant ! 1) Comprendre React dans sa globalité, Flux, Redux React est une librairie créée par Facebook permettant de générer des composants web au travers d’une API. React est aujourd’hui utilisé en production par plusieurs entreprises telles que Facebook ou AirBnb avec de très bons résultats, et est donc bel est bien une alternative viable aux frameworks tels qu’Angular ou Ember. Cependant l’utilisation de React, qui ne permet que de créer des composants, pose des questions quant à l’architecture logicielle qu’il faut utiliser : comment aller chercher sa donnée ? Comment mettre à jour les composants lorsque la donnée change ? Il est possible de choisir d’utiliser une approche MVC classique, avec Backbone ou encore Angular, mais l’approche semble peu naturelle et ne pas respecter la philosophie de React, qui encourage l’immutabilité et le flux de données à sens unique. Flux, Flux est une architecture (ça n’est pas une librairie, et encore moins un framework) simple et se caractérise par le fait que le flux de données est unidirectionnel.
  • 2. Cette architecture contient des vues, les composants React, qui écoutent les modifications de store pour se mettre à jour. En cas d’évènement utilisateur (clique, frappe sur le clavier, etc.), le composant React appelle une méthode d’un objet Action qui lui même appelle le dispatcher, servant ici de "bus d’évènements". Les stores écoutent le dispatcher et se mettent alors à jour en fonction des évènements envoyés. POURQUOI UTILISER REDUX ? Redux reprend les concepts de Flux mais en simplifiant beaucoup le processus de développement. Cette simplification est en partie due au fait que Redux utilise des concepts liés à la programmation fonctionnelle pour changer l’état de l’application. Voici un exemple d’une application Redux toute simple : import { createStore } from 'redux' Le reducer est une fonction dite "pure" ayant (state, action) => state comme signature. Il va décrire comment une action transforme le state (l'état) de l'application en un nouvel état. L'implémentation de l'état de l'application dépend totalement de votre cas et peut être une primitive, un tableau, un objet, ou bien même une structure de données immutable (basé sur Immutable.js par exemple). La seule chose à retenir est que cette partie ne DOIT PAS modifier l'objet correspondant à l'état de l'application lorsque l'état change. Dans cet exemple, on utilise un switch et des strings, mais on pourra très bien utiliser un helper qui va suivre une autre manière de faire. function counter(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 default: return state } }
  • 3. On crée un Redux store, qui va garder l'état de notre app. L'api correspond à trois fonctions { subscribe, dispatch, getState }. On peut s'abonner manuellement ou bien lier l'état à une vue automatiquement à l'aide du binding. store.subscribe(() => console.log(store.getState()) ) Le seul moyen de modifier l'état de l'application est de dispatcher des actions. Les actions peuvent être serialisées, loggées ou sauvegardées pour plus tard. store.dispatch({ type: 'INCREMENT' }) // 1 store.dispatch({ type: 'INCREMENT' }) // 2 store.dispatch({ type: 'DECREMENT' }) // 1 Plutôt que de modifier l’état de l’application directement, on spécifie les modifications qui peuvent arriver avec de simple objets appelés actions. Puis on écrit une fonction appelée reducer, qui se chargera de décider comment chaque action transforme l’état de l’application. DIFFÉRENCES AVEC FLUX ? 1. Redux n’a pas de dispatcher 2. Redux n’a pas la possibilité de définir plusieurs Stores.
  • 4. A la place, nous avons un store unique avec un seul reducer. Au fur et a mesure que l’application se complexifie, l’unique reducer va être découpé en plusieurs petit reducer indépendants. L’architecture de Redux, semble assez impressionnante (surtout pour une application de compteur) mais la beauté de la chose est de voir a quel point on peut “scaler” et comment on arrive à gérer des applications complexes de manière très simple. 2) COMPRENDRE LES DIFFERENTS PARCOURS POUR IMPLEMENTER L’ARCHITECTURE.
  • 5. 3)PROJET PRATIQUE RESUMANT TOUT LE PARCOURS. Où allons nous ?
  • 6. Nous allons créer une liste de fruit qui au click, nous affichera des informations sur ce dernier Télécharger le dossier de base ICI Et installer toutes les dependance : npm install L’execution de cette commande créera un dossier node_module qui comportera tous les plugin dont on aura besoin. L’arboressence de notre dossier en general : /assets /dev /src Package README webpack.config les assets nous aurons tous les fichiers associer à notre projets (css, js, images …..) dev , là se retrouvera tous notre code qui sera regrouper dans un dossier js le premier fichier est index.js import 'babel-polyfill'; import React from 'react'; import ReactDOM from "react-dom"; ReactDOM.render( <h1> Bonjour chers tous!</h1>, document.getElementById('root') ); petite explication
  • 7. src, le fichier index qui se chargera d’afficher tous notre code js q’uon aura à ecrire dans le dev et un petit fichier bundle.min le fichier package.js , il renseigne toute les dependances de notre projet ----- { "name": "react-redux-tutoriel", "version": "1.0.0", "main": "index.js", "scripts": { "dev": "webpack", "start": "webpack-dev-server" }, "license": "ISC", "dependencies": { "babel-core": "^6.10.4", "babel-loader": "^6.2.4", "babel-polyfill": "^6.9.1", "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.11.1", "babel-register": "^6.9.0", "cross-env": "^1.0.8", "css-loader": "^0.23.1", "expect": "^1.20.1", "node-libs-browser": "^1.0.0", "node-sass": "^3.8.0", "react": "^15.1.0", "react-addons-test-utils": "^15.1.0", "react-dom": "^15.1.0", "react-redux": "^4.4.5", "redux": "^3.5.2", "redux-logger": "^2.6.1", "redux-promise": "^0.5.3", "redux-thunk": "^2.1.0", "sass-loader": "^4.0.0", "style-loader": "^0.13.1", "webpack": "^1.13.1", "webpack-dev-middleware": "^1.6.1", "webpack-dev-server": "^1.14.1", "webpack-hot-middleware": "^2.11.0" }, "devDependencies": { "babel-plugin-react-transform": "^2.0.2",
  • 8. "babel-preset-stage-0": "^6.5.0", "react-transform-hmr": "^1.0.4" } } Plus d’explication sur : Le readme pour les trucs de base. webpack.config, var path = require('path'); var webpack = require('webpack'); module.exports = { devServer: { inline: true, contentBase: './src', port: 3000 }, devtool: 'cheap-module-eval-source-map', entry: './dev/js/index.js', module: { loaders: [ { test: /.js$/, loaders: ['babel'], exclude: /node_modules/ }, { test: /.scss/, loader: 'style-loader!css- loader!sass-loader' } ] }, output: { path: 'src', filename: 'js/bundle.min.js'
  • 9. }, plugins: [ new webpack.optimize.OccurrenceOrderPlugin() ] }; Donc en tant normale quand vous demarer le projet vous aurez à l’écran : Sur l’url localhost :300/ Comme expliquer précédemment nous allons commencer par construire petit à petit toute les brique de notre application afin de voir comment se fait l’implémentation. Pour cela nous aborderons cette fois ci le Store qui : Suite du tutoriel ici