Tutoriel sur react et redux : projet pratique

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