bmealhouse/next-redux-saga

TypeError: Converting circular structure to JSON

Closed this issue · 2 comments

_app

import withReduxSaga from 'next-redux-saga';
import withRedux from 'next-redux-wrapper';
import App, { Container } from 'next/app';
import React from 'react';
import { Provider } from 'react-redux';
import { connect } from 'react-redux';

import { compose, withApollo } from 'react-apollo';
import configureStore from '../utils/client/store';
import withData from '../utils/client/withData';
import withIntl from '../utils/client/withIntl';
import withRoot from '../utils/client/withRoot';

const isDev = process.env.NODE_ENV !== 'production';
interface IApp{
    props: {
        pageProps: object
        store: object
        Component: any
    };
}
class IApp extends App {
    public static async getInitialProps({ Component, ctx }) {
        const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};
        return { pageProps };
    }
    public componentDidCatch(error, errorInfo) {
        // tslint:disable-next-line:no-console
        console.log('CUSTOM ERROR HANDLING', error);
        // This is needed to render errors correctly in development / production
        super.componentDidCatch(error, errorInfo);
    }
    public render() {
        const { Component, pageProps, store } = this.props;
        return (
            <Container>
                <Provider store={store}>
                    <Component {...pageProps} />
                </Provider>
            </Container>
        );
    }

}

const AppEnd = compose(withRoot, withIntl, withData, withApollo)(IApp);
export default withRedux(configureStore, { debug: isDev })(withReduxSaga(connect(state => state)(AppEnd)));

configureStore

import { applyMiddleware, createStore } from 'redux';
import createSagaMiddleware from 'redux-saga';
import 'regenerator-runtime/runtime';
import rootReducer from './reducers';
import rootSaga from './saga';

const sagaMiddleware = createSagaMiddleware();

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

export function configureStore(initialState = {}) {
  const store: any = createStore(
    rootReducer,
    initialState,
    bindMiddleware([sagaMiddleware])
  );

  store.runSagaTask = () => {
    store.sagaTask = sagaMiddleware.run(rootSaga);
  };

  store.runSagaTask();

  return store;
}

export default configureStore;

rootSaga

import { all } from 'redux-saga/effects';

import example from './reducers/example/sagas';

function* rootSaga() {
  yield all([example]);
}

export default rootSaga;

i get an error TypeError: Converting circular structure to JSON
if I remove next-redux-saga and store.runSagaTask(); from the code the error is fixed

@qeneke - Thank you for submitting this issue. Are you intersted in working on a PR to fix this? If not, can you please setup a repository that reproduces the issue?

@qeneke - Is this still an issue? I would like to help resolve, but need additional information. I'm going to close the issue if I don't hear back from you.