NextJS and Redux : Cannot use thunk middleware

Question

I am trying to make use of thunk to make async calls to api, but I am still getting the error : Unhandled Runtime Error: Actions must be plain objects. Use custom middleware for async actions.

This is my custom _app component:

// to connect redux with react 
import { Provider } from 'react-redux';
import { createWrapper } from 'next-redux-wrapper';

import { createStore, applyMiddleware } from 'redux';
import reducers from '../redux/reducers';
import thunk from 'redux-thunk';

const store = createStore(reducers, applyMiddleware(thunk));

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

AppComponent.getInitialProps = async (appContext) => {
    let pageProps = {};
    if (appContext.Component.getInitialProps) {
        pageProps = await appContext.Component.getInitialProps(appContext.ctx);
    };
    return { ...pageProps }
}

// returns a new instance of store everytime its called
const makeStore = () => store;
const wrapper = createWrapper(makeStore);

export default wrapper.withRedux(AppComponent);

And this is the landing page where I am dispatching the action creator:

import { connect } from 'react-redux';
import { fetchPosts } from '../redux/actions';
import { bindActionCreators } from 'redux';
import { useEffect } from 'react';
import Link from 'next/link';

const LandingPage = (props) => {
    useEffect(() => {
        props.fetchPosts();
    }, [props]);

    return <div>
        <Link href="/">
            <a>Home</a>
        </Link>
    </div>
}

LandingPage.getInitialProps = async ({ store }) => {
    store.dispatch(await fetchPosts());
}

const mapDispatchToProps = (dispatch) => {
    return {
        // so that this can be called directly from client side
        fetchPosts: bindActionCreators(fetchPosts, dispatch)
    }
}


export default connect(null, mapDispatchToProps)(LandingPage);

Action:

import api from '../../api';

// returning a function and dispatching manually to make use of async await to fetch data
export const fetchPosts = async () => async (dispatch) => {
    const response = await api.get('/posts');
    dispatch({
        type: 'FETCH_POSTS',
        payload: response
    });
};

Sadly the GitHub Next + Redux example NEXT+REDUX is really complicated for me to understand as I am trying redux for the first time with NextJS. And every blog post has it's own way of doing it and nothing seems to be working.

I do not want it to make it any more complicated. I would really appreciate if anyone could help me why I am getting this error?

adel adel · Accepted Answer · 2020-08-10T09:53:19

the problem is not with next.js when you calling this :

LandingPage.getInitialProps = async ({ store }) => {
    store.dispatch(await fetchPosts());
}

fetchPosts here is a Promise and dispatch dispatch action must be a plain object so to solve this remove async word from it like this :

export const fetchPosts = () => async (dispatch) => {
    const response = await api.get('/posts');
    dispatch({
        type: 'FETCH_POSTS',
        payload: response
    });
};

butt if you want to wait for api response instead you need call it in the component like this :

const App= ()=>{
const dispatch = useDispatch()
useEffect(() => {
 const fetch = async()=>{
try{
    const response = await api.get('/posts');
    dispatch({
        type: 'FETCH_POSTS',
        payload: response
    });
}
catch(error){
throw error
}
 }
 fetch()
    }, []);

return ....
}

NextJS and Redux : Cannot use thunk middleware

1 Answers