Question

我正在尝试为将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;

再次感谢您提供的任何帮助-我已经进行了一段时间，没有看到丢失的部分...

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

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

1 个答案: