Redux with Gatsby - wrapped Provider is not recognized

user_15482494 0
Viewed 170

I keep encountering the error

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

even though I wrapped my root file in the <Provider> already. My suspicion on what might be wrong is that instead of nested components being wrapped in the <Provider> it is a "Link" to the page that is wrapped instead?

My index.tsx file looks like this

<Provider store={reduxStore}>
   <Layout>
     <title>Home</title>
      <div>
       <Image
         width="100%"
         src="./app-promo1.png"
         alt="app promo banner 1"
       />
       <Image
         width="100%"
         src="./app-promo2.png"
         alt="app promo banner 2"
       />
      </div>
   </Layout>
</Provider>

My navbar is inside a Header component which is inside the Layout component.

Layout.tsx

<div>
  <LayoutWrapper>
     <HeaderWrapper>
       <div className="d-none d-md-block">
         <Header />
        </div>
        <div className="d-block d-md-none">
          <MobileHeader />
        </div>
     </HeaderWrapper>
     <ContentWrapper>{children}</ContentWrapper>
     <FooterWrapper>
       <Footer />
     </FooterWrapper>
  </LayoutWrapper>
</div>

Header.tsx

<Wrapper>
   <Container>
     <NavWrapper>
        <Logo>
         <AniLink paintDrip hex="#24B2D8" to="/">
           <Image src={logoImg} width="220px" alt="Logo" />
         </AniLink>
        </Logo>
        <div className="d-flex flex-row justify-content-center align-items-center">
         <AniLink paintDrip to="/shop" hex="#24B2D8">
            <NavItem>Shop</NavItem>
          </AniLink>
         <AniLink paintDrip to="/activation" hex="#24B2D8">
            <NavItem>Activation</NavItem>
          </AniLink>
         <AniLink cover to="/partners" bg="#24B2D8">
           <NavItem>Partners</NavItem>
         </AniLink>
         <AniLink cover to="/support" bg="#24B2D8">
            <NavItem>Support</NavItem>
          </AniLink>
        </div>
        <Button
          link="/"
          text="Log in"
          color="blue"
        />
     </NavWrapper>
   </Container>
</Wrapper>

The pages that I need the Redux/Provider in are all of these links. ie: /shop, /activation, /partner, and /support. But when I navigate from / to /shop it gives me the error.

One thing to note is that I'm using Gatsby and not create-react-app. I am not sure if there is something special that I would have to do on Gatsby or not.

redux gatsby reactjs
1 Answers

Your providers need to wrap your component across your application, that's why when you change the page the context is lost. To achieve that in Gatsby, you have available the dual (gatsby-browser.js/gatsby-ssr.js) wrappRootElement API:

const React = require("react")
const { Provider } = require("react-redux")

const createStore = require("./src/state/createStore")
const store = createStore()

exports.wrapRootElement = ({ element }) => {
  return (
    <Provider store={store}>
      {element}
    </Provider>
  )
}

element stands for the root React element built by Gatsby.

user_55853710
Related