使用 Redux 在 React Hooks 应用程序中添加 Storybook 旋钮

Question

我有一个使用 React hooks 的应用程序，我也在使用 Storybook。添加 Redux 后我遇到了一个小问题。虽然将 Provider 添加为全局装饰器帮助我加载组件的初始状态并在 Storybook 中显示它们，但现在一切都已准备就绪，我无法弄清楚如何添加旋钮以显示具有不同状态的组件。

这是 Provider 的配置文件

const store = createStore(reducer);  
addDecorator(Story => (<div
style={style}>
<Provider store={store}>
<Story />
</Provider>   </div> ));

这是在添加 Redux（使用 useSelector 和 useDispatch 挂钩）之前运行良好的案例之一

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} />
})

州

const appStates = [
  LOADING: 'LOADING',
  INACTIVE: 'INACTIVE',
  ERROR:'ERROR',
]

谢谢

Answer 1

我遇到了同样的问题。我终于将商店添加到全局变量并使用 store.dispatch

如果decorator.js： window.REDUX_STORE = 商店；

在故事中： window.REDUX_STORE.dispatch(...);

使用 Redux 在 React Hooks 应用程序中添加 Storybook 旋钮

Adding Storybook knobs in React Hooks app with Redux

reactjs

redux

storybook

react-hooks