故事书添加装饰者不提供 redux 商店

Question

我正在使用故事书和反应还原。

我在 中有一个全局装饰器，它像这样添加商店：preview.js

import { addDecorator } from '@storybook/react';

import ProviderWrapper from '../src/components/Provider'; //Provides the store

addDecorator(storyFn => <ProviderWrapper>{storyFn()}</ProviderWrapper>

提供程序包装器只是（或多或少）：

import { Provider } from 'react-redux';

import { configureStore } from '../redux/configureStore';

const store = configureStore();

export const ProviderWrapper = ({ children }) =>

    (<Provider store={store}>{children}</Provider>)

配置存储目前非常简单：const configureStore = () => createStore(reducers);

我遇到的问题是，当我尝试在我的一个组件中使用 react-redux 钩子并进行设置时，我会收到以下错误消息：

could not find react-redux context value; please ensure the component is wrapped in a <Provider>

“我的组件”按如下方式使用存储：

const MyLovelyComponent = () => {

   const { myData, lovelyData } = useSelector(selectMyLovelyData);

   return (

      <Paper>

        <MyComponent data={myData} />

        <LovelyComponent data={lovelyData} />

      </Paper>

   );

};

当我在故事中使用它时，我会以这种方式设置它：

export default {

    title: 'MyLovelyComponent',

    Component: MyLovelyComponent

}

export const UsingRedux = () => {

    const dispatch = useDispatch();

    useEffect(() => {

      dispatch(updateMyData(myData)); // actionCreator for updating state

      dispatch(updateLovelyData(lovelyData));

    }, []);

    return (<MyLovelyComponent />);

}

感觉一切都应该设置好工作，所以我无法弄清楚为什么我会得到这个错误。

如果它有帮助，这里是我的依赖树fpr反应/重做等。根据这个github问题，这可能与此相关：

transformation-comparison@1.0.0 /home/centos/transformation-comparison

┠─┰ @storybook/addon-actions@5.3.18

│ ┠─┰ @storybook/api@5.3.18

│ │ └── react@16.13.1  deduped

│ ┠─┰ @storybook/components@5.3.18

│ │ └── react@16.13.1  deduped

│ └── react@16.13.1  deduped

┠─┰ @storybook/react@5.3.18

│ └─┰ @storybook/core@5.3.18

│   └─┰ @storybook/ui@5.3.18

│     └── react@16.13.1  deduped

┠── react@16.13.1 

┠── react-redux@7.2.0 

└── redux@4.0.5

同样，不确定它是否相关，但有机会它有助于我将其包括在内。

Answer 1

我通过将代码从装饰器移动到故事本身中解决了我的问题。显然，从长远来看，这并不理想。export default {&nbsp; &nbsp; title: 'MyLovelyComponent',&nbsp; &nbsp; Component: MyLovelyComponent}const UsingReduxComponent = () => {&nbsp; &nbsp; const dispatch = useDispatch();&nbsp; &nbsp; useEffect(() => {&nbsp; &nbsp; &nbsp; dispatch(updateMyData(myData)); // actionCreator for updating state&nbsp; &nbsp; &nbsp; dispatch(updateLovelyData(lovelyData));&nbsp; &nbsp; }, []);&nbsp; &nbsp; return (<MyLovelyComponent />);}export const UsingRedux = () => (&nbsp; &nbsp; <ProviderWrapper>&nbsp; &nbsp; &nbsp; &nbsp; <UsingReduxComponent />&nbsp; &nbsp; </ProviderWrapper>)

Answer 2

您还必须在提供程序和包装器中传递存储。import { Provider } from 'react-redux';import { configureStore } from '../redux/configureStore';const store = configureStore();const ProviderWrapper = ({ children, store }) => (&nbsp; &nbsp; <Provider store={store}>&nbsp; &nbsp; &nbsp; &nbsp; {children}&nbsp; &nbsp; </Provider>);export const withProvider = (story) => (&nbsp; &nbsp; <ProviderWrapper store={store}>&nbsp; &nbsp; &nbsp; &nbsp; {story()}&nbsp; &nbsp; </ProviderWrapper>)// in config.js fileimport { withProvider } from './Provider.js';addDecorator(withProvider);