Add readme for redux part

Author: mathieuancelin

step-5/readme.md

@@ -0,0 +1,57 @@
+# Step 5 : redux
+
+dans cette étape, nous allons intégrer [Redux](http://redux.js.org/index.html) a notre magnifique application.
+
+[Redux](http://redux.js.org/index.html) est un container d'état global pour des applications JavaScript.
+Redux peut être utilisé dans n'importe quel environnement et ne dépend pas de React. Redux possède quelques
+propriétés très intéressantes en matière de cohérence, de prévisibilité et d'expérience du développeur.
+
+Redux peut être vu comme une implémentation du [pattern Flux](https://facebook.github.io/flux/docs/overview.html) avec cependant quelques variations, notamment au niveau de la complexité de mise en place bien moindre que Flux. Redux s'inspire également de patterns propre au langage Elm
+
+Redux fourni un concept de `store` de données unique pour l'application (singleton), auquel nos composants vont s'abonner. Il est ensuite possible de dispatcher des `actions` sur ce `store` qui déclencheront une mutation de l'état contenu dans le `store`. Une fois la mutation effectuée, le `store` notifiera tous ses abonnés du changement d'état. L'intérêt d'un tel pattern devient évident lorsqu'une application grossit et que plusieurs composants React ont besoin d'une même source de données. Il est alors plus simple de gérer l'état `fonctionnel` de l'application en dehors des composants et de s'y abonner.
+
+Pour fonctionner Redux utilise une notion de `reducer` qui fonctionne exactement de la même facon qu'une fonction de réduction sur une collection. Si on visualise l'état de l'application comme une collection de mutations, le `reducer` est simplement la fonction qui prend en paramètre l'état précédant et retourne le prochain état via un second paramètre qui dans notre cas est une `action`. Un `reducer` est donc une fonction pure avec la signature suivante `(state, action) => state` qui décrit comment une action transforme l'état courant en un nouvel état.
+
+Regardons un exemple simple
+
+```javascript
+import { createStore } from 'redux'
+
+/**
+ * Ici nous avons un unique reducer qui va gérer un état de type number. On note que l'état initial est fourni
+ * on utilise un switch pour gérer les différentes actions, mais ce n'est absolument pas obligatoire
+ * A noter qu'il est impératif lors d'une mutation d'état de renvoyer un nouvel état et non l'ancien état muté.
+ */
+function counter(state = 0, action) {
+  switch (action.type) {
+  case 'INCREMENT':
+    return state + 1
+  case 'DECREMENT':
+    return state - 1
+  default:
+    return state
+  }
+}
+
+// Ici nous créons un store pour notre application se basant sur le reducer `counter`
+// l'API du store est la suivante { subscribe, dispatch, getState }.
+let store = createStore(counter)
+
+// Maintenant nous pouvons nous abonner aux modifications de l'état contenu dans le store.
+// Un cas d'usage pourrait être un composant react qui veut afficher l'état courant du compteur.
+// On note que le nouvel état n'est pas véhiculer dans le callback mais qu'il faut aller le chercher
+// directement sur le store.
+store.subscribe(() =>
+  console.log(store.getState())
+)
+
+// Maintenant, le seul moyen de muter l'état interne du store est de lui envoyer une action
+store.dispatch({ type: 'INCREMENT' })
+// afficher 1 dans la console
+store.dispatch({ type: 'INCREMENT' })
+// afficher 2 dans la console
+store.dispatch({ type: 'DECREMENT' })
+// afficher 1 dans la console
+```
+
+Il est bien évidemment possible d'avoir plusieurs `reducers`, ou de faire en sorte qu'un reducer ne soit en charge que d'une partie de l'état global, etc ...