Redux - bibliothèque JavaScript

Qu'est-ce que Redux?

• Redux est un conteneur d' état prévisible conçu pour vous aider à écrire des applications JavaScript qui se comportent de manière cohérente dans les environnements client, serveur et natif et sont faciles à tester.
• Redux a été créé par Dan Abramov vers juin 2015. Il a été inspiré par Facebook Flux et le langage de programmation fonctionnel Elm. Redux est devenu très rapidement populaire en raison de sa simplicité , de sa petite taille (seulement 2 Ko) et de sa bonne documentation .

La prévisibilité de Redux est déterminée par les trois principes les plus importants indiqués ci-dessous -

1. Source unique de vérité - L'état de l'ensemble de votre application est stocké dans une arborescence d'objets dans un seul magasin . Comme l'ensemble de l'état de l'application est stocké dans une seule arborescence, cela facilite le débogage et accélère le développement.
2. L'état est en lecture seule - La seule façon de changer l'état est d' émettre une action , un objet décrivant ce qui s'est passé. Cela signifie que personne ne peut modifier directement l'état de votre application.
3. Les modifications sont effectuées avec des fonctions pures - Pour spécifier comment l'arborescence d'état est transformée par les actions, vous écrivez des réducteurs purs . Un réducteur est un endroit central où la modification d'état a lieu. Un réducteur est une fonction qui prend l'état actuel et l'action à effectuer. La fonction doit renvoyer un état nouvellement mis à jour, pas une version modifiée de l'état existant .

Redux comporte trois parties de construction: actions , magasin et réducteurs .

Actions dans Redux

En un mot, les actions sont des événements . C'est le seul moyen d'envoyer des données de votre application à votre boutique Redux. Les données peuvent provenir d'interactions utilisateur, d'événements internes tels que des appels d'API ou même de soumissions de formulaires.

• Les actions sont des objets JavaScript simples et doivent avoir une propriété de type (généralement constante) pour indiquer le type d'action à effectuer. Ils doivent également avoir une charge utile contenant les informations sur lesquelles l'action doit travailler.

{ 
  type: "LOGIN",
  payload: {
    username: "Ayush",
    password: "12345"
  }
}

const setLoginStatus = (name, password) => {
  return {
    type: "LOGIN",
    payload: {
      username: "Ayush",
      password: "12345"
    }
  }
}

store.dispatch(setLoginStatus(name, password));

• C'est le seul endroit où vous pouvez écrire de la logique et des calculs. La fonction de réduction acceptera l'état précédent de l'application et l'action en cours de distribution, calculera l'état suivant et renvoie le nouvel objet.
• Les quelques opérations suivantes ne doivent jamais être effectuées à l'intérieur du réducteur -Mutation des arguments de fonctions, des appels d'API et de la logique de routage, et l'appel de fonction non pure, par exemple Math.random ()
• Il est basé sur la reducefonction en JavaScript, où une valeur unique est calculée à partir de plusieurs valeurs après l'exécution d'une fonction de rappel.

Redux reducer signature
(previousState, action) => nextState
Array.prototype.reduce signature
(accumulator, value) => (accumulator + value)
Example:
const handleAuth = (state = initialState, action) => {
    switch (action.type) {

      // This reducer handles any action with type "LOGIN"
      case "LOGIN":
          return state.map(user => {
              if (user.username !== action.payload.username) {
                  return user;
              }

              if (user.password == action.payload.password) {
                  return {
                      ...user,
                      login_status: "LOGGED IN"
                  }
              }
          });
        default:
          return state;
      } 
};

• Pour les applications plus complexes, l'utilisation de l' combineReducers()utilitaire fourni par Redux est possible (en effet, recommandé). Il combine tous les réducteurs de l'application dans un seul réducteur d'index. Chaque réducteur est responsable de sa propre partie de l'état de l'application, et le paramètre d'état est différent pour chaque réducteur. L' combineReducers()utilitaire facilite grandement la maintenance de la structure des fichiers.

const rootReducer = combineReducers({
    handleAuth: handleAuth,
    editProfile: editProfile,
    changePassword: changePassword
});

• Permet d'accéder à l'état via getState();
• Permet à l'état d'être mis à jour via dispatch(action);
• Enregistre les auditeurs via subscribe(listener);
• Gère l'annulation de l'enregistrement des écouteurs via la fonction renvoyée par subscribe(listener).
• createStore - la fonction peut avoir trois arguments. Un réducteur est une fonction qui renvoie l'état suivant de l'application. Un preloadedState est un argument facultatif et correspond à l'état initial de votre application. Un enhancer est également un argument facultatif. Cela vous aidera à améliorer le magasin avec des fonctionnalités tierces.

Syntax - createStore(reducer, [preloadedState], [enhancer])
Example:
import { createStore } from ‘redux’;
import rootReducer from './reducers/index';
const store = createStore(rootReducer);

store.dispatch(setLoginStatus(‘alex’, ‘123456’));

• Redux lui-même est synchrone, alors comment les opérations asynchrones telles que les requêtes réseau fonctionnent-elles avec Redux? Ici, les middlewares sont utiles.

• Comme indiqué précédemment, les réducteurs sont l'endroit où toute la logique d'exécution est écrite. Le réducteur n'a rien à voir avec qui l'exécute, combien de temps cela prend, ou la journalisation de l'état de l'application avant et après la distribution de l'action. Dans ce cas, la fonction middleware Redux fournit un support pour interagir avec l'action distribuée avant qu'elle n'atteigne le réducteur.
• Généralement, les middlewares sont utilisés pour gérer les actions asynchrones dans votre application. Redux fournit une API appelée applyMiddleware qui nous permet d'utiliser un middleware personnalisé ainsi que des middlewares Redux tels que redux-thunk et redux-saga . Et cela peut être appliqué pour stocker comme suit -

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
const store = createStore(rootReducer, applyMiddleware(thunk));

function getUser() {
   return function() {
      return axios.get('/get_user_details');
   };
}

Syntax - ({ getState, dispatch }) => next => action
function simpleMiddleware({ getState, dispatch }) {
  return function(next){
    return function(action){
      // processing
      const nextAction = next(action);
      // read the next state
      const state = getState();
      // return the next action or you can dispatch any other action
      return nextAction;  
    }
  }
}
const store = createStore(rootReducer , initialState=[ ] , applyMiddleware(simpleMiddleware));

• Prévisibilité du résultat - Il y a toujours une source de vérité, le magasin, sans aucune confusion sur la façon de synchroniser l'état actuel avec les actions et d'autres parties de l'application.
• Maintenabilité - Avoir un résultat prévisible et une structure stricte facilite la maintenance du code. Cela vous aide également à séparer votre logique métier de votre arborescence de composants. Pour les applications à grande échelle, il est essentiel de garder votre application plus prévisible et maintenable.
• Organisation - Redux est plus stricte sur la façon dont le code doit être organisé, ce qui rend le code plus cohérent et plus facile à travailler pour une équipe.
• Rendu serveur - Ceci est très utile, en particulier pour le rendu initial, ce qui permet une meilleure expérience utilisateur ou une meilleure optimisation des moteurs de recherche. Passez simplement le magasin créé sur le serveur au côté client.
• Outils de développement - Les développeurs peuvent suivre tout ce qui se passe dans l'application en temps réel, des actions aux changements d'état. Il vous offre une édition de code en direct combinée à un débogueur temporel.
• Communauté et écosystème - C'est un énorme plus chaque fois que vous apprenez ou utilisez une bibliothèque ou un framework. Avoir une communauté derrière Redux le rend encore plus attrayant à utiliser.
• Facilité de test - La première règle d'écriture de code testable est d'écrire de petites fonctions qui ne font qu'une seule chose et qui sont indépendantes. Le code de Redux est principalement des fonctions qui ne sont que cela: petites, pures et isolées.
• Avantages en termes de performances - Vous pouvez supposer que le maintien de l'état global de l'application entraînerait une dégradation des performances. Dans une large mesure, ce n'est pas le cas. React Redux implémente de nombreuses optimisations de performances en interne afin que votre propre composant connecté ne soit rediffusé que lorsqu'il en a besoin.

• Une dernière étape utile pour travailler avec Redux consiste à installer et à lancer les propres outils de développement de Redux. Si vous utilisez Chrome, vous pouvez activer Redux DevTools en suivant le lien ci-dessous:
• Mais il y a une étape de plus pour le faire fonctionner. Dans notre createStoreméthode, nous devons adopter ce qui suit comme un argument après notre réducteur: window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()(). Avec cet ajout, store.jsdevrait ressembler à ceci:

import { createStore } from 'redux';
import reducer from './reducers';
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default store;