How to styleguide your react components when using redux

Question

I am using react, styleguidist and redux. I am trying to document different app states depending on redux store state, but the playground the .md file creates only uses one store. The .md file looks like this:

import * as actions from './redux/actions';
import { Provider } from 'react-redux'
import store from './redux/store';

(
<Provider store={store}>
  <App />
</Provider>
)

in the same .md file there is another .js block, as the example [here]:(https://react-styleguidist.js.org/docs/documenting.html#usage-examples-and-readme-files) the block is :

import * as actions from './redux/actions';
import { Provider } from 'react-redux'
import store from './redux/store';

// the live sample in the styleguidist server updates correctly when dispatching the action
store.dispatch(actions.showConnection(true)); 

//THE PROBLEM IS THAT THE OTHER SAMPLE (THE ONE ABOVE) ALSO UPDATES) so there is one store for the entire sample

//¿How can I dispatch actions and only update the sample inside each ``` js code? 
//¿How can I mock  the redux store inside each js block sample in the .md file ? 
(
<Provider store={store}>
  <App />
</Provider>
)

any help will be appreciated.