我第一次在我的 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 商店获取并渲染它,但它在客户端和服务器中是不同的。任何帮助,将不胜感激!