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 https://github.com/kirill-konshin/next-redux-wrapper? — mdln97, Apr 27 '20 at 11:14
@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, Apr 27 '20 at 12:07
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, Apr 27 '20 at 12:43
@mdln97 I see. I guess I'll have to go through the documentation. Thank you for your time. — Justin M, Apr 27 '20 at 17:30

score 0 · Answer 1 · answered May 06 '20 at 15:10

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.

Daniel Tok · Answer 2 · 2022-07-22T06:49:19.683

I think you have to add getInitialProps on what the wrapper HOC withRedux spits out, and call it's original getInitialProps, because it's being used. I didn't figure out how to do it though

It's actually in the next-wrapper docs that getInitialProps gets swallowed, but I think it should be possible to call it.

if you do it in a page it looks like this:

export const getServerSideProps = wrapper.getServerSideProps(
  (store) =>
    async ({ locale }) => {
      const supportedChains = await getSupportedChains()
      const addresses: AddressState = { lottery6: supportedChains }
      const defaultChaiId = getDefaultChain(addresses)

      store.dispatch(addressesReceived(addresses))
      store.dispatch(switchChain(defaultChaiId))

      return {
        props: {
          ...(await getServerSideTranslations(locale!)),
        },
      }
    }
)

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

2 Answers2