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

感觉一切都应该正常工作，所以我不知道为什么会收到该错误。

如果有帮助，请在这里依赖我的依赖树fpr 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

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

asType

故事书AddDecorators不提供Redux存储

2 个答案: