I have an app using React hooks, and I am also using there Storybook. After adding Redux I have a small problem. While adding Provider as global decorator helped me load the initial state for my components and display them in Storybook, now that everythign is in store, I cannot figure out how to add knobs to be able to display my components with different state.
Here's the config file with Provider
const store = createStore(reducer);
addDecorator(Story => (<div
style={style}>
<Provider store={store}>
<Story />
</Provider> </div> ));
And here's one of the stories which worked fine before Redux (with useSelector and useDispatch hooks) was added
const stories = storiesOf('UI Components', module)
stories.addDecorator(withKnobs)
stories.add('Input Button', () => {
const groupId = 'Props'
const statusesKnob = select('Button states', appStates, Object.values(appStates)[0], groupId)
return <InputButton getAppState={statusesKnob} />
})
States
const appStates = [
LOADING: 'LOADING',
INACTIVE: 'INACTIVE',
ERROR:'ERROR',
]
Thanks
I had the same problem. I finally added the store to the a global variable and used store.dispatch
if decorator.js: window.REDUX_STORE = store;
in the story: window.REDUX_STORE.dispatch(...);