Storybook 插件，用于管理数据和状态

组件封装了 UI 的外观和功能，以帮助您构建应用程序。组件有很多类型，从纯粹的展示型组件一直到连接的页面。每种类型都可能难以构建。

我们调研了 BBC、Shopify、Auth0 和 Storybook 社区的团队，以了解孤立地构建每个 UI 的秘诀。

本文重点介绍 用于数据和状态的 Storybook 插件，这些插件可帮助您孤立地构建组件。

为什么要在隔离环境中构建 UI

在我们开始之前，值得重新审视一下为什么首先要在隔离环境中构建 UI。您难道不能在应用程序中工作时开发 UI 吗？

领先的团队在隔离环境中构建 UI 以管理 UI 复杂性。他们从“自下而上”构建界面，从原子组件开始，然后逐步将它们组合到页面中，这个过程称为组件驱动。

例如，BBC 支持无数种语言、设备、浏览器和 UI 状态的排列组合。他们依靠组件驱动的开发流程来构建边缘案例并自动测试回归。

但并非每个人都是 BBC，那么这对您有什么好处呢？

• 便捷性： 使用模拟数据来模拟难以到达的状态（空、加载等）。这节省了时间，并帮助您验证 UI 在不同场景下都能正常工作。
• 测试： 通过在组件级别进行测试，可以更轻松地查明错误。无需再深入研究堆栈跟踪。
• 重用： 通过重用现有组件并将它们组合成新的配置，可以更快地组装 UI。
• 速度： 通过将页面分解为离散的组件并分散工作负载来并行化开发。

Storybook 及其插件生态系统使在隔离环境中构建整个 UI 变得容易。让我们看看是如何实现的。

原子组件

每个 UI 的核心是一组原子组件。这些组件没有状态，也不指定数据的加载方式。它们完全通过 props 接收数据和回调。示例：Avatar、Button、Input 和 Tooltip。

这里的主要挑战是确保组件看起来像它们应该的那样。在大多数情况下，您可以通过 props 重现其状态并将它们保存为 stories。

但是，某些组件还依赖 CSS 伪状态（例如 hover 和 focus）以正确的形式出现。通过 devtools 手动循环遍历这些状态很繁琐。伪状态插件允许您在各种状态之间快速切换或将它们并排渲染。

Actions Addon 简化了事件处理程序的测试。使用它可以创建回调，这些回调会出现在 Storybook UI 的 actions 面板中，并验证处理程序是否接收到正确的参数。

与此相关的是，Next.js 是一个领先的 React 元框架。它用于构建具有混合静态和服务器渲染的应用程序。因此，它要求您使用自定义 Link 组件在应用程序内导航。Next router 插件模拟导航事件并将它们记录到 actions 面板。

组合组件

您可以通过组合组件在隔离环境中开发更复杂的功能。这些组合组件通常还会跟踪应用程序状态并将行为传递到树的下方。示例：Forms、Header、List 和 Cards

状态有很多不同的形式。某些应用程序将状态位作为 URL 中的查询参数进行跟踪，而查询参数又由组件解析。Query params 插件允许您为每个 story 模拟查询参数，以便您可以轻松重现组件的不同状态。

Formik 是一个流行的表单库。它管理表单值、验证和提交。Formik 插件提供 Formik 上下文并在面板中可视化表单状态。

React 应用程序使用context来传递数据，而无需手动将 props 向下传递到组件树中。它通常用于管理“全局”状态。可以使用hooks 和 vanilla context，也可以通过 Redux 和 MobX 等库来实现。在所有情况下，传递数据的机制仍然是 React context。React Context 插件允许您在 Storybook 内部提供和操作 context。使用它可以为更复杂的场景模拟数据和操作。

import { withReactContext } from 'storybook-react-context';

export const myStory = (_, { context: [state, dispatch] }) => (
  <button onClick={() => dispatch({ text: 'Changed' })}>{state.text}</button>
);

myStory.decorators = [withReactContext({
  initialState: {
    title: 'Initial #1'
  }
})];

myStory.parameters.initialState = {
  initialState: {
    text: 'Initial #2',
  },
};

页面

当您继续将组件组合到页面级别时，您还必须将它们连接到数据。这是您的 UI 与后端 API 和服务相遇的地方。

过去，使您的应用程序进入特定状态需要付出很多努力。您必须播种数据库，在本地启动后端和前端，然后导航到相关页面。

借助 Storybook，您可以在隔离环境中开发整个页面。以下插件可帮助您模拟数据以快速跳转到任何特定排列组合。

模拟 API 服务

Mock Service Worker (MSW) 是一个 API 模拟库。它使用 service workers 在网络级别拦截请求，并提供模拟数据作为响应。MSW 插件将此功能带到 Storybook。使用它可以简化在 stories 中模拟 API 请求的过程。它适用于基于 RESTful 和 GraphQL 的后端。

Apollo GraphQL 是一个广泛使用的 GraphQL 库。Apollo Client 插件在页面级别模拟 GraphQL 数据。使其更容易在页面级别运行可视化或集成测试。

URQL 和 GraphQL Kit 为其他 GraphQL 风味提供了类似的功能。

Axios 是一个无处不在的 HTTP 客户端。该插件可视化您的组件和后端或模拟 API 之间交换的数据。

结论

将界面分解为组件可以更轻松地构建它们，并解锁更多形式的自动化。但是，隔离它们可能具有挑战性。您需要考虑状态、交互、模拟数据，甚至模拟 API 响应。Storybook 插件减少了隔离互联 UI 所需的时间和精力。它们使您能够在隔离环境中构建和测试各种组件。

查看插件目录，以发现更多用于数据和状态的插件。了解如何使用我们的教程和文档构建插件。并加入下方 Twitter 上的讨论。