先贴一下测试代码
1,服务端
//store
let store = createStore(todoApp);
function mapStateToProps(state) {
return {
name: state.todos[0].name
};
}
function mapDispatchToProps(dispatch) {
store.getState();
return {
handleClick: () => dispatch({
type: ADD_TODO
})
};
}
//初始化数据
store.dispatch({
type: 'ADD_TODO', name: 'jackple'
});
//connect把state和dispatch转换成props传递给子组件
let App = connect(mapStateToProps, mapDispatchToProps)(Test);
data.reactHtml = ReactDOMServer.renderToString(
<Provider store={store}>
<App />
</Provider>
);
//从store中获得初始state
data.initialState = JSON.stringify(store.getState());
this.response.render(this.apiInfo.template, data);
2, 客户端
class Test extends React.Component {
constructor(props) {
super(props);
}
handleClick = e => {
console.log(e);
}
render() {
const {name, handleClick} = this.props;
return <div onClick={handleClick}>
Hello {name}
</div>;
}
}
;
if (isNode) {
module.exports = Test;
} else {
function mapStateToProps(state) {
return {
name: state.todos[0].name
};
}
function mapDispatchToProps(dispatch) {
store.getState();
return {
handleClick: () => dispatch({
type: ADD_TODO
})
};
}
// //初始化数据
// store.dispatch({
// type: 'ADD_TODO', name: 'jackple'
// });
//connect把state和dispatch转换成props传递给子组件
let App = connect(mapStateToProps, mapDispatchToProps)(Test);
//通过服务端注入的全局变量得到初始 state
const initialState = window.__INITIAL_STATE__;
//使用初始 state 创建 Redux store
const store = createStore(todoApp, initialState);
// store.dispatch({
// type: 'ADD_TODO', name: 'jackpleppp'
// });
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('test')
);
}
这样写有问题吗?初学,不太懂
另外data-react-checksum正常情况下在客户端以同样数据渲染的时候会被删除吗?
参考我的脚手架 https://github.com/hahoocn/re...,支持服务器端渲染。服务器端渲染,图片和css路径是问题