Storybook and Redux

I like using Storybook when developing UI in Preact. My Storybook boilerplate usually looks something like this^[1]:

import { h } from 'preact';
import { storiesOf } from '@storybook/preact';

import Component from './Component';

storiesOf('Components/Component', module)
.add('default', () => <Component />);

Here I can add different stories that usually depend on different prop values passed into components. But sometimes I wanna test a component that’s hooked into Redux using connect function and get their props from Redux store. Passing props into such component wouldn’t work since they would always get overwritten. My solution is to separately export pure component^[2]:

import { h } from 'preact';
import { connect } from 'react-redux';

// Named export of pure component
export const Component = (props) => (
    // UI goes here
);

// Default export of connected component
export default connect()(Component)

From here all I need to do is replace default import with a named one in my Component.stories file.

import { h } from 'preact';
import { storiesOf } from '@storybook/preact';

- import Component from './Component';
+ import { Component } from './Component';

storiesOf('Components/Component', module)
.add('default', () => <Component />);

And now I can pass my dummy props in Storybook.

---

1. Still using v5 of Storybook. ↩︎

2. While I don’t exactly split my components to smart and dumb, this definition by Dan Abramov fits what I'm doing (while still keeping everything in a single file). It’s also recommended approach in Storybook docs. ↩︎