saa*_*adq 6 javascript reactjs server-side-rendering react-dom react-dom-server
我正在我的React/Redux应用程序中第一次尝试服务器端渲染.我现在遇到的一个问题是我需要初始状态来生成一个随机生成的字符串,然后将其作为prop传递给我的主要App组件.这显然是一个问题,因为它为客户端和服务器生成不同的字符串.我能做些什么来阻止这个问题的发生吗？
帮助理解的基本结构:
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);
而我的减速机:
reducer.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商店获取并呈现它,但它在客户端和服务器上是不同的.任何帮助,将不胜感激!
当您在服务器端生成存储和初始状态时,客户端不应该这样做并尝试重新生成数据.
您只需要生成一次商店和初始状态(在服务器上)并将其传递给客户端.为此,您需要将其注入要渲染的初始组件中.
最常见的方法是添加<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来恢复数据,并在服务器和客户端上获得相同的数据.