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

Posted 2023-02-19

【中文标题】使用 Redux 在 React Hooks 应用程序中添加 Storybook 旋钮

【英文标题】：Adding Storybook knobs in React Hooks app with Redux

【发布时间】：2020-05-10 06:19:26

【问题描述】：

我有一个使用 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',
]

谢谢

【参考方案1】：

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

如果装饰器.js： window.REDUX_STORE = 商店；

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

【讨论】：

我走了不同的路。我将状态逻辑移至单独的包装组件。这样，UI 组件不是直接获取状态更改，而是作为来自包装组件的道具。在 Storybook 中使用这种纯 UI 组件很容易。