Storybook AddDecorators 不提供 redux store

Question

我正在使用 Storybook 和 React-Redux。

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

import { addDecorator } from '@storybook/react';
import ProviderWrapper from '../src/components/Provider'; //Provides the store

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

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

感觉一切都应该设置好才能正常工作，所以我不明白为什么会出现该错误。

如果有帮助，这里 os 我的依赖项 treefpr react/redux 等。这可能与此相关 github issue:

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

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

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);

Answer 2

我已经通过将代码从装饰器移到故事本身来解决我的问题。显然，从长远来看，这并不理想。

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

Storybook AddDecorators 不提供 redux store

Storybook AddDecorators doesn't provide the redux store

javascript

reactjs

redux

react-redux

storybook