我试图了解如何将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/