getInitialProps doesn't seem to work when using Next.js with next-redux-wrapper

Question

I'm trying to hook my next.js web app with redux by using 'next-redux-wrapper' HOC.

I was able to fetch data from server from getInitialProps function but after wrapping my _app.js with next-redux-wrapper the getInitialProps functions doesn't seem to work.

What do I do wrong here and how can I fix it?

import React from 'react'
import fetch from 'isomorphic-unfetch'
import { connect } from 'react-redux'
import { getItems } from '../../store/actions/itemAction'

const Index = (props) => {
  console.log(props)

  return ()
}

Index.getInitialProps = async () => {
  let items
  await fetch('http://localhost:5000/item')
    .then(res => res.json())
    .then(data => { items = data })
    .catch(err => console.log(err))

  return { items }
}

const mapStatetoProps = state => ({
  item: state.item,
})

export default connect(mapStatetoProps, null)(Index)

Are you using Next.js above version 9? if not that might be one of the issues. Have you checked the github for next-redux-wrapper examples in the README github.com/kirill-konshin/next-redux-wrapper? — mdln97
@mdln97 Yes, I'm using the latest version of nextjs which is 9.3.5. I've checked the document of next-redux-wrapper you refer to and did the same exactly what the example does but it seems that the getInitialProps in the example doesn't seem to work either. I commented out the entire getInitialProps block in the example code, but it still works with the code being commented out, which means the getInitialProps never works in the example code. — Justin M
it is also that in next.js documentation they mention that if you use next.js above 9.3 then you should use getServerSideProps or getStaticProps instead of getInitialProps — mdln97
@mdln97 I see. I guess I'll have to go through the documentation. Thank you for your time. — Justin M

mattacker mattacker · Accepted Answer · 2020-05-06T15:10:16

The same problem also exists in the following example provided by zeit / next.js . See https://github.com/zeit/next.js/tree/master/examples/with-redux-wrapper In this example the function "getInitialProps" is not called either. The effect mentioned in the readme, that the time is pre-rendered directly on the server, is therefore not visible.

getInitialProps doesn't seem to work when using Next.js with next-redux-wrapper

1 Answers