How can I use easyPeasy's useStoreState in Storybook?

Question

I want to create a story in storybook for my component that uses a state from easyPeasy.

const label = useStoreState((state) => state.localeModel.getLabel)

When I try to create the story I am getting an error in storybook An error occurred trying to map state in a useStoreState hook: Cannot read property 'getState' of undefined. .

How can I fix that?

score 0 · Answer 1 · answered Sep 30 '22 at 11:57

You need to add a decorator to wrap the Story with a StoreProvider.

It might look something like this:

// YourComponent.stories.js|jsx

import { StoreProvider } from 'easy-peasy';
import { store } from './store';

import { YourComponent } from './YourComponent';

export default {
  title: 'YourComponent',
  component: YourComponent,
  decorators: [
    (Story) => (
      <StoreProvider store={store}>
        <Story />
      </StoreProvider>
    ),
  ],
};

How can I use easyPeasy's useStoreState in Storybook?

1 Answers1