New
Code coverage with Storybook test runnerAutomate with Chromatic
Star74,802
Back to Create an Addon
React
Chapters
  • Introducción
  • Configuración
  • Registrar complemento
  • Seguimiento de Estado
  • Decoradores
  • Preajuste
  • Agregar al catálogo
  • Conclusión

Seguimiento de Estado

Administra el estado del complemento en el Administrador y en la Vista Previa

React tiene hooks incorporados, como useState, para administrar el estado. Por lo general, esto sería suficiente. Sin embargo, en este caso las cosas son un poco más complicadas. Dediquemos un momento a hablar sobre la arquitectura de Storybook.

Conceptos básicos de la arquitectura de Storybook

manager preview

A primera vista, Storybook presenta una interfaz de usuario unificada. Sin embargo, detrás de escena se divide en dos segmentos que se comunican entre sí a través de un canal de comunicación:

  • Administrador: el UI donde se procesan la búsqueda, la navegación, las barras de herramientas y los complementos de Storybook.
  • Vista Previa: un iframe donde se renderizan las historias.

Necesitamos rastrear el estado de alternancia y al mismo tiempo también compartir ese estado tanto en el Administrador como en la Vista previa. Por lo tanto, en lugar de useState, usaremos useGlobals de @storybook/api.

Seguimiento del estado global

Los Globals representan el contexto "global" (o sea, que no son específicos de la historia) en Storybook. Son una forma práctica de compartir información entre diferentes historias, complementos y decoradores. El hook useGlobals permite acceder a este contexto global dentro de la herramienta que se está creando.

Echa un vistazo en @storybook/addons para más APIs relacionados con addons

El kit Addon preconfigura Tool (herramienta) para utilizar globals. Cambiemos el nombre del global para reflejar con mayor precisión lo que hace. La función toggleOutline permite al usuario activar y desactivar el complemento Outline. 👉🏽🔘

The tool track toggle state

Copy
src/Tool.js
import React, { useCallback } from 'react';
import { useGlobals } from '@storybook/api';
import { Icons, IconButton } from '@storybook/components';
import { TOOL_ID } from './constants';

export const Tool = () => {
+  const [{ outlineActive }, updateGlobals] = useGlobals();

+  const toggleOutline = useCallback(
    () =>
      updateGlobals({
+        outlineActive: !outlineActive,
      }),
+    [outlineActive]
  );

  return (
    <IconButton
      key={TOOL_ID}
+      active={outlineActive}
      title="Apply outlines to the preview"
+      onClick={toggleOutline}
    >
      <Icons icon="outline" />
    </IconButton>
  );
};
Keep your code in sync with this chapter. View ffd9ccb on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
Decoradores
Interactuando con las historias
✍️ Edit on GitHub – PRs welcome!
Join the community
5,870 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI