Utiliser Redux avec React JS

Catégories : Expertise TechniquePar SoftFluent FranceTags: React, Redux

Envie de créer des sites web modernes ?

Redux est une bibliothèque compacte qui fournit un conteneur d’état « predictable state container » pour les applications JavaScript. Redux est développé par Dan Abramov depuis mai 2015.

Dans cet article, nous allons voir comment utiliser Redux avec React.

React est une bibliothèque JavaScript libre développée par Facebook depuis 2013.

React ne gère que l’interface de l’application, considérée comme la vue dans le modèle MVC. Pour gérer la partie modèle et contrôleur, il est possible d’utiliser plusieurs méthodes.

Redux Async Actions

La méthode Root Component est adaptée pour les prototypes et les petites applications.
La méthode Container Components est utilisée quand seulement certains composants ont besoins d’un accès aux données.
La méthode Relay est utilisée avec un serveur GraphQL et conçue pour communiquer avec un seul serveur.
La méthode Redux Async Actions permet d’accélérer le développement et d’avoir de bonnes performances pour les applications de taille moyenne. C’est cette méthode que nous détaillerons dans cet article.

Redux

Dan Abramov décrit Redux comme un conteneur à état prévisible pour les applications Javascript.

Dan Abramov :

Redux is a predictable state container for JavaScript apps. It’s a « state container » because it holds all the state of your application. It doesn’t let you change that state directly, but instead forces you to describe changes as plain objects called « actions ». Actions can be recorded and replayed later, so this makes state management predictable. With the same actions in the same order, you’re going to end up in the same state.

Installation

Nous allons maintenant installer Redux en partant de zéro.

Créer une nouvelle application React

npm install -g create-react-app
create-react-app my-app
cd my-app

Installer Redux

npm install --save redux

Installer les React bindings pour React

npm install --save react-redux

Ce qui donne les dépendances suivantes dans package.json :

"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-redux": "^5.0.5",
"redux": "^3.6.0"
}

Redux est maintenant installé. Dans la suite de cet article, nous allons détailler Redux en créant l’application TodoList.

Créer une TodoList avec Redux

Description de l’application

L’application TodoList permet d’ajouter une tâche à faire (un todo), de consulter la liste des tâches, de valider une tâche et de filtrer la liste des tâches pour ne pas afficher celles qui sont terminées.

On stockera 2 éléments différents dans cette application :

Le filtre courant sélectionné
La liste des todos

Presentational Components vs Container Components

Avec Redux, on distingue 2 catégories de composants : les composants de présentation et les composants conteneurs.

comparatif

Dans l’application TodoList, les composants utilisés sont les suivants :

Presentational Components

TodoList est une liste qui montre les todos visibles.
- todos: Un tableau de todos { id, text, completed }.
- onTodoClick(id: nombre) est une callback à appeler quand un todo est cliqué.
Todo est le détail d’un seul todo.
- text: string le texte à afficher.
- completed: boolean si le todo est coché.
- onClick() est une callback à appeler quand le todo est cliqué.
Link est un lien avec une callback.
- onClick() est une callback à appeler quand le lien est cliqué.
Footer est l’emplacement où l’utilisateur change le todo visible.
App est le composant racine qui affiche tout le reste.

Container Components

VisibleTodoList sélectionne les todos en fonction de la visibilité du filtre et rend un TodoList.
FilterLink récupère la visibilité actuelle du filtre et rend un Link.
- filter: string la visibilité du filtre.

Ecriture des composants

écriture

Les 5 Presentational Components décrit plus haut sont disponibles dans /src/components/. Ils ne seront pas plus détaillés dans cet article car ce sont des composants React traditionnels.

Les 2 Container Components de l’application sont dans /src/containers/. Ce sont eux qui utilisent Redux et qui vont gérer la partie donnée de l’application.

Dans cet article, on s’intéresse uniquement au composant VisibleTodoList qui sélectionne les todos en fonction de la visibilité du filtre et rend un TodoList.

S’il est possible d’écrire à la main les container components, pour de meilleurs performances, on les génèrent directement avec la fonction connect() de la librairie Redux.

Code

Ci dessus, le container component VisibleTodoList.

Pour utiliser connect(), il faut définir les fonctions spéciales appelées mapStateToProps et mapDispatchToProps :

– mapStateToProps : Calculer la liste de todos à passer au composant TodoList.

– mapDispatchToProps : Permettre d’injecter une prop onTodoClick dans le composant TodoList.

Dans mapStateToProps, on explique comment transformer l’état actuel du store de Redux (state) en propriétés passées à un presentational component (props). On filtre le state.todos selon la valeur de state.visibilityFilter.

GetVisible

Dans mapDispatchToProps, on veut que la fonction onTodoClick envoie l’action TOGGLE_TODO.

Toggle

Le container component VisibleTodoList est maintenant terminé.

Les actions

Dans la méthode mapDispatchToProps() ci-dessus, on appelle la fonction dispatch() sur l’action toggleTodo().

Qu’est-ce qu’une action au sens Redux ?

Les actions envoient les données de l’application vers un store. Ce sont les seules sources d’information pour un store. Elles sont définies comme un objet Javascript qui a une propriété ‘type’ pour indiquer le type d’action réalisé :

ToDo

Les actions sont définies par des fonctions appelées Action Creators puis envoyées aux Reducer par la fonction dispatch().

Comment faire pour exécuter simultanément plusieurs actions ?

Il est possible avec React de créer des actions asynchrones non bloquantes (les Redux async action évoquées en haut de l’article).

Si les actions décrivent un changement qui vient de se produire, qui change le state de l’application ?

C’est là qu’interviennent les Reducer.

Les Reducers

Le reducer est une fonction pure (sans état) qui prend en entrée le précédent state et un action pour retourner en sortie le prochain state.

Reducer

Dans notre application, on avait appelé dispatch(toggleAction(id)) depuis mapDispatchToProps. L’action TOGGLE_TODO passe ensuite dans le reducer suivant.

ToDoApp