I got server error when use next.js , Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

Question

我使用 next.js ssr ，我得到了服务器错误，我的代码是这样的：错误：找不到 react-redux 上下文值；请确保组件包裹在

我想我的代码有些使用错误，但我不知道如何修复？

在我的 Header.jsx:

import React from 'react'
import {
  useSelector,
} from 'react-redux'

const Header = props => {
  const user = useSelector(state => state.getIn(['header', 'user']).toJS())
  return (
    <div>...</div>
  )
}
export default Header

在我的 _app.jsx:

import App, { Container } from 'next/app'
import 'antd/dist/antd.css'
import React from 'react'
import { Provider } from 'react-redux'
import Layout from '../components/Layout'
import withRedux from '../lib/with-redux-app'

class MyApp extends App {

  static async getInitialProps(ctx) {

    const { Component } = ctx
    let pageProps = {}
    if (Component.getInitialProps) {
     pageProps = await Component.getInitialProps(ctx)
    }

    return {
      pageProps,
    }
  }

  render() {
    const { Component, pageProps, reduxStore } = this.props
    return (
      <Container>
        <Layout>
          <Provider store={reduxStore}>
            <Component {...pageProps} />
          </Provider>
        </Layout>
      </Container>
    )
  }
}

export default withRedux(MyApp)

在我的 with-redux-app.jsx

import React from 'react'
import initializeStore from '../redux/store'

const isServer = typeof window === 'undefined'
const __NEXT_REDUX_STORE__ = '__NEXT_REDUX_STORE__'

function getOrCreateStore(initialState) {
  if (isServer) {
    return initializeStore(initialState)
  }

  if (!window[__NEXT_REDUX_STORE__]) {
    window[__NEXT_REDUX_STORE__] = initializeStore(initialState)
  }
  return window[__NEXT_REDUX_STORE__]
}

export default Comp => {
  class withReduxApp extends React.Component {
    constructor(props) {
      super(props)
      this.reduxStore = getOrCreateStore(props.initialReduxState)
    }

    render() {
      const { Component, pageProps, ...rest } = this.props
      return (
        <Comp
          {...rest}
          Component={Component}
          pageProps={pageProps}
          reduxStore={this.reduxStore}
        />
      )
    }
  }

  withReduxApp.getInitialProps = async ctx => {
    const reduxStore = getOrCreateStore()
    ctx.reduxStore = reduxStore

    let appProps = {}
    if (typeof Comp.getInitialProps === 'function') {
      appProps = await Comp.getInitialProps(ctx)
    }

    return {
      ...appProps,
      initialReduxState: reduxStore.getState(),
    }
  }

  return withReduxApp
}

我收到服务器错误：

我该怎么办？

Answer 1

您应该将所有组件包装在 redux 提供程序中。

<Provider store={reduxStore}>
  <Layout>
    <Container>
      <Component {...pageProps} />
    </Container>
  </Layout>
</Provider>

Answer 2

_app 中的 Provider 应该包装使用商店的每个组件。在这种情况下，您的布局使用它..

所以你应该将布局包装在 Provider 中

Answer 3

就我而言，问题已通过从 package.json

重新启动脚本“dev”解决

I got server error when use next.js , Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

I got server error when use next.js , Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

provider

reactjs

redux

react-redux

next.js