'Storybook Redux Provider
I want to render my components in storybook. Everything works fine until it's the component which touches Redux. So I know that I need to wrap these redux components in Provider but it doesn't work. Here is my providers.tsx
import { DecoratorFn } from '@storybook/react'
import { IntlProvider } from "react-intl"
import { ThemeProvider } from "@mui/material/styles"
import { ThemeProvider as Emotion10ThemeProvider } from 'emotion-theming';
import { theme } from "../src/ui-kit/theme"
export const withIntl: DecoratorFn = (StoryFn) => {
return (
<IntlProvider
locale="en"
defaultLocale="en"
messages={{
IHaveTo: "addCorrectMessagesHere"
}}
>
<StoryFn />
</IntlProvider>
)
}
export const withThemeProvider: DecoratorFn = (StoryFn) => {
return (
<Emotion10ThemeProvider theme={theme}>
<ThemeProvider theme={theme}>
<StoryFn />
</ThemeProvider>
</Emotion10ThemeProvider>
);
};
Here is my preview.js where I import these providers created by me and I use them in decorator which is for wrapping every story/component.
import { withIntl, withThemeProvider } from './providers'
export const decorators = [
withIntl,
withThemeProvider
]
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}
I have tried to wrap Story/Component locally in the .stories.tsx file but doesn't work. I have searched any possible thing in Google but nothing did work. This code should work, but it doesn't:
const withReduxProvider = (StoryFn) => {
return (
<Provider store={store}>
<StoryFn />
</Provider>
)
}
P.S it's been lots of hours I am trying to solve this issue and one thing I noticed is that when I try to just import store in preview.js from my redux/store everything disappears after reload in storybook. Here is the screenshot: 
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
