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

I use next.js ssr ,and I got server error, my code like this: Error: could not find react-redux context value; please ensure the component is wrapped in a

I surpose my code somthing use error, but I don't know how to fix?

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

in my _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)

in my 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
}

and I got server error :

how can I do ?

Answer 1

You should wrap all of your components within redux provider.

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