我试图了解如何将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会等到所有数据加载完毕后再返回吗?如何知道何时加载?

任何帮助,不胜感激!

最佳答案

由于_app.js是HoC,因此_app.js内的组件基本上就是您要从pages文件夹加载的页面(如果进一步编写,则可以传播另一个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方法不是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();
    }
  };

关于javascript - NextJS官方示例代码:_app.getInitialProps调用Component.getInitialProps —这是为了确保所有页面都加载数据?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54367390/

10-11 23:43