用于管理数据和状态的 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，以正确显示。手动通过开发者工具切换这些状态非常繁琐。**Pseudo States 插件** 允许您在各种状态之间快速切换，或将它们并排渲染。

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

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

组合组件

您可以通过组合组件来独立开发更复杂的功能。这些组合组件通常也跟踪应用程序状态并将行为向下传递。例如：表单、头部、列表和卡片。

状态有许多不同的形式。一些应用程序将部分状态作为 URL 中的查询参数进行跟踪，然后由组件解析这些参数。**Query params 插件** 允许您按 story 模拟查询参数，以便您可以轻松重现组件的不同状态。

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

React 应用程序使用 context 来在组件树中传递数据，而无需手动向下传递 props。它通常用于管理“全局”状态。无论是使用 hooks 和原生 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 Worker 在网络层面拦截请求并返回模拟数据。**MSW 插件** 将此功能带到 Storybook。使用它可以简化在 stories 中模拟 API 请求。它支持 RESTful 和 GraphQL 后端。

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

**URQL** 和 **GraphQL Kit** 为其他 GraphQL 实现提供了类似的功能。

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

结论

将界面分解为组件使其更容易构建，并解锁了更多自动化形式。然而，隔离它们可能具有挑战性。您需要考虑状态、交互、模拟数据，甚至模拟 API 响应。Storybook 插件减少了隔离连接的 UI 所需的时间和精力。它们使您能够独立构建和测试各种类型的组件。

查看插件目录了解更多关于数据和状态的插件。通过我们的教程和文档学习如何构建一个插件。并在下方加入 Twitter 上的讨论。