'Can't get Redux (Thunks) to work with NextJS using next-redux-wrapper: getInitalProps not called

I'm trying to get Redux to work with thunks using next-redux-wrapper. I've looked at the example code but my code doesn't work. I've gone back and forth and no longer see the forest for the trees. At the moment my 'getInitialProps' in index.js isn't being called, hence my data is never loaded because I never dispatch the dataloading action. The store is created, but it's empty.

// _app.js
import {createStore} from "redux";
import {Provider} from "react-redux";
import App from "next/app";
import withRedux from "next-redux-wrapper";
import initStore from '../redux/store'
function MyApp({ Component, pageProps,store }) {
    console.log('in _app', store.getState())
    return (
        <Provider store={store}>
            <Component {...pageProps} />
        </Provider>
    );
}
export default withRedux(initStore,{debug:true})(MyApp);



// store.js
import { configureStore } from '@reduxjs/toolkit'
import rootReducer from './root-reducer'
const store = () => configureStore({
    reducer: rootReducer,
})
export default store



// index.js
import React from 'react'
import Head from 'next/head'
import Nav from '../components/nav'
import {useDispatch} from "react-redux"
import {fetchPosts} from '../redux/posts'
const Home = () => {
 return  (<div>
    <Head>
      <title>Home</title>
      <link rel="icon" href="/favicon.ico" />
    </Head>
    <Nav />
    <div className="hero">
      <h1 className="title">Welcome YAA!</h1>
    </div>
  </div>)
}
Home.getInitialProps = async ({store,isServer}) => {
    console.log('about to dispatch')
    store.dispatch(fetchPosts())
    return {store,isServer}
}
export default Home

Edit

This worked. I suppose it has to be a class, although the example on the NextJS site uses a functional component

import App from 'next/app'
import React from 'react'
import withRedux from "next-redux-wrapper";
import {Provider} from 'react-redux'
import initStore from '../redux/store'

const makeStore = (initialState, options) => {
    return initStore(initialState)
};
class MyApp extends App {

static async getInitialProps({Component, ctx}) {


        const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};

        return {pageProps};

    }

    render() {
        // @ts-ignore
      const {Component, pageProps, store} = this.props;
        return (
          <Provider store={store}>
              <Component {...pageProps} />
          </Provider>
        );
    }

}

export default withRedux(makeStore)(MyApp);

Solution 1:^[1]

I was facing the same issue as you and after reading the comments here and with your solution to your problem, I rewrote what I had as funcional component and it's working so if you wanna use or for anyone having the same issue, here's a solution:

import { Provider } from "react-redux";
import withRedux from "next-redux-wrapper";
import { initStore } from "../store/store";

import "./styles.scss";

const MyApp = props => {
  const { Component, pageProps, store } = props;
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
};

MyApp.getInitialProps = async ({ Component, ctx }) => {
  const pageProps = Component.getInitialProps
    ? await Component.getInitialProps(ctx)
    : {};
  return { pageProps };
};

export default withRedux(initStore)(MyApp);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	João Miguel Santos

'Can't get Redux (Thunks) to work with NextJS using next-redux-wrapper: getInitalProps not called

Edit

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]