CODEWITHSUNDEEP
reactjsreduxreact-reduxstorybook
Dor
Dor

Reputation: 127

Storybook with redux component

I have a MERN stack with redux. I'm trying to build my UI components and I want to use storybook for easier workflow.

Thing is that I simply can't get it to work.

This is my component: Navbar.js:

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";

class Navbar extends Component {
  render() {
    const { user } = this.props.auth;
    return (
      <div className="navbar-fixed">
        <nav className="z-depth-0">
          <div className="nav-wrapper white">
            <Link
              to="/"
              style={{
                fontFamily: "monospace"
              }}
              className="col s5 brand-logo center black-text"
            >
              <i className="material-icons">code</i>
              {user.name}
            </Link>
          </div>
        </nav>
      </div>
    );
  }
}
const mapStateToProps = state => ({
  auth: state.auth
});
export default connect(
  mapStateToProps
)(Navbar);

And this is my Story Navbar.stories.js:

import React from 'react';
import Navbar from '../components/layout/Navbar';

export default {
  title: 'Navbar',
  component: Navbar
};

export const SimpleStory = () => <Navbar/>;

this is the error that I'm getting:

Could not find "store" in either the context or props of "Connect(Navbar)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Navbar)".

How can I make my Navbar component isolated from redux?

Upvotes: 2

Views: 3673

Answers (1)

hsu
hsu

Reputation: 31

Your component seems to use react-redux, and it has no Redux store to connect to in story, so wrap story with provider can deal with that issue. https://www.learnstorybook.com/intro-to-storybook/react/en/screen/

import React from 'react';
import Navbar from '../components/layout/Navbar';
import { Provider } from 'react-redux'
import { store } from "../../src/index";

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

export const SimpleStory = () => <Navbar/>;

Upvotes: 3

Related Questions