React Redux Tutoriel 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.
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
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",
"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'
},
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

React Redux Tutoriel 1

Transféré par

Droits d'auteur :

Formats disponibles

React Redux Tutoriel 1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

React Redux Tutoriel 1

Transféré par

Droits d'auteur :

Formats disponibles

Tutoriel N°0057

POURQUOI UTILISER REDUX ?

import { createStore } from 'redux'

function counter(state = 0, action) {

L'api correspond à trois fonctions { subscribe, dispatch, getState }.

On peut s'abonner manuellement ou bien lier l'état à une vue

Le seul moyen de modifier l'état de l'application est de dispatcher des

Les actions peuvent être serialisées, loggées ou sauvegardées pour plus

store.dispatch({ type: 'INCREMENT' })

Plutôt que de modifier l’état de l’application directement, on spécifie

Puis on écrit une fonction appelée reducer, qui se chargera de décider

DIFFÉRENCES AVEC FLUX ?

1. Redux n’a pas de dispatcher

L’architecture de Redux, semble assez impressionnante (surtout pour une

2) COMPRENDRE LES DIFFERENTS

Télécharger le dossier de base ICI

Plus d’explication sur :

Le readme pour les trucs de base.

var path = require('path');

Donc en tant normale quand vous demarer le projet vous aurez à

Comme expliquer précédemment nous allons commencer par

Suite du tutoriel ici

Vous aimerez peut-être aussi