1

EDIT: It seems to be something with regards to the interaction between 'next-redux-saga' and the new version of 'redux-saga' -- I had patched 'next-redux-saga' locally so it would work with '1.0.0' but on reverting it and changing back to 'redux-saga' 0.16.0 the problem below has gone away. I will investigate further

I'm connecting Next.js to redux to my react app using next-redux-wrapper and next-redux-saga. It works inconsistently. I did some debugging and found that my custom createStore function is being called twice: once when the app first boots, just before getInitialProps in _app.js, and then again just after pageProps = await Component.getInitialProps({ctx}); returns in _app.js.

I used the sample redux-saga code from the Next.js site -- Apart from the fact that there are a lot of other things going on in the project app that are not going on in the Next.js sample app, the largest difference is that the store provider surrounds a Layout component in _app.js and this in turn holds three components, one for the header, one for the footer and one for the main content -- each of these is connected with the store.

Here is a trace of what happens -- it's both my console.logs as well as next-redux-wrapper's debug statements. When the data or props are received correctly I indicate that, although I don't print all the data below (it appears in the log). You will see at the end of the log where the data is not received correctly.

Thanks for your help!

   creating store::::
1. WrappedApp.getInitialProps wrapper got the store with state { home: {} }
_app.js getInitialProps
calling Component.getInitialProps
index.js, getInitialProps isServer =  true
index.js, dispatching saga loadData inside index.js getInitialProps, isServer =  true
fetching data in saga from route home:  http://something.else.com/api/es/
returning Component.getInitialProps
storing data in store { name: 'Home',
  published: true,
  draft: false,
  layout_id: 1,}
3. WrappedApp.getInitialProps has store state { home:
   { data:... } // data received correctly
4. WrappedApp.render created new store with initialState { home:
     { data:... } // data received correctly
creating store::::
rendering _app.js, main render, props =  { Component:
   { [Function: Connect]
     WrappedComponent: { [Function: Index] propTypes: [Object] },
     displayName: 'Connect(Index)' },
  router:
   Router {
     onPopState: [Function],
     route: '/index',
     components: { '/_app': [Object] },
     events: EventEmitter { listeners: {} },
     pageLoader: undefined,
     prefetchQueue:
      PQueue {
        queue: [Queue],
        _pendingCount: 0,
        _concurrency: 2,
        _resolveEmpty: [Function] },
     ErrorComponent: undefined,
     pathname: '/index',
     query: {},
     asPath: '/',
     subscriptions: Set { _c: Set {} },
     componentLoadCancel: null,
     _beforePopState: [Function] },
  isServer: true,
  store:
   { dispatch: [Function],
     subscribe: [Function: subscribe],
     getState: [Function: getState],
     replaceReducer: [Function: replaceReducer],
     runSagaTask: [Function],
     sagaTask:
      { '@@redux-saga/TASK': true,
        id: 10,
        meta: [Object],
        isRoot: true,
        context: {},
        joiners: null,
        queue: [Object],
        cancel: [Function: cancel],
        cont: [Function],
        end: [Function: end],
        setContext: [Function: setContext],
        toPromise: [Function: toPromise],
        isRunning: [Function: isRunning],
        isCancelled: [Function: isCancelled],
        isAborted: [Function: isAborted],
        result: [Function: result],
        error: [Function: error] },
     [Symbol(observable)]: [Function: observable] } }
in header.js selector, state =  { home:
     { data:... } // data received correctly
rendering Header.js, props =  { headerData:...} // props received correctly
rendering index.js, props =  {...,} // props received correctly
rendering Footer.js, props =  {...,} // props received correctly
creating store::::
1. WrappedApp.getInitialProps wrapper got the store with state { home: {} }
_app.js getInitialProps
calling Component.getInitialProps
index.js, getInitialProps isServer =  true data =  undefined
index.js, dispatching loadData inside index.js getInitialProps, isServer =  true
returning Component.getInitialProps
3. WrappedApp.getInitialProps has store state { home: {} }
4. WrappedApp.render created new store with initialState { home: {} } // store is EMPTY
creating store::::
rendering _app.js, // props are NOT received correctly
Linda Paiste
  • 38,446
  • 6
  • 64
  • 102
Cerulean
  • 5,543
  • 9
  • 59
  • 111
  • Hey, this looks like exactly my problem. Did you end up figuring it? – Guard May 16 '19 at 19:18
  • 1
    @Guard -- it was a problem in the interaction between next-redux-saga and redux-saga. A new version of one broke the old version of the other. I don't know whether it was ever resolved but you can check their repos. In the end the project went with Gatsby... – Cerulean May 17 '19 at 11:49

0 Answers0