React-styleguidist: Initializing a redux store

[stinoga]

Are there any good examples of initializing a redux store with styleguidist? Some of my components use a redux store, and I'd like to get one setup with dummy data for the style guide.

[aaronjensen]

This is what we do (pardon the flow types):

WithState.js

// @flow
import React, { Component } from 'react'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import { reducer as reduxFormReducer } from 'redux-form'

import type { State } from 'app/reducers'

const reducer = ({ form, ...state }, action) => ({
  ...state,
  form: reduxFormReducer(form, action),
})

type Props = {
  state: $Shape<State> & {},
  children?: mixed,
}

class WithState extends Component {
  props: Props

  state: {
    store: mixed,
  }

  constructor(props: Props) {
    super()
    this.state = { store: createStore(reducer, props.state) }
  }

  render() {
    return (
      <Provider store={this.state.store}>
        {this.props.children}
      </Provider>
    )
  }
}

export default WithState

Header.examples.md

const WithState = require('scaffolds/WithState').default;
const state = {
  session: {
    currentUser: null,
  },
};

<WithState state={state}>
  <Header />
</WithState>

[sapegin]

You can also redefine a Wrapper component and have store available for all your components. See example with IntlProvider: https://github.com/styleguidist/react-styleguidist/blob/master/docs/Cookbook.md#how-to-connect-redux-store

[stinoga]

@sapegin that worked great thanks!

[joepio]

@stinoga Nice! Could you perhaps share how you created this wrapper that made the store available?

[sapegin]

@stinoga Or even send a PR to the FAQ ;-)

[timurista]

https://github.com/styleguidist/react-styleguidist/blob/master/docs/FAQ.md#how-to-change-the-layout-of-a-style-guide is out of date. It is now: https://github.com/styleguidist/react-styleguidist/blob/master/docs/Cookbook.md#how-to-connect-redux-store. Specifically for adding redux to the store.

[drewandrew]

@timurista @sapegin https://github.com/styleguidist/react-styleguidist/blob/master/docs/Cookbook.md#how-to-connect-redux-store no longer exists. Anywhere else you would direct me/us for an example? I'm specifically looking to dispatch actions from a styleguidist README.md example.

[timurista]

@drewandrew https://github.com/styleguidist/react-styleguidist/blob/master/docs/Thirdparties.md#redux

[juandata]

Inside your .md file import and dispatch like this:

import { Provider } from 'react-redux'
import * as actions from './redux/actions';
import store from './redux/store'
store.dispatch(actions.showConnection(true)); //your action 
(
<Provider store={store}>
  <App />
</Provider>
)

If you have issues with importing I suggest to change from npm to yarn since styleguidist has some issues with dependencies when installing with npm.