Thanks to our blog you may already be an expert in React. And now you will know even more, as today we will share with you about Storybook with React and Redux.
Storybook works nicely with traditional component development and doesn’t require changes to core functionality to display, test, and document your component library.
- Getting React up and running with Storybook is relatively simple. The full setup instructions are available in the official docs. This process will provide a
.storybook/directory and a
config.jsfile. Once those pieces are in place, creating stories for React components is straightforward. This
withProviderdecorator can be turned into a utility function for use in other stories. For convenience, these decorators are normally kept in a new
.storybook/decorators.jsfile so they can be imported throughout the codebase.
- Redux DevTools is a “power-up” when developing with Redux, providing visuals for state changes, action replays, and more. After installing the browser extension, there is some code configuration needed in the store.In the past Redux DevTools has had trouble working with Storybook as it isolates all components into an iframe. This prevented the extension from listening to the Redux actions within our stories.
Interested? Find additional information here.
And now it’s getting easier to work with Redux since the release of a new Redux starter kit.