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

Question

我正在使用故事书和反应还原。我在 中有一个全局装饰器，它像这样添加商店：preview.jsimport { addDecorator } from '@storybook/react';import ProviderWrapper from '../src/components/Provider'; //Provides the storeaddDecorator(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 {

    title: 'MyLovelyComponent',

    Component: MyLovelyComponent

}

const UsingReduxComponent = () => {

    const dispatch = useDispatch();

    useEffect(() => {

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

      dispatch(updateLovelyData(lovelyData));

    }, []);

    return (<MyLovelyComponent />);

}

export const UsingRedux = () => (

    <ProviderWrapper>

        <UsingReduxComponent />

    </ProviderWrapper>

)

Answer 2

您还必须在提供程序和包装器中传递存储。

import { Provider } from 'react-redux';

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

const store = configureStore();

const ProviderWrapper = ({ children, store }) => (

    <Provider store={store}>

        {children}

    </Provider>

);

export const withProvider = (story) => (

    <ProviderWrapper store={store}>

        {story()}

    </ProviderWrapper>

)

// in config.js file

import { withProvider } from './Provider.js';

addDecorator(withProvider);