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' />
  }
}

this getInitialProps是否会等到所有数据加载完毕后返回？怎么知道何时加载？

任何帮助，不胜感激！

Answer 1

由于_app.js是HoC，因此_app.js中的组件基本上就是您要从页面文件夹中加载的页面（如果进一步编写，则可以传播另一个HoC，然后再加载页面，取决于您的应用程序，但是在撰写HoC时，您必须再次实现getInitialProps，然后执行最终page.js的getInitialProps。每个页面都可以具有自己的getInitialProps（例如，在您要加载公司地址的联系页面上，并且仅在整个应用程序中存在）。 _app.js执行Component.getInitProps（如果已设置）。如果Component的方法返回一个非空对象，它将成为您的pageProps，您最终将其提供给render方法内的Component。
您的page.js现在实现了一个getInitProps方法，该方法将调度一个传奇任务并返回isServer ...给出的结果是，仅您的商店通过调度操作而处于水合状态-getInitProps不必等待任何事情并返回一个布尔值。商店补水后，由于将加载/更新商店中的道具，因此您的组件也会更新。

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

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

编辑：

Link to read

TL：DR;

Saga任务是线程，或者您想要一种事件侦听器。
每次您发出传奇动作（取决于您的sagas）时，都会启动一个听众
在本例中，如果我们在getInitialProps中触发一个动作，我们将使用saga任务将动作调度到商店，但是store.dispatch方法不是异步的=>导致getInitialProps未被该动作阻止，并且尽管被解雇的任务还没有完成
重要：停止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();
    }
  };

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

1 个答案: