Question

我当前的服务器端节点服务器使用与redux-saga实词示例非常相似的设置。

它两次使用renderToString，这似乎与另一个示例不同。

真实世界的server.js

 const rootComp = <Root store={store} routes={routes} history={createMemoryHistory()} renderProps={renderProps} type="server"/>


  store.runSaga(rootSaga).toPromise().then(() => {
    console.log('sagas complete')
    res.status(200).send(
      layout(
        renderToString(rootComp),
        JSON.stringify(store.getState())
      )
    )
  }).catch((e) => {
    console.log(e.message)
    res.status(500).send(e.message)
  })

  renderToString(rootComp)
  store.close()

另一个示例仅使用一次renderToString。你们能解释一下为什么它需要用redux-saga做两次renderToString吗？

Answer 1

第一个调用（位于底部的调用）将呈现您的App。它将分派您的每个组件操作，然后使用Saga来获取/存储数据。

然后，您正在调用store.close（），它将停止Saga做更多的事情（如果您不停止Saga，由于Saga的while（true），它将永远等待）。

第二次调用（在promise中）将使用存储在商店中的数据来呈现您的应用程序。当您停止Saga时，Saga将不再对其进行任何处理。

因为有些示例只有一个“ renderToString”。选择一个：

没有要加载的数据，因此无需渲染两次
通过另一种方式加载数据

为什么需要两次renderToString来响应服务器端渲染？

1 个答案: