6

我第一次在我的 React/Redux 应用程序中尝试服务器端渲染。我现在遇到的一个问题是我需要初始状态有一个随机生成的字符串,然后将它作为道具传递给我的主要App组件。这显然会导致问题,因为它为客户端和服务器生成不同的字符串。我能做些什么来阻止这个问题的发生吗?

帮助理解的基本结构:

应用程序.js

import React from 'react';
import { connect } from 'react-redux';

const App = ({ randomStr }) => (
  <div> 
    <p>{randomStr}</p>
  </div>
);

const mapStateToProps = (state) => ({
  ...
});

const mapDispatchToProp = (dispatch) => ({
  ...
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

还有我的减速机:

减速器.js

import { generateString } from '../util';
import { NEW_STRING } from '../constants';

const stringReducer = (state = generateString(), action) => {
  switch (action.type) {
    case NEW_STRING:
      return generateString();

    default:
      return state;
  }
};

export default stringReducer;

如您所见,我randomStr从我的 redux 商店获取并渲染它,但它在客户端和服务器中是不同的。任何帮助,将不胜感激!

4

1 回答 1

5

当您在服务器端生成存储和初始状态时,客户端不应这样做并尝试重新生成数据。

您只需要生成一次商店和初始状态(在服务器上)并将其传递给客户端。为此,您需要将其注入您将要渲染的初始组件中。

最常见的方法是添加<script>标签并将状态附加到您的窗口,例如在window.__initialState.

例如,如果您在ReactDOM.renderToString服务器端使用来渲染名为 的初始组件Html,您可以:

const html = ReactDOM.renderToString(<Html initialState={initialState} />);

然后,在您的Html组件中,您可以注入此数据,以便客户端以后可以使用它:

<script dangerouslySetInnerHTML={{ __html: `window.__initialState=${JSON.stringify(this.props.initialState)};` }}/>

之后,在客户端,您可以使用它window.__initialState来取回数据,最终您将在服务器和客户端上获得相同的数据。

于 2016-07-24T08:59:08.997 回答