Master Redux : un guide simple pour les développeurs React

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. Tout au long de ce guide, nous approfondirons les composants fondamentaux qui composent Redux, en fournissant des explications détaillées de chaque élément et en 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

• Introduction à Redux

• Configuration de Redux dans une application React

• Actions et types d'actions

• Réducteurs et Tranches

• Configuration du magasin

• Connexion des composants React

• 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'arbre d'état est transformé 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 réagir-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 précisent 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.

counterSlice.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;

rootReducer.js

Pour combiner plusieurs tranches :

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).

store.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 Master Redux : un guide simple pour les développeurs React.png";

function App() {
  return (
    <provider store="{store}">
      <div classname="container mx-auto mt-24 text-center">
        <img src="%7BMusCo%7D" alt="Master Redux : un guide simple pour les développeurs React" classname="w-40 mx-auto mt-24 rounded-full">
        <h1 classname="container m-auto text-2xl 
            font-semibold text-center text-violet-700">
          Practice Redux with 
            <span classname="font-extrabold 
            text-violet-900">MusCo</span>
        </h1>
        <div classname="relative inline-block mt-8 text-sm">
          <counter></counter>
          <h5 classname="absolute bottom-0 right-0 mb-2 
                mr-2 font-semibold text-violet-700">
            <span classname="italic font-normal">by</span> 
            <span classname="font-semibold text-violet-900">Mus</span>tafa <span classname="font-semibold 
                text-violet-900">Co</span>skuncelebi
          </h5>
        </div>
      </div>
    </provider>
  );
}

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 
      <h1 classname="mb-3 text-3xl font-bold mt-7 
        text-violet-700">Counter</h1>
      <p classname="text-5xl text-violet-900">{number}</p>
      <div classname="flex mx-8 space-x-5" style="{{" justifycontent:>
        <button onclick="{()"> 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
        </button>
        <button onclick="{()"> 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
        </button>
      </div>
      <div classname="flex mx-8 mt-5 space-x-3 mb-7" style="{{" justifycontent: alignitems:>
        <div classname="p-5 space-x-5 rounded-md outline 
            outline-1 outline-violet-500">
          <input classname="w-40 h-10 pl-2 rounded-md outline 
                outline-1 outline-violet-500 text-violet-900" onchange="{(e)"> {
            let newValue = e.target.value.trim();
            if (newValue === "") {
              newValue = "";
              reset();
            }
            // Check the trimmed value consists only of digits
            if (/^\d*$/.test(newValue)) {
              setValue(newValue);
            }
          }} value={value} placeholder="Enter Value" />
          <button onclick="{()"> {
            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
          </button>
        </div>
      </div>
      <button onclick="{()"> {
        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
      </button>
      <h3 classname="text-violet-400" id="showcase" style="{{" visibility: marginbottom:>
        Counter cannot be less than 0
      </h3>
    
  );
}

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 : détient l'état et gère les actions.

Fournisseur : transmet le magasin à vos composants React.

Fichiers du projet :

Ici, vous pouvez accéder aux fichiers de projet stockés dans mon référentiel GitHub.
compteur redux

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.

Bon codage !

publié sur hashnode et medium

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!