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>

Viewed 1691

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 : enter image description here

how can I do ?

3 Answers

You should wrap all of your components within redux provider.

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

The Provider in _app should wrap every components that uses the store. in this case your Layout uses it..

so you should wrap the Layout inside the Provider

In my case, the problem was solved by rebooting script "dev" from package.json

Related