Un guide pour une meilleure gestion de l’État / Blogs / Perficient

Redux, un conteneur d’état prévisible pour les applications JavaScript, s’appuie sur le principe d’immuabilité pour gérer efficacement les changements d’état. Dans cet article de blog, nous explorerons ce qu’est l’immuabilité, pourquoi elle est cruciale dans le contexte de Redux et comment elle simplifie la gestion des états.

Comprendre l’immuabilité

L’immuabilité fait référence à l’état d’être immuable. Dans le contexte de la programmation, un objet immuable est un objet dont l’état ne peut être modifié après sa création. Au lieu de modifier l’objet existant, toute opération sur un objet immuable crée un nouvel objet avec les modifications souhaitées.

Pourquoi l’immuabilité ?

1. Changements d’état prévisibles

Dans Redux, l’état de votre application est conservé dans un seul magasin. Pour mettre à jour l’état, vous envoyez des actions qui décrivent comment l’état doit changer. En imposant l’immuabilité, Redux garantit que ces actions ne modifient pas l’état existant mais produisent plutôt un nouvel état. Cette prévisibilité permet de mieux comprendre comment l’état évolue au fil du temps.

2. Débogage du voyage dans le temps

Les développeurs peuvent naviguer vers l’avant et vers l’arrière dans l’état de l’application à l’aide de la fonctionnalité de débogage de voyage dans le temps de Redux, rendue possible par ses outils de développement. Pour que cette fonctionnalité fonctionne de manière cohérente, l’immuabilité est essentielle. Faire des ajustements et remonter le temps serait difficile et sujet aux erreurs si l’État pouvait être changé.

3. Égalité de référence pour des comparaisons efficaces

Des comparaisons d’états efficaces sont rendues possibles par l’immuabilité. Vous pouvez comparer les références plutôt que les valeurs des propriétés imbriquées. Déterminer si un composant doit être restitué est beaucoup plus facile si vous pouvez être sûr que l’objet lui-même n’a pas changé si la référence à celui-ci l’a été.

4. Facilite les fonctions pures

Les réducteurs dans Redux sont de pures fonctions. Ils prennent l’état précédent et une action et renvoient un nouvel état. L’immuabilité garantit que ces fonctions restent pures. Si les réducteurs étaient autorisés à muter directement l’état, cela pourrait conduire à un comportement inattendu et rendre le débogage beaucoup plus difficile.

L’immuabilité en pratique

Examinons quelques modèles et techniques courants utilisés pour imposer l’immuabilité dans une application Redux.

1. Opérateur de diffusion

L’opérateur spread (…) est un moyen concis de créer des copies superficielles de tableaux et d’objets. Lorsque vous traitez des tableaux ou des objets dans l’état Redux, vous pouvez utiliser l’opérateur spread pour créer de nouvelles instances.

// Updating an array

const originalArray = [1, 2, 3];
const updatedArray = [...originalArray, 4];

// Updating an object

const originalObject = { a: 1, b: 2 };
const updatedObject = { ...originalObject, c: 3 };

2. Méthodes de tableau (concat, slice, etc.)

De nombreuses fonctions de tableau proposées par JavaScript renvoient un nouveau tableau plutôt que de modifier le tableau d’origine. Concat, tranche, carte, et filtre font partie des techniques qui s’alignent sur les principes d’immuabilité.

// Using concat

const originalArray = [1, 2, 3];
const updatedArray = originalArray.concat(4);

// Using slice

const originalArray = [1, 2, 3];
const updatedArray = originalArray.slice().concat(4);

// Using map

const originalArray = [1, 2, 3];
const updatedArray = originalArray.map(item => item * 2);

3. Toujours la bibliothèque

Toujours est une bibliothèque qui simplifie le processus de travail avec un état immuable. Il vous permet d’écrire du code qui « mute » un état brouillon, puis produit un tout nouvel état immuable basé sur les mutations.

import produce from 'immer';

const originalState = { count: 0 };
const newState = produce(originalState, draftState => {
draftState.count += 1;
});

Conclusion

L’immuabilité n’est pas seulement une recommandation dans Redux ; c’est un principe fondamental qui garantit la fiabilité et la prévisibilité de la gestion de l’État. En adoptant l’immuabilité, Redux fournit aux développeurs de puissants outils de débogage, facilite la création de fonctions pures et simplifie le processus global de gestion de l’état des applications. Comprendre et appliquer l’immuabilité mènera à des applications Redux plus robustes et maintenables.