React-styleguidist: Could not find "store" in either the context or props & @connect() (redux connected) component

[dlim-dlim]

Hi,

Just wanted to see if there is a current solution to render "store" in an @connect() (redux connected) component in the styleguide?

When I view the styleguide, I'm seeing this error:
Invariant Violation: Could not find "store" in either the context or props of "Connect(Footer)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Footer)".

Here's the export statement in Footer.jsx:

export default connect(mapStateToProps)(Footer);

In the Wrapper component I tried adding a Provider wrapper without any luck:

render() {
    return (
      <Provider store={getStore()}> 
          <IntlProvider locale='en'>
            {this.props.children}
          </IntlProvider>
      </Provider> 
    );
  }

In styleguide.config.js I'm referencing:
resolver: docgen.resolver.findAllComponentDefinitions

I saw this thread but didn't mention "store" https://github.com/styleguidist/react-styleguidist/issues/143

Looking to see if anyone has a workable recommendation?

[n1313]

Does adding a prop named store to propTypes work?

[roychoo]

you can actually wrap the connect component directly in the readme examples.
i had not tried it, but along this lines should be possible

const Provider = require('react-redux').Provider;
const createStore = require('redux').createStore;
const reducers = require('./reducers').default;

let store = createStore(reducers);

<Provider store={store}>
  <Footer />
</Provider>

[dlim-dlim]

thanks @n1313 @roychoo. I tried those options and think I'm running into an issue with my webpack setup for the styleguide that is causing the store to not render properly so going to do some debugging there. I find it gets tricky sometimes to find some parity between the webpack setup of your app vs. the webpack setup for styleguidist. If I discover anything outside of the webpack issue that benefits this thread I'll be sure to share here.

[dlim-dlim]

Updating the Readme.md file to require the unconnected component worked:

const Footer = require('./Footer').Footer;
<Footer />

Beyond that also added this line to my styleguide.config.js to resolve an issue with generators from Redux Saga:
webpackConfig.entry.unshift('babel-polyfill');