AllProviders.js

import { Provider } from 'react-redux'
import { ThemeProvider } from '@material-ui/core/styles/ThemeProvider'
import AppProvider from './components/AppProvider'
import NavbarProvider from './components/NavbarProvider'
import SidebarProvider from './components/SidebarProvider'
import FooterProvider from './components/FooterProvider'
import BlogsProvider from './components/BlogsProvider'
import SentryProvider from './components/SentryProvider'
import BlogsProvider from './components/BlogsProvider'
import store from '../app/store'
import theme from '../app/theme'
import Homepage from './Homepage'

const AllProviders = ({ children }) => (
  <Provider store={store}>
    <ThemeProvider theme={theme}>
      <SentryProvider>
        <AppProvider>
          <NavbarProvider>
            <SidebarProvider>
              <FooterProvider>
                <BlogsProvider>{children}</BlogsProvider>
              </FooterProvider>
            </SidebarProvider>
          </NavbarProvider>
        </AppProvider>
      </SentryProvider>
    </ThemeProvider>
  </Provider>
)

function App() {
  return (
    <AllProviders>
      <Homepage />
    </AllProviders>
  )
}

export default App