NextJS官方示例代码：_app.getInitialProps调用Component.getInitialProps-这是为了确保所有页面都加载数据？

Question

我试图了解如何将redux-saga连接到NextJS，并遵循它们提供的示例代码-https: //github.com/zeit/next.js 。 我知道可以从getInitialProps内加载数据，但是我不了解Component.getInitialProps的调用是怎么回事：

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(createStore)(withReduxSaga({async: true})(MyApp))

这是否允许页面的getIntialProps中的所有异步加载加载？ 也就是说，在index.js我们有代码

class Index extends React.Component {
  static async getInitialProps (props) {
    const { store, isServer } = props.ctx
    store.dispatch(tickClock(isServer))

    if (!store.getState().placeholderData) {
      store.dispatch(loadData())
    }

    return { isServer }
  }

  componentDidMount () {
    this.props.dispatch(startClock())
  }

  render () {
    return <Page title='Index Page' linkTo='/other' NavigateTo='Other Page' />
  }
}

这个 getInitialProps等待返回，直到所有数据加载getInitialProps ？ 如何知道何时加载？

任何帮助，不胜感激！

Answer 1

1. 由于_app.js是HoC，因此_app.js中的组件基本上就是您要从pages文件夹加载的页面（如果进一步编写，则可以传播另一个HoC，然后再加载页面，取决于您的应用程序，但随后您的撰写HoC必须再次实现getInitialProps，然后执行最终page.js的getInitialProps。 每个页面都可以具有自己的getInitialProps（例如，在您要加载公司地址的联系页面上，并且仅在整个应用程序中存在）。 _app.js执行Component.getInitProps（如果已设置）。 如果Component的方法返回一个非空对象，则它将成为您的pageProps，您最终将其提供给render方法内的Component。

2. 您的page.js现在实现了一个getInitProps方法，该方法将分派一个传奇任务并返回isServer ...即给出的结果是，仅您的商店通过分派操作而处于水化状态-getInitProps不必等待任何东西并返回一个布尔值。 商店水合后，由于将加载/更新商店中的道具，因此您的组件将被更新。

但是，目前我面临着同样的问题：

我在getInitProps中调度了传奇任务，但是由于动作是异步的，因此我在ComponentDidMount之后收到了道具。

编辑：

链接阅读

TL：DR;

• Saga任务是线程，或者您想要一种事件侦听器。
• 每当您发出传奇动作（取决于您的sagas）时，都会启动一个侦听器
• 在我们的例子中，如果我们在getInitialProps中触发一个动作，我们使用saga任务将动作调度到商店，但是store.dispatch方法不是async =>，这导致getInitialProps不会被该动作阻止，尽管被触发的任务会立即返回道具还没完成
• Victor的解决方案以及next-redux-saga软件包中的一种解决方案是：1.分发“ END”操作以停止当前的根任务，并且2.应用toPromise（）方法，该方法使您能够异步等待sagas结束。 =>您可以阻塞getInitialProps并强制方法在方法返回之前等待sagas结束；
• 重要提示：停止saga线程时，可以，必须在服务器上完成/应该完成操作，但是您的应用程序需要客户端上的sagas才能正确处理商店的副作用，因此，如果！isServer，则必须重新运行sagas。

更新：

它不起作用。 您只能停止服务器上的sagas，因为只需要它们即可进行初始执行，此后服务器上的sagas几乎没有用。 但是，在客户端，您无法停止sagas。

这是我的store.js ...，您可以执行初始sagas，并且服务器会在getInitialProps中等待它们完成，因为toPromise（）使异步停止。

在客户端，您必须按照自己的方式来度过整个生命周期等...客户端存储的水合作用无法正常工作，正如我期望的那样。 也许更好，因为否则您将阻止React进行渲染，这通常与React背道而驰。

  store.runSagas = () => {
    if (!store.currentSagas) {
      store.currentSagas = sagaMiddleware.run(rootSaga);
    }
  };

  store.stopSagas = async () => {
    if (store.currentSagas) {
      store.dispatch(END);
      await store.currentSagas.toPromise();
    }
  };

  store.execTasks = isServer => async (tasks = []) => {
    tasks.forEach(store.dispatch);
    if (isServer) {
      await store.stopSagas();
    }
  };