javascript – 使用redux进行服务器端渲染

我有一个使用reactjs和redux构建的简单应用程序.由于我刚刚开始学习redux,我在服务器端渲染时遇到了一些问题.

到目前为止我有…
客户端App.js呈现App组件.

render(
  <Provider store={store}>
    <App />
  </Provider>,document.body
);

一个App组件：

const App = () => (
  <div>
    <SearchContainer />
    <TodoContainer />
  </div>
)

如果两个项都是容器,则SearchContainer从输入框获取输入,触发一个动作,该动作将使用加载的todo`s(来自远程休息服务)调度消息.

现在我喜欢在服务器端的页面加载上加载那些todo,并在页面显示后显示它们.我该怎么办？有没有办法在页面实际显示之前不使用服务器端渲染和加载项目？

到目前为止,我到目前为止是routes.js文件：

const middleware = [ thunk ]
  if (process.env.NODE_ENV !== 'production') {
    middleware.push(createLogger())
  }

  const store = createStore(reducer,applyMiddleware(...middleware))

  app.get('/',function(req,res) {
    res.render('home',{
      markup: ReactDOMServer.renderToString(
        <Provider store={store}>
          <App />
        </Provider>
      )
    });
//Some code calling remote service goes here

这通常是加载和应用程序,但我如何将加载的数据推送到TodoContainer？它应该是某种方式来分派消息,还是应该使用todos数组作为属性来初始化App组件？

解决方法

您不需要服务器端渲染.

解决您遇到的问题的最常见方法是从componentDidMount加载数据.在返回此数据之前,您需要显示某些内容,例如微调器或笨蛋或消息​​或空白页.就是那样子.您的应用不会是唯一一个带有加载指示器的应用…

但是,您还可以执行的操作是在发送页面之前获取数据服务器端,然后使用< script>中的页面将其发送下来.标记和JSON.stringify的帮助.

<script>
  window.initialData = {
    "myData": [ 1,2,3 ]
  };
</script>

然后你可以用它来初始化商店.这使数据立即可用,并消除了对API端点的需求.

const store = createStore(reducer,window.initialData,applyMiddleware(...middleware));

您也可以使用相同的数据在服务器上进行渲染,但无论如何都不需要它.

最后,我想指出你正在渲染document.body,这是一个坏主意,因为很多浏览器扩展和插件为了自己的需要在DOM中添加了div或其他东西. React不适合那些.它期望控制它传递的元素.最好只创建一个div并将其渲染成一个div.