CODEWITHSUNDEEP
reactjsreduxreact-reduxredux-thunknext.js
Cerulean
Cerulean

Reputation: 6013

NextJS and Redux-thunk: Getting 'Error: Circular structure in "getInitialProps"'

I'm trying to implement a simple test case for using Redux-thunks with Next JS but keep getting the error

Error: Circular structure in "getInitialProps" result of page "/". https://err.sh/zeit/next.js/circular-structure

I have gotten this all to work once before, and am sure I'm making some obvious error. I'd appreciate any help you could provide. I've been poking at this for an hour and I'm not seeing where I'm going wrong...

I've traced it down to the dispatch within my thunk, that is dispatch(getItemsSuccess(data)) in the following code in action-creators.js. That is, if I remove that dispatch, I don't get the error. 

  // action-creators.js
    import {GET_ITEMS_SUCCESS} from "./action-types"
    import axios from 'axios'

export const getItemsSuccess = (data) => ({ type: GET_ITEMS_SUCCESS, data });

export const getItems = () => async (dispatch,getState) => {
  try {
    const data = await axios.get(`https://api.themoviedb.org/3/genre/movie/list?api_key=12345xyz`)
    return dispatch(getItemsSuccess(data))
  } catch(e) {
    console.log(`error in dispatch in action-creators: ${e}`)
  }
}

My _app.js is

import React from 'react'
import {Provider} from 'react-redux'
import App, {Container} from 'next/app'
import withRedux from 'next-redux-wrapper'
import configureStore from '../redux/configure-store'

class MyApp extends App {
  static async getInitialProps({Component, ctx}) {
    let pageProps = {}
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }
    return {pageProps}
  }

  render() {
    const {Component, pageProps, store} = this.props
    return (
      <Container>
        <Provider store={store}>
          <Component {...pageProps} />
        </Provider>
      </Container>
    )
  }
}

export default withRedux(configureStore, { debug: true })(MyApp);

and my index.js is

import React, {Component} from 'react'
import {connect} from 'react-redux'
import {getItems} from "../redux/action-creators"

class Index extends Component {
  static async getInitialProps({store}) {
    try {
      await store.dispatch(getItems())
    } catch(e) {
      console.log(`error in dispatch in index.js: ${e.message}`)
    }
  }

  render() {
    return <div>Sample App</div>
  }
}

export default connect(state => state)(Index)

and finally I configure the store thus

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './root-reducer';

const bindMiddleware = middleware => {
  if (process.env.NODE_ENV !== 'production') {
    const { composeWithDevTools } = require('redux-devtools-extension');
    return composeWithDevTools(applyMiddleware(...middleware));
  }
  return applyMiddleware(...middleware);
};

function configureStore(initialState = {}) {
  const store = createStore(
    rootReducer,
    initialState,
    bindMiddleware([thunk]),
  );
  return store;
}

export default configureStore;

Again, any help much appreciated -- I have been going over this for some time and am not seeing the missing piece...

Upvotes: 0

Views: 4236

Answers (2)

Akif Hadziabdic
Akif Hadziabdic

Reputation: 2890

Why This Error Occurred

getInitialProps is serialised to JSON using JSON.stringify and sent to the client side for hydrating the page.

However, the result returned from getInitialProps can't be serialised when it has a circular structure.

Possible Ways to Fix It

Circular structures are not supported, so the way to fix this error is removing the circular structure from the object that is returned from getInitialProps. In your case you just need to extract appropriate data like @Cerulean explained.

Upvotes: 1

Cerulean
Cerulean

Reputation: 6013

When you return data from axios, one has to access the data within the data, to wit, instead of

const data = await 

axios.get(`https://api.themoviedb.org/3/genre/movie/list?api_key=12345xyz`)
return dispatch(getItemsSuccess(data))

I should have written

axios.get(`https://api.themoviedb.org/3/genre/movie/list?api_key=12345xyz`)
return dispatch(getItemsSuccess(data.data))

Upvotes: 4

Related Questions