Middleware personnalisé dans React / Redux.

Redux est connu pour être la bibliothèque la plus populaire pour gérer l’état de votre application React. Redux nous fournit un magasin qui contient notre état, et un envoi pour déclencher des actions, et des réducteurs pour mettre à jour notre arbre d’états.

Redux nous fournit également un middleware, ce middleware est un ensemble de  fonctions qui nous permettent d’étendre les fonctionnalités de notre application redux. Le middleware se trouve entre l’envoie (dispach) et les réducteurs (reducer), ce qui signifie que nous pouvons modifier nos actions distribuées avant qu’ils arrivent aux réducteurs ou exécuter quelques code pendant l’envoi.

Un exemple de middleware redux est redux-thunk qui vous permet d’écrire des créateurs d’action qui renvoient une fonction au lieu d’une action. Dans cet article, je vous montrerais comment vous pouvez construire votre propre middleware personnalisé.

Ecrire un middleware est très simple, et voici un code de base pour créer votre middleware.

const customMiddleware = store => next => action => {
  ...
}

Comme vous pouvez le voir, le middleware est une fonction au curry. Qu’est-ce qu’une fonction au curry? Une fonction curry est une fonction qui renvoie une autre fonction.
Exemple:

const foo = a => b => a + b;
foo(1)(2); //=> 3
OR in ES5
function foo(a) {  
  return function(b) {  
   return a + b;  
  } 
}

Par conséquent, nous pouvons dire que notre middleware reçoit store (un magasin), puis renvoie une fonction qui reçoit la fonction suivante et renvoie une autre fonction qui reçoit une action.

Store (Le magasin): c’est notre magasin de redux

Next: Nous appelons cette fonction lorsque notre middleware est fait avec la tâche assignée à faire. Cela envoie nos actions à notre réducteur ou à un autre middleware (intergiciel).

Action: C’est notre action en cours d’envoi.

Maintenant, passons à l’écriture des codes:

J’ai fourchu le repo reaction-redux pour vous aider à commencer à écrire du code rapidement , et on travaillera avec l’exemple d’un compteur.

Pour appliquer un middleware en redux, nous aurions besoin de la fonction applyMiddleware de la librairie redux.

import {createStore, applyMiddleware} from "redux";

Afin de vérifier que notre middleware est correctement connecté, nous pouvons commencer par ajouter un journal pour afficher un message lorsqu’une action est distribuée.

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, applyMiddleware } from 'redux'
import Counter from './components/Counter'
import counter from './reducers'
const customMiddleWare = store => next => action => {
  console.log("Middleware triggered:", action);
  next(action);
}
const store = createStore(counter, 
                          applyMiddleware(customMiddleWare)
                         );
const rootEl = document.getElementById('root')
const render = () => ReactDOM.render(
  <Counter
    value={store.getState()}
    onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
    onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
  />,
  rootEl
)
render()
store.subscribe(render)

Maintenant, si nous allons de l’avant pour déclencher une action en cliquant sur un bouton, nous verrons le message enregistré dans notre console.

Dans notre middleware, nous avons accès à store.getState () pour obtenir l’état actuel et store.dispatch () pour envoyer une nouvelle action si nous le voulons.

Ensuite, nous pouvons ajouter un autre middleware pour déclencher un événement lorsque nous cliquons sur le bouton d’incrémentation.

const incrementMiddleware = store => next => action => {
  if(action.type === 'INCREMENT') {
    alert(`Increment button was clicked, current state is ${store.getState()} \nI will now add to it`);
  }
  next(action);
}
const store = createStore(counter, applyMiddleware(customMiddleWare, incrementMiddleware));

Trop facile. N’est ce pas?

Un exercice que vous pouvez essayer: Afficher une icône de chargeur lorsque vos actions demandent à votre backend de traiter des données et effacer l’icône du chargeur lorsque les données arrivent à vos réducteurs.

Le code de ce tutoriel peut être trouvé ici https://github.com/MedMus/redux-counter-middleware