ReactJs + Redux 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 différents parcours pour implémenter l’architecture.

3)Projet pratique résumant 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 :

fichier de base 1

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()

    ]

};

petite explication : voir ici

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 :