NextJS и Redux-thunk: Получение «Ошибка: Круговая структура в« getInitialProps »» - PullRequest
Новая
       59

NextJS и Redux-thunk: Получение «Ошибка: Круговая структура в« getInitialProps »»

0 голосов
/ 12 апреля 2019

Я пытаюсь реализовать простой тестовый пример для использования 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;

Опять же, любая помощь очень ценится - я уже некоторое время обдумываю это и не вижу недостающую часть ...

1 Ответ

1 голос
/ 12 апреля 2019

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

const data = await 

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