带有 Gatsby 的 Redux - 无法识别包装的提供程序

Question

我一直遇到错误

找不到 react-redux 上下文值；请确保组件被包裹在<Provider>

即使我已经将根文件包装在 <Provider> 中。我对可能有问题的怀疑是，嵌套组件不是被包裹在<Provider> 中，而是被包裹的页面的“链接”？

我的 index.tsx 文件看起来像这样

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

我的导航栏位于布局组件内的 Header 组件内。

布局.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>

我需要 Redux/Provider 的页面都是这些链接。即：/shop、/activation、/partner 和/support。但是当我从 / 导航到 /shop 时，它给了我错误。

需要注意的一点是，我使用的是 Gatsby 而不是 create-react-app。我不确定在 Gatsby 上我是否需要做一些特别的事情。

Answer 1

您的提供者需要在您的应用程序中包装您的组件，这就是为什么当您更改页面时上下文会丢失。为了在 Gatsby 中实现这一点，您可以使用双重 (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 代表 Gatsby 构建的根 React 元素。