如何在故事书中使用easyPeasy的useStoreState？

Question

我想在storybook中为我的组件创建一个使用easyPeasy状态的故事。

const label = useStoreState((state) => state.localeModel.getLabel)

当我尝试创建故事时，我在storybook中出现错误，试图在useStoreState钩子中映射状态时发生错误:无法读取未定义的属性'getState'。.

我怎样才能解决这个问题?

Answer 1

您需要添加一个decorator来用StoreProvider包裹Story。

它可能看起来像这样:

// YourComponent.stories.js|jsx
import { StoreProvider } from 'easy-peasy';
import { store } from './store';
import { YourComponent } from './YourComponent';
export default {
title: 'YourComponent',
component: YourComponent,
decorators: [
(Story) => (
<StoreProvider store={store}>
<Story />
</StoreProvider>
),
],
};