setState dans le code source de l'état.

Dans cet article, je vais donner un aperçu de la façon dont setState dans le code source de Zustand est écrit/fonctionne. Ce concept exploite les fermetures dans JavaScript et les fonctions fléchées.

Le type StoreApi est simple.

export interface StoreApi<T> {
  setState: SetStateInternal<T>
  getState: () => T
  getInitialState: () => T
  subscribe: (listener: (state: T, prevState: T) => void) => () => void
}

setState accepte deux paramètres

1. partiel 

2. remplacer

Réalisons une expérience en utilisant l'exemple d'application de démonstration fourni dans le dépôt Zustand.

J'ai ajouté quelques instructions de console dans la distribution pour voir ce qui est partiel et remplacer.

Et voici quelles sont les valeurs lorsque vous mettez à jour le nombre dans l'exemple de démonstration.

Puisque partiel est une fonction ici,

 

const nextState = typeof partial === "function" ? partial(state) : partial;

Si vous regardez attentivement, l'état est initialisé lorsque vous créez un magasin et se trouve en dehors de la fonction setState. Est-ce que ça vous dit quelque chose ? Reportez-vous aux fermetures en Javascript.

partial est une fonction fléchée

(state)=>({
    count: state.count + 1
})

La beauté est que vous pouvez appeler ces fonctions avec un paramètre puisqu'il renvoie une fonction, c'est pourquoi nous avons partial(state) et state est en dehors de setState. setState a accès à cette variable d'état, grâce aux fermetures en JavaScript.

Vous pouvez exécuter l'extrait de code ci-dessous dans une console de navigateur et il enregistre ce que vous avez envoyé en tant que paramètre.

(a => console.log(a))("test")
// Output: test

J'ai écrit des articles détaillés sur l'utilisation d'Object.is et d'Object.assign. Puisque le remplacement est nul,

if (!Object.is(nextState, state)) {
  const previousState = state
  state =
    (replace ?? (typeof nextState !== 'object' || nextState === null))
      ? (nextState as TState)
      : Object.assign({}, state, nextState)
  listeners.forEach((listener) => listener(state, previousState))
}

L'état est mis à jour à l'aide de Object.assign. Nous examinerons un cas d'utilisation avancé où replace n'est pas nul et comprendrons comment setState se comporte dans les prochains articles.

À 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 construisez 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 à hello@thinkthroo.com

À 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#L64

2. https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L9

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

4. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

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!