Answer a question

I am using Storybook and React-Redux.

I have a global decorator in preview.js, which adds the store like so:

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

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

The ProviderWrapper is just (more or less):

import { Provider } from 'react-redux';
import { configureStore } from '../redux/configureStore';

const store = configureStore();
export const ProviderWrapper = ({ children }) =>
    (<Provider store={store}>{children}</Provider>)

Configure store is currently very simple: const configureStore = () => createStore(reducers);

The issue I have is that when I try to use react-redux hooks in one of my components, and set it up I get this error message:

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

My Component uses the store like so:

const MyLovelyComponent = () => {
   const { myData, lovelyData } = useSelector(selectMyLovelyData);
   return (
      <Paper>
        <MyComponent data={myData} />
        <LovelyComponent data={lovelyData} />
      </Paper>
   );
};

And when I use it in a story I have it set up in this way:

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

It feels like everything should be set up to work, so I can't figure out why I am getting that error.

If it helps,here os my dependency treefpr react/redux etc. This may be relevant based on this 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

Again, no sure if it is relevant but on the off chance it helps I've included it.

Answers

I've resolved my issue by moving the code from the decorator into the story itself. Long term this is not ideal, obviously.

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