Блог

Я пытаюсь реализовать простой тестовый пример для использования Redux-thunks с Next JS, но продолжаю получать ошибку

Ошибка: круговая структура в результате «getInitialProps» страницы «/». https://err.sh/zeit/next.js/circular-structure

Я уже однажды заставлял все это работать, и уверен, что я делаю какую-то очевидную ошибку. Я был бы признателен за любую помощь, которую вы могли бы предоставить. Я ковырялся в этом в течение часа, и я не вижу, где я ошибаюсь…

Я проследил это до отправки в моем thunk, то есть dispatch(getItemsSuccess(data)) в следующем коде в action-creators.js . То есть, если я удалю эту отправку, я не получу ошибку.

   // 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}`)
  }
}
  

Мой _app.js является

 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);
  

и мой index.js является

 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)
  

и, наконец, я настраиваю хранилище таким образом

 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;
  

Опять же, любая помощь очень ценится — я уже некоторое время занимаюсь этим и не вижу недостающей части…

Когда вы возвращаете данные из axios, необходимо получить доступ к данным внутри данных, а именно, вместо

const data = ожидание

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

Я должен был написать

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

Почему возникла эта ошибка

getInitialProps сериализуется в JSON с использованием JSON.stringify и отправляется на сторону клиента для увлажнения страницы.

Однако результат, возвращаемый из getInitialProps, не может быть сериализован, если он имеет циклическую структуру.

Возможные способы ее исправления

Круговые структуры не поддерживаются, поэтому способ исправить эту ошибку — удалить круговую структуру из объекта, который возвращается из getInitialProps. В вашем случае вам просто нужно извлечь соответствующие данные, как объяснил @Cerulean.