Dans cet article, nous comprendrons comment Object.assign() est utilisé dans le code source de Zustand.

L'extrait de code ci-dessus provient de vanilla.ts, lorsque vous définissez un état, Object.assign est utilisé pour mettre à jour votre objet d'état.

Commençons par comprendre les bases d'Object.assign :

Objet.assign()

La méthode statique Object.assign() copie toutes les propriétés propres énumérables d'un ou plusieurs objets source vers un objet cible. Il renvoie l'objet cible modifié.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// Expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget === target);
// Expected output: true

la valeur b dans l'objet cible est remplacée par la valeur b dans l'objet source.

Vraiment simple, non ? Lançons maintenant quelques expériences et comprenons comment setState de Zustand exploite la méthode Object.assign().

Object.assign() dans le code source de Zustand :

// pulled from: https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L76
state = (replace != null ? 
              replace : 
              typeof nextState !== "object" || 
              nextState === null) ? 
                nextState : 
                Object.assign({}, state, nextState);

C'est l'opérateur ternaire imbriqué dans l'extrait de code ci-dessus. si le remplacement n'est pas nul, l'état sera remplacé ou si le nextState n'est pas un objet, retournez simplement nextState tel quel mais ce qui nous intéresse est Object.assign({}, state, newState).

Enregistrons d'abord et voyons ce qui se trouve dans state et nextState lorsque vous mettez à jour votre état. L'exemple que j'ai choisi provient d'un exemple de démonstration dans le code source de Zustand. J'ai un peu modifié le code pour que nous puissions mettre quelques instructions de console et exécuter ces expériences.

Dans cet exemple simple, lorsque le décompte est incrémenté, cela revient à mettre à jour l'objet d'état à l'aide de Object.assign.

La prochaine fois que vous essayez d'effectuer des mises à jour sur votre objet JSON, utilisez Object.assign.

À propos de nous:

Chez Think Throo, nous avons pour mission d'enseigner les meilleures pratiques inspirées des projets open source.

10x vos compétences en codage en pratiquant des concepts architecturaux avancés dans Next.js/React, apprenez les meilleures pratiques et créez des projets de niveau production.

Nous sommes open source — https://github.com/thinkthroo/thinkthroo (Donnez-nous une étoile !)

Vous cherchez à créer des systèmes Web sur mesure pour votre entreprise ? Contactez-nous à [email protected]

À propos de l'auteur :

Hé, je m'appelle Ram. Je suis un ingénieur logiciel/bricoleur OSS passionné.

Consultez mon site Web : https://www.ramunarasinga.com/

Références :

1. https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L76

2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign