NextJS 和 Redux-thunk：出现“错误：“getInitialProps”中的循环结构”

Posted 2023-02-22

【中文标题】NextJS 和 Redux-thunk：出现“错误：“getInitialProps”中的循环结构”

【英文标题】：NextJS and Redux-thunk: Getting 'Error: Circular structure in "getInitialProps"'

【发布时间】：2019-09-03 09:52:17

【问题描述】：

我正在尝试实现一个简单的测试用例，以便将 Redux-thunks 与 Next JS 一起使用，但不断收到错误

错误：页面“/”的“getInitialProps”结果中的循环结构。 https://err.sh/zeit/next.js/circular-structure

我之前已经让这一切工作了一次，我确信我犯了一些明显的错误。 我很感激你能提供的任何帮助。我已经戳了一个小时，但我没有看到我哪里出错了......

我已将其追溯到我的 thunk 中的调度，即 action-creators.js 中以下代码中的 dispatch(getItemsSuccess(data))。也就是说，如果我删除该调度，我不会收到错误消息。

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

再次，非常感谢任何帮助 - 我已经研究了一段时间，但没有看到丢失的部分......

【参考方案1】：

当你从 axios 返回数据时，必须访问数据中的数据，也就是说，而不是

常量数据 = 等待

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

【参考方案2】：

为什么会发生此错误

getInitialProps 使用JSON.stringify 序列化为 JSON，并发送到客户端以对页面进行水合。

但是，getInitialProps 返回的结果在具有循环结构时无法序列化。

可能的修复方法

不支持循环结构，因此修复此错误的方法是从 getInitialProps 返回的对象中删除循环结构。在您的情况下，您只需要像@Cerulean 解释的那样提取适当的数据。