错误：找不到react-redux上下文值;请确保组件 Package 在< Provider>：Redux和NextJS中

u59ebvdq 于 2023-05-17 发布在 React

关注(0)|答案(2)|浏览(179)

我正在用Redux构建我的第一个Next.js站点，我遇到了一个错误：
错误：找不到react-redux上下文值;请确保组件 Package 在
我正在使用_document.js为我的网站创建“模板”，其中包括页眉和页脚：

import Document, { Html, Head, Main, NextScript } from 'next/document'
import { PublicHeader, Footer } from '../components';

class Public extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head>
            <link rel="preconnect" href="https://fonts.googleapis.com" />
            <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
            <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Poppins:wght@300;400;600;700;800&display=swap" rel="stylesheet"/>

            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
            <script src="https://kit.fontawesome.com/aa1831f3ef.js" crossOrigin="anonymous"></script>
        </Head>
        <body>
          <PublicHeader />
          <Main />
          <Footer />
          <NextScript>
              <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossOrigin="anonymous"></script>
          </NextScript>
        </body>
      </Html>
    )
  }
}

export default Public

我用一个商店设置了Redux，然后用Provider Package 了_app.js。

import '../styles/css/main.css';
import { useStore } from '../redux/store'
import { Provider } from 'react-redux'
import { persistStore } from 'redux-persist'
import { PersistGate } from 'redux-persist/integration/react'

export default function App({ Component, pageProps }) {
  const store = useStore(pageProps.initialReduxState)
  const persistor = persistStore(store, {}, function () {
    persistor.persist()
  })

  return (
    <Provider store={store}>
      <PersistGate loading={<div>loading</div>} persistor={persistor}>
        <Component {...pageProps} />
      </PersistGate>
    </Provider>
  )
}

所有的工作都很好，但当我尝试使用useDispatch或useSelector，我得到的错误。我假设这是因为_document在_app之上，所以它可以将模板 Package 在_app周围，但是我如何使_document可以使用存储和分派呢？

next.js

来源：https://stackoverflow.com/questions/70748113/error-could-not-find-react-redux-context-value-please-ensure-the-component-is

2条答案

按热度按时间

lymgl2op1#

你不应该在_document中添加React组件--应该在_app中完成。
自定义Document文档：

Document仅在服务器中呈现，像onClick这样的事件处理程序将无法工作。
浏览器不会初始化<Main />之外的React组件。不要在这里添加应用程序逻辑或自定义CSS（如styled-jsx）。如果您需要在所有页面中共享组件（如菜单或工具栏），请查看App组件。

解决方案是将PublicHeader和Footer移动到您的自定义_app中，这样它们就可以正确初始化并访问Redux商店。

export default function App({ Component, pageProps }) {
    // Remaining code

    return (
        <Provider store={store}>
            <PersistGate loading={<div>loading</div>} persistor={persistor}>
                <PublicHeader />
                <Component {...pageProps} />
                <Footer />
            </PersistGate>
        </Provider>
    )
}

赞(0）回复(0）举报 2023-05-17

ppcbkaq52#

使用工作区时，请确保在工作区根节点模块文件夹中安装了@reduxjs/toolkit和react-redux。

赞(0）回复(0）举报 2023-05-17