React与Redux和Router - 服务器端渲染

Question

React与Redux和Router - 服务器端渲染

javascriptreactjsreact-routerreact-redux

4

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

以下是我的代码（也可在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] };

所有工作在客户端都很好。

- Tomek Buszewski

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pandaiolo · Answer 1

你的redux actions应该返回一个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});
        });
    });
};

你必须使用类似 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 可以修饰嵌套组件，如果您不使用顶级容器中的数据，因为 store 在应用程序范围内可用，但是 @asyncConnect 必须修饰由 react-router 直接调用的组件，它不能在呈现树中的嵌套组件上使用（至少目前还不支持），否则它们将在初始渲染期间不会被解析

由于组件树的渲染仅在服务器端发生一次，因此该函数无法由组件本身调用，需要在加载之前通过 redux-connect 和支持 promises 的 redux action 调用，例如使用 redux-thunk 中间件。