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

Posted 2023-04-14

【中文标题】带有 Gatsby 的 Redux - 无法识别包装的提供程序

【英文标题】：Redux with Gatsby - wrapped Provider is not recognized

【发布时间】：2021-10-31 03:50:40

【问题描述】：

我一直遇到错误

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

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

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

<Provider store=reduxStore>
   <Layout>
     <title>Home</title>
      <div>
       <Image
         
         src="./app-promo1.png"
         
       />
       <Image
         
         src="./app-promo2.png"
         
       />
      </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   />
         </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 上我是否需要做一些特别的事情。

【参考方案1】：

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

【讨论】：

谢谢你，这帮助很大。我是 Gatsby 的新手，没有意识到在 Gatsby 中你必须执行这个额外的步骤，因为我已经习惯了它的 create-react-app 实现。