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

Question

我正在使用 Redux 构建我的第一个 Next.js 站点，我运行遇到了错误问题：

Error: could not find react-redux context value; please ensure the component is wrapped in a

我正在使用 _document.js 为我的站点创建 'template'，其中包括页眉和页脚：

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 包装了 _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 之上，所以它可以将模板包裹在它周围，但是我怎样才能让 _document 可以使用商店和调度？

Answer 1

您不应在 _document 中添加 React 组件 - 应该在 _app 中添加。

来自 Custom Document 文档：

Document is only rendered in the server, event handlers like onClick won't work.

React components outside of <Main /> will not be initialized by the browser. Do not add application logic here or custom CSS (like styled-jsx). If you need shared components in all your pages (like a menu or a toolbar), take a look at the App component instead.

解决方案是将 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>
    )
}

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

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

javascript

reactjs

redux

next.js