Adding PageTemplate and Redux support to Storybook
Let's add the page templates to Storybook.
Before jumping into the page components, first let's check a component that is present at every page: the
What's a page template anyway?#
It's quite common to have a page wrapper that handles things like navigation, state management, and other functionality, while also displaying the page content under different layout settings that include components like Header and Footer. In MealDrop, every page is rendered under a page template, used in three different layouts:
1 - Default
This template is the most common. It wraps the page with the
Footer components. The
Header is a connected component that gets shopping cart data from Redux and provides navigation items to other pages. It is used in pages like
2 - Sticky Header
This template is almost the same as Default, but with a sticky header, so that the shopping cart button is visible even when scrolling the page. It is used in the
3 - Basic
This template is the simplest version possible, only including a non-connected version of the
Header component, with no navigation. It is used in the
Adding the component to Storybook#
It's pretty useful having a way to visualize all available page templates in one place. Let's add that to Storybook!
PageTemplate component receives
children as props, as well as
We start by running Storybook and creating the boilerplate for
src/templates/PageTemplate.stories.tsx. Let's also create a
DummyComponent to serve as children of the template, just to add some text and make the story more understandable for the ones who will access it.
When checking the story on Storybook, we see an error: could not find react-redux context value; please ensure the component is wrapped in a Provider:
What should we do? The error is quite descriptive, and once again, sounds like we can fix that by creating a decorator.
Adding Redux support#
Adding Redux support to Storybook is rather a straightforward process. We need to create a decorator that wraps a story in a Redux provider with our real store, which comes from
src/app-state/index.ts. Let's open the
decorators file and add a new decorator called
When accessing our story, we notice that the error went away and we now have a page template with a header and a footer!