Question

虽然故事ID已正确预填充，但renderToString（）仍会渲染应用程序，而不会通过mapStateToProps（）填充状态。

我使用选择器从状态获取数据。问题是，道具没有被填充。在客户端，一切正常。

任何想法？谢谢！

这是服务器端操作的代码：

   app.use('*', (req, res) => {

    // // Create a new Redux store instance
    const sagaMiddleware = createSagaMiddleware();
    let middleware = applyMiddleware(sagaMiddleware);
    // middleware = compose(middleware,thunkMiddleware)

    const initialState = {};
    const store = createStore(reducers,initialState,middleware);

    store.runSaga = sagaMiddleware.run;
    store.close = () => store.dispatch(END);
    const routes = getRoutes(store.getState)

    const tres = res;
    const url = req.originalUrl;
    const urlSplit = url.split('/');

    match({ routes: routes, location: req.url }, (err, redirect, props) => {
      if (err) {
        tres.status(500).send(err.message)
      } else if (redirect) {
        tres.redirect(redirect.pathname + redirect.search)
      } else if (props) {

            if(urlSplit[1]==='story'){

              let slug = urlSplit[2];
              store.runSaga(waitAll([[getStoryBySlug,host,slug], [getAbout, host]])).done.then(() => {
                res.end(renderPage(store,props,tres));
              });

            }else{

              store.runSaga(waitAll([[getAbout, host], [getHome, host]])).done.then(() => {
                res.end(renderPage(store,props,tres));
              });

            }

      } else {
        tres.status(404).send('Not Found')
      }
    })

    });

And here are the actual renderPage and renderFullPage functions:

    const renderPage = (store,props,res) => {

    // Render the component to a string
    const html = renderToString(
    <Provider store={store}>
      <RouterContext {...props}/>
    </Provider>
    )

    let head = Helmet.rewind();
    const preloadedState = fromJS(store.getState());

    return renderFullPage(html, preloadedState, head);

    }

    const renderFullPage = (html, preloadedState, head) => {
  return `
    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        ${head.title.toString()}
        ${head.meta.toString()}
        ${head.link.toString()}
        <script src="https://use.typekit.net/yzi3zgu.js"></script>
        <script>try{Typekit.load({ async: true });}catch(e){}</script>

        <link href="/assets/fonts/GillSans/stylesheet.css" rel="stylesheet"/>
        <link href="/assets/vendors/fullpage/jquery.fullPage.css" />
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />

        <link rel="shortcut icon" href="/assets/icons/favicon-inv.png" />
        <link rel="stylesheet" href="/styles.css" />
      </head>
      <body>
        <div id="root">${html}</div>
        <script>
          window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState)}
        </script>
        <script src="/vendor.js"></script>
        <script src="/main.js"></script>
      </body>
    </html>

    };

renderToString与Redux存储渲染填充没有道具（服务器端）

0 个答案: