构建一个页面

在本章中,我们通过组合页面中的组件,并在 Storybook中开发该页面 来继续提高复杂性.

由于我们的应用程序非常简单,我们将构建的页面非常简单,只需简单地包装组件 (通过Redux提供自己的数据) 在某些布局中并拉出redux中顶层error的字段 (假设我们在连接到 服务器时遇到问题,我们将设置该字段) . 创建InboxScreen.js在你的components夹:

我们也改变了App,用于渲染的组件InboxScreen (最终我们会使用路由器来选择正确的页面,但不要在此担心) :

然而,事情变得有趣的是在 Storybook中渲染故事.

正如我们之前看到的那样TaskList组件是一个 容器, 这使得PureTaskList表示组件. 根据定义,容器组件不能简单地单独呈现; 他们希望通过一些上下文或连接到服务. 这意味着要在Storybook中呈现容器,我们必须模拟 (即提供假装版本) 它所需的上下文或服务.

但是,对于PureInboxScreen我们有一个问题,因为虽然PureInboxScreen本身是表现性的,它的孩子,TaskList, 不是. 从某种意义上说PureInboxScreen被"容器"污染了. 所以,当我们设置我们的故事InboxScreen.stories.js:

我们看到了虽然如此故事工作得很好,我们default故事有一个问题,因为TaskList没有要连接的Redux Store . (在尝试测试时,您也会遇到类似的问题PureInboxScreen用单元测试) .

避免此问题的一种方法是,永远不要在应用程序中的任何位置呈现容器组件,除非在最高级别,而是将所有要求的数据 传递到 组件层次结构中.

但是,开发人员 将 不可避免地需要在组件层次结构中,进一步渲染容器. 如果我们想要在 Storybook中渲染大部分或全部应用程序 (我们这样做!) ,我们需要一个解决此问题的方法.

好消息是 Redux Store 很容易提供给 一个InboxScreen故事! 我们可以使用 Redux Store 的模拟版本 提供给到装饰器中:

存在类似的方法来为其他数据库提供模拟的上下文,例如,Relay和别的.

在Storybook中 循环浏览状态 可以轻松测试我们是否已正确完成此操作:

我们从底部开始Task,然后进展到TaskList,现在我们在这里使用全屏UI. 我们的InboxScreen容纳嵌套的容器组件,并包括随附的故事.

允许您在向上移动组件层次结构时,逐渐扩展复杂性. 其中的好处包括 更集中的开发过程 以及 所有可能的UI排列 的覆盖范围. 简而言之,CDD 可帮助您构建 更高质量和更复杂 的用户界面.