React 与 Redux 和 Router - 服务器渲染

Question

我正在尝试通过异步调用使服务器渲染工作。我的问题是，在渲染之前没有下载数据。

我的代码（也可以在 github 上找到：https://github.com/tomekbuszewski/server-rendering）

server.js

require('babel-register');

import express from 'express';
import path from 'path';

import React from 'react';
import { renderToString } from 'react-dom/server';
import { Provider } from 'react-redux';
import { getState } from 'redux';
import { match, RouterContext } from 'react-router'

import routes from './app/routes';
import store from './app/store';

const app = express();
const port         = 666;

app.get('/', (req, res) => {
  match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
    if (renderProps) {
      console.log(renderProps.components);
      res.send(renderToString(
        <Provider store={store}>
          <RouterContext {...renderProps} />
        </Provider>
      ))
    } else {
      console.log('err')
    }
  });
});

app.use('/public', express.static(path.join(__dirname, 'public')));
app.use('/data', express.static(path.join(__dirname, 'data')));

app.listen(port);
console.log(`localhost:${port}`);

routes.js

import React from 'react';
import { Router, Route, browserHistory } from 'react-router';

import App from './Components/App';

const routes = (
  <Router history={browserHistory}>
    <Route path="/" component={App} />
  </Router>
);

export default routes;

App 组件有 fetch 功能：

const fetch = (dispatch) => {
    const endpoint = '/data/index.json';

    axios.get(endpoint).then((res) => {
        Array.prototype.forEach.call(res.data, d => {
            const payload = {
                id:    d.id,
                title: d.title
            };

            dispatch({type: 'ADD_CONTENT', payload});
        });
    });
};

调度“ADD_CONTENT”操作：

case 'ADD_CONTENT':
  return { ...state, data: [...state.data, action.payload] };

在客户端一切正常。

Answer 1

1. 你的 redux 操作应该返回一个 promise，当 store 正确加载数据时该 promise

例如：

const fetch = (dispatch) => {
    const endpoint = '/data/index.json';

    return axios.get(endpoint).then((res) => {
        Array.prototype.forEach.call(res.data, d => {
            const payload = {
                id:    d.id,
                title: d.title
            };

            dispatch({type: 'ADD_CONTENT', payload});
        });
    });
};

1. 您必须使用像redux-connect 这样的包装器，在加载组件之前调用这些操作。

在您的示例中，路由组件是App

在这种情况下，您可以使用预加载数据所需的 redux 操作来装饰该组件。

import { asyncConnect } from 'redux-connect';

@asyncConnect([{
    promise: ({ store: { dispatch } }) => {
        // `fetch` is your redux action returning a promise
        return dispatch(fetch());
    }
}])
@connect(
    state => ({
        // At this point, you can access your redux data as the
        // fetch will have finished 
        data: state.myReducer.data
    })
)
export default class App extends Component {
    // ...the `data` prop here is preloaded even on the server
}

@connect 可以装饰嵌套组件，如果您不使用顶部容器中的数据，因为商店在应用程序范围内可用，但 @asyncConnect 必须装饰由 react-router 直接调用的组件，它不能（到目前为止）在渲染树中的嵌套组件上使用，或者在初始渲染期间不会解析它们

由于组件树的渲染只在服务端发生一次，该函数不能被组件本身调用，需要在加载之前调用，通过 redux-connect 和支持 promise 的 redux 操作，例如使用 redux-thunk 中间件。