Adding Storybook knobs in React Hooks app with Redux

Question

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

Tals Tals · Accepted Answer · 2020-06-08T15:08:57

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(...);

Adding Storybook knobs in React Hooks app with Redux

1 Answers