1

编辑：这似乎与“next-redux-saga”和“redux-saga”新版本之间的交互有关——我在本地修补了“next-redux-saga”，因此它可以与“1.0”一起使用.0' 但在恢复它并改回 'redux-saga' 0.16.0 时，下面的问题就消失了。我会进一步调查

我正在使用 next-redux-wrapper 和 next-redux-saga 将 Next.js 连接到 redux 到我的 react 应用程序。它工作不一致。我做了一些调试，发现我的自定义 createStore 函数被调用了两次：一次是在应用程序首次启动时，就在getInitialPropsin之前_app.js，然后在pageProps = await Component.getInitialProps({ctx});return in之后再次调用_app.js。

我使用了来自 Next.js 站点的示例 redux-saga 代码——除了项目应用程序中发生的许多其他事情在 Next.js 示例应用程序中没有发生之外，最大的区别就是 store 提供者在 _app.js 中包围了一个 Layout 组件，它又包含三个组件，一个用于页眉，一个用于页脚，一个用于主要内容——每个都与 store 连接。

这是发生了什么的痕迹——它既是我的 console.logs 也是 next-redux-wrapper 的调试语句。当正确接收到数据或道具时，我会指出，尽管我没有打印下面的所有数据（它出现在日志中）。您将在日志末尾看到未正确接收数据的位置。

谢谢你的帮助！

   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
4

0 回答 0