Qu'est-ce que Redux et comment pouvons-nous l'utiliser ?

Qu'est-ce que Redux et comment l'utilisons-nous ? Redux est comme un outil utile pour gérer l'état des programmes JavaScript. Cela aide à garder tout organisé et facilite le travail. Considérez-le comme un moyen de suivre ce qui se passe dans votre programme et de vous assurer que tout reste stable.

Fondamentalement, Redux peut fonctionner sans problème avec différentes bibliothèques ou frameworks JavaScript comme React, Angular ou Vue. Cela les rend encore meilleurs dans la gestion de ce qu’ils font. C'est pourquoi l'apprentissage de Redux est extrêmement important pour les développeurs Web.

Dans cet article, nous allons parler des bases de Redux. Nous expliquerons ce que c'est, pourquoi les gens l'utilisent et comment cela fonctionne. Nous examinerons des parties importantes telles que Store, Actions et Réducteurs, qui sont les éléments constitutifs de Redux. Rendre l'apprentissage et l'investissement dans la formation Redux très importants pour les développeurs Web.

Qu'est-ce que Redux et pourquoi l'utiliser ?

Une question courante à propos de Redux est de savoir pourquoi les gens l'utilisent. Alors, quelle est la raison ? Eh bien, Redux est vraiment précieux pour gérer l'état des applications, surtout lorsqu'elles deviennent plus complexes. Prenons l'exemple d'un site e-commerce avec différentes parties comme un panier, un profil utilisateur, etc.

Concentrons-nous sur la partie panier pour une meilleure compréhension. Il est chargé d'afficher le nombre d'articles dans le panier de l'utilisateur. Son état inclut tous les éléments ajoutés et leur nombre total. Ces informations doivent être constamment mises à jour et affichées avec précision à l'utilisateur.

Lorsqu'un utilisateur ajoute ou supprime des articles, le programme doit gérer ces actions en interne, mettre à jour l'état du panier et refléter les modifications dans l'interface utilisateur.

Au départ, la gestion de l'état au sein de composants séparés fonctionne bien, mais à mesure que le programme devient plus complexe, le partage de l'état entre les composants pour des tâches telles que l'affichage, les mises à jour ou l'exécution d'une logique basée sur des données partagées devient nécessaire. C'est là que Redux brille et fournit la principale réponse à la raison pour laquelle Redux est utilisé.

Redux agit comme une bibliothèque de gestion d'état centralisée, gérant l'état du programme. Il fournit des API essentielles pour modifier et accéder à l'état actuel et simplifie efficacement le processus de gestion de plusieurs états sur différents composants.

Qu’est-ce qui rend Redux prévisible ?

Ce qui distingue Redux en termes de prévisibilité, c'est son strict respect du principe d'immuabilité de l'État. Dans Redux, changer l'état de l'application nécessite de dispatcher un certain type d'action qui précise précisément les changements souhaités. Ces actions sont ensuite traitées par des réducteurs, dont la tâche est uniquement de gérer l'état et l'action actuels, produisant une nouvelle instance d'état mise à jour. Les réducteurs ne modifient pas directement l’état ; au lieu de cela, ils créent une nouvelle instance d'état qui intègre les modifications nécessaires.

Comme l'a déclaré le créateur de Redux, Dan Abramov :

les actions peuvent être enregistrées et rejouées plus tard, garantissant une gestion cohérente de l'état.

Pour illustrer ce concept et comprendre précisément ce qu'est Redux, prenons un exemple issu d'une boutique en ligne. Si le panier contient initialement 0 article, l'ajout d'un produit augmente le nombre d'articles à 1. Répéter cette action augmente encore le nombre d'articles, garantissant un résultat prévisible.

En produisant systématiquement le même état final basé sur l'état initial et une séquence d'actions spécifique, Redux garantit la prévisibilité. Dans la section suivante, nous approfondirons les composants clés de Redux.

Les composants principaux de Redux sont :

Pour mieux comprendre ce qu'est Redux et comment il fonctionne, explorons ses composants clés. Essentiellement, Redux se compose des trois parties suivantes :

**1. Magasin

1. Actions
2. Réducteur**

Qu’est-ce que le magasin dans Redux ?

Le Store dans Redux agit comme un référentiel centralisé pour l'état global de l'application, organisé selon une structure arborescente hiérarchique. Il est crucial de considérer le Redux Store comme la seule source de l'état de l'application.

En intégrant le Store dans le composant principal (par exemple, App.js) à l'aide du composant Provider, tous les composants enfants de l'application ont accès à l'état stocké globalement dans le Redux Store. Cela crée effectivement un type d’état globalement accessible dans toute l’application. L'exemple suivant illustre ce concept :

`// src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'  // Importing the Provider component from 'react-redux'
import { App } from './App'  // Importing the main App component
import createStore from './createReduxStore'  // Importing the function to create the Redux store

const store = createStore()  // Creating the Redux store using the createStore function

// As of React 18
const root = ReactDOM.createRoot(document.getElementById('root'))  // Creating a root element to render the React app
root.render(
  <Provider store={store}>  // Wrapping the App component with the Provider component and passing the Redux store as a prop
    <App />  // Rendering the main App component
  </Provider>
)`

The above code snippet initializes the Redux Store using the createStore function and then integrates it into the React application by wrapping the main App component with the Provider component. As a result, the Redux Store becomes accessible to all components of the application.

The entire state of the application is structured as a kind of JavaScript object tree within the Redux Store. As illustrated below:

`// Example of the structure of the store object
{
    noOfItemInCart: 2,  // Represents the total number of items in the cart
    cart: [  // Represents an array containing details of each item in the cart
        {
            bookName: "Harry Potter and the Chamber of Secrets",  // Name of the book
            noOfItem: 1,  // Quantity of this book in the cart
        },
        {
            bookName: "Harry Potter and the Prisoner of Azkaban",  // Name of another book
            noOfItem: 1  // Quantity of this book in the cart
        }
    ]
}`

In the above example, the Redux Store has two main features:

noOfItemInCart: Indicates the total number of items in the cart.
cart: An array containing objects, each representing a specific item in the cart. Each object includes properties such as bookName, which represents the name of the book, and noOfItem, which indicates the quantity of that book in the cart.
This structured representation enables efficient management and access to the application's state, facilitating seamless updates and interactions within the program.

What is an action in Redux?

Actions in Redux are essential for changing the application's state. They are JavaScript objects that describe what has happened in the application. As mentioned earlier, Redux enforces the idea of immutable state and prevents direct changes through views or network calls. Instead, any state changes must be communicated through actions.

Let's consider a scenario with a sample store containing two books, each with one copy. Now, imagine a user wants to add another item to their cart. They click on the "Add to Cart" button next to the desired item.

Upon clicking, a type of action is dispatched. This action, represented as a JavaScript object, reflects the necessary changes in the store. The following example illustrates this concept:

`const dispatch = useDispatch();

const addItemToCart = () => {
  return {
    type: "ADD_ITEM_TO_CART",
    payload: {
      bookName: "Harry Potter and the Goblet of Fire",
      noOfItem: 1,
    }
  };
};
<button onClick={() => dispatch(addItemToCart())}>Add to cart</button>`

In the above example, the addItemToCart function acts as an action creator. When called, it generates an action object that describes the intention to add a specific book to the cart. This action includes a type property indicating the type of action ("ADD_ITEM_TO_CART") and a payload containing the details of the book to be added.

This structured approach ensures transparency and consistency in state management, facilitating effective communication of state changes throughout the application.

For a better understanding of actions in Redux:

To better understand what actions are and what role they play in Redux, let's slightly complicate the previous example. In Redux, each action must have a type property that specifies the type of dispatched operation. While additional details can be included in the action object, they are optional and vary depending on the specific action being dispatched. For example, consider the action created by addItemToCart in the previous example:

`// Action created by the addItemToCart action creator

{
    type: "ADD_ITEM_TO_CART", // Note: Every action must have a type key
    payload: {
        bookName: "Harry Potter and the Goblet of Fire",
        noOfItem: 1,
    }
}`

In the above example, the action type or action ADD_ITEM_TO_CART indicates the intention to add items to the cart. Additionally, the payload property contains specific details about the added item, such as its name and other relevant details.

What are Reducers in Reducers?

This uniform structure in managing actions ensures consistency and allows reducers to accurately interpret and process the dispatched actions. As a result, it facilitates effective state management in Redux.

Reducers in Redux are another essential part, but what exactly are reducers and what do they do? Reducers are essentially functions responsible for changing the application state based on dispatched actions. They adhere to the principle of immutability, meaning they don't directly alter the current state; instead, they return a new updated state.

In essence, reducers receive two parameters: the previous state and an action. They then process this information to indicate a new state representing the current state of the application.

In larger applications, there may be multiple reducers, each managing different parts or sections of the global state. For example, one reducer might manage the shopping cart state, while another handles user details.

When an action is dispatched, all reducers are called. Each reducer examines the action using a switch statement to identify its type. Upon finding a match, the corresponding reducer performs necessary updates to the state and returns a new instance of the global state.

For a better understanding of reducers in Redux:

To better grasp what reducers are and their role in Redux, let's consider the following example:

`const initialCartState = {   
    noOfItemInCart: 0,         
    cart: []                             
}

// NOTE:
// It is important to pass an initial state as default to
// the state parameter to handle the case of calling
// the reducers for the first time when the
// state might be undefined

const cartReducer = (state = initialCartState, action) => {
    switch (action.type) {
        case "ADD_ITEM_TO_CART":
            return {
                ...state,
                noOfItemInCart: state.noOfItemInCart + 1,
                cart : [
                    ...state.cart,
                    action.payload
                ]
            }
        case "DELETE_ITEM_FROM_CART":
            return {
                // Remaining logic
            }
        default:
            return state 
    }       // Important to handle the default behaviour
}           // either by returning the whole state as it is
            // or by performing any required logic`

In the above example, we created a reducer called cartReducer, which is a JavaScript function. This function accepts two parameters.

Le paramètre state a une valeur par défaut, initialCartState, afin que le réducteur puisse gérer les scénarios dans lesquels il est appelé pour la première fois avec un état non défini. Chaque réducteur doit gérer l'état par défaut, où si aucun type d'action ne correspond, il renvoie l'état actuel. Cela garantit que l'état reste inchangé en cas d'envoi d'actions sans rapport.

Lorsqu'une action est distribuée, le réducteur approprié est appelé en fonction du type d'action. Dans notre exemple, lorsque l'on clique sur le bouton "Ajouter au panier", le créateur d'action addItemToCart dispatche une action de type ADD_ITEM_TO_CART.

Ensuite, cartReducer traite cette action en faisant correspondre son type. S'il correspond à ADD_ITEM_TO_CART, il met à jour l'état en incrémentant la valeur noOfItemInCart et en ajoutant un nouvel élément au tableau du panier en conséquence.

Il est important de noter que Redux applique l'immuabilité, donc les réducteurs créent une nouvelle copie de l'état avec les modifications nécessaires au lieu de modifier directement l'état existant.

Après la mise à jour de l'état par le réducteur, les modifications sont reflétées. Par exemple, après avoir ajouté un nouvel article au panier, l'état mis à jour inclut la valeur incrémentée de noOfItemInCart et l'article nouvellement ajouté dans le tableau du panier. Cette approche structurée garantit des mises à jour d'état prévisibles et maintient la cohérence dans la gestion de l'état dans les applications Redux.

Apprendre Redux et son importance

Redux est guidé par trois principes clés :

1. Gestion centralisée de l'état : l'intégralité de l'état de l'application est stockée dans un magasin unique et centralisé, organisé dans une structure arborescente unique.
3. Mises à jour d'état basées sur l'action : les changements d'état sont initiés par la répartition d'actions, qui sont des objets décrivant ce qui s'est passé dans l'application.
5. Transformation d'état via des réducteurs : les réducteurs dictent la façon dont l'arborescence d'état réagit aux actions, garantissant des mises à jour prévisibles et maintenant la cohérence de l'état.

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!