Redux est largement reconnu comme une bibliothèque de gestion d'état robuste conçue spécifiquement pour les applications JavaScript, souvent utilisée en tandem avec le framework populaire React. En proposant un conteneur d'état fiable, Redux établit une base solide qui simplifie grandement la tâche de gestion et de dépannage des états des applications. Ce guide approfondit les composants fondamentaux qui composent Redux, fournissant des explications détaillées de chaque élément et illustrant comment ils interagissent en synergie pour rationaliser la fonctionnalité globale de l'application. Cette exploration approfondie vise à élucider le fonctionnement interne de Redux, permettant aux développeurs de saisir les subtilités de cet outil de gestion d'état et d'exploiter efficacement ses capacités dans leurs projets.

Table des matières

1. Introduction à Redux
2. Configuration de Redux dans une application React
3. Actions et types d'actions
4. Réducteurs et Tranches
5. Configuration du magasin
6. Connexion des composants React
7. Conclusion et références

1. Introduction à Redux

Redux suit un modèle de flux de données unidirectionnel et repose sur trois principes fondamentaux :

• Source unique de vérité : l'état de l'ensemble de votre application est stocké dans une arborescence d'objets au sein d'un seul magasin. Cette centralisation facilite le débogage et le suivi des modifications dans votre application.
• 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 garantit que les mutations d’état sont prévisibles et traçables.
• 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. Les fonctions pures sont prévisibles et testables, ce qui simplifie le débogage et les tests unitaires.

2. Configuration de Redux dans une application React

Tout d'abord, installez Redux et React-Redux :

npm install redux react-redux @reduxjs/toolkit

Cette commande installe la bibliothèque principale Redux, les liaisons React pour Redux et le Redux Toolkit, qui simplifie de nombreuses tâches courantes telles que la configuration du magasin et la création de tranches.

3. Actions et types d'actions

Les actions sont des charges utiles d'informations qui envoient des données de votre application à votre boutique Redux. Les types d'action sont des constantes qui représentent l'action.

actionTypes.js

export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
export const INCREMENT_BY_VALUE = "INCREMENT_BY_VALUE";
export const RESET = "RESET";

export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });
export const incrementByValue = (value) => ({
  type: INCREMENT_BY_VALUE,
  payload: value,
});
export const reset = () => ({ type: RESET });

Définir clairement les actions et les types d'actions permet de maintenir la cohérence et de réduire les erreurs dans votre application.

4. Réducteurs et tranches

Les réducteurs spécifient comment l'état de l'application change en réponse aux actions envoyées au magasin. Les tranches sont un ensemble de logiques et d'actions de réduction Redux pour une seule fonctionnalité de votre application, créées à l'aide de la méthode createSlice de Redux Toolkit.

compteurSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = { number: 0 };

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.number  = 5;
    },
    decrement: (state) => {
      state.number = Math.max(0, state.number - 5);
    },
    incrementByValue: (state, action) => {
      state.number  = action.payload;
    },
    reset: (state) => {
      state.number = 0;
    },
  },
});

export const { increment, decrement, incrementByValue, reset } = counterSlice.actions;

export default counterSlice.reducer;

Pour combiner plusieurs tranches :

rootRéducteur.js

import { combineReducers } from "@reduxjs/toolkit";
import counterReducer from "../slices/counterSlice";

const rootReducer = combineReducers({
  counter: counterReducer,
});

export default rootReducer;

5. Configuration du magasin

Le magasin est l'objet qui rassemble les actions et les réducteurs. Il contient l'état de l'application, permet d'y accéder via getState(), le met à jour via dispatch(action) et enregistre les auditeurs via Subscribe(listener).

magasin.js

import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "../reducers/rootReducer";

const store = configureStore({
  reducer: rootReducer,
});

export default store;

6. Connexion des composants React

Pour connecter les composants React au magasin Redux, utilisez le composant Provider de React-redux pour transmettre le magasin à vos composants, et utilisez les hooks useSelector et useDispatch pour accéder et manipuler l'état.

App.js

import React from "react";
import { Provider } from "react-redux";
import store from "./redux/store/store";
import Counter from "./components/Counter";
import MusCo from "./MusCo redux logo.png";

function App() {
  return (
    

        

          Practice Redux with MusCo
        
        

          

            by 
            Mustafa 
            Coskuncelebi
          
        
      
    
  );
}

export default App;

CounterComponent.js

import { useDispatch, useSelector } from "react-redux";
import {
  decrement,
  increment,
  incrementByValue,
  reset,
} from "../slices/counterSlice";
import { useState, useEffect } from "react";

function Counter() {
  const [value, setValue] = useState("");
  const dispatch = useDispatch();
  const number = useSelector((state) => state.counter.number);

  useEffect(() => {
    const showcase = document.querySelector("#showcase");
    if (number 
      
Counter
      
{number}
      

         dispatch(increment())} className="w-40 h-10 p-2 mt-5 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={{ backgroundColor: "#c2ff72" }}>
          Increment by 5
        
         dispatch(decrement())} className="w-40 h-10 p-2 mt-5 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={number 
          Decrement by 5
        
      
      

        

           {
                   let newValue = e.target.value.trim();
                   if (newValue === "") {
                     newValue = "";
                     reset();
                   }
                   if (/^\d*$/.test(newValue)) {
                     setValue(newValue);
                   }
                 }} 
                 value={value} 
                 placeholder="Enter Value" />
           {
            dispatch(incrementByValue(Number(value)));
            setValue("");
          }} className="w-40 h-10 p-2 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={{ backgroundColor: "#c2ff72" }}>
            Add this Value
          
        
      
       {
        dispatch(reset());
        setValue("");
      }} className="w-20 h-10 p-2 text-white rounded-md outline-1 outline-violet-500

 outline mb-7 bg-violet-900">
        Reset
      
      

        Counter cannot be less than 0
      
    
  );
}

export default Counter;

7. Conclusion et références

Redux est une bibliothèque puissante pour gérer l'état de vos applications. En comprenant les actions, les réducteurs, le magasin et comment tout connecter à vos composants React, vous pouvez créer des applications prévisibles et maintenables.

Points clés:

• Actions : définissez ce qui doit se produire dans votre application.
• Réducteurs : spécifiez comment l'état change en réponse aux actions.
• Store : contient l'état et gère les actions.
• Fournisseur : transmet le magasin à vos composants React.

Pour plus d'informations, consultez la documentation officielle de Redux :

• Documentation Redux
• Documentation de la boîte à outils Redux
• Documentation React-Redux

En suivant ce guide, vous devriez avoir une solide compréhension de Redux et être capable de l'implémenter dans vos propres applications.