Server-Side React Rendering. Fetch Initial Data
npm install fetch-initial-data
npm install --save fetch-initial-data`
使用演示
https://github.com/tzuser/ssr_base
$3
import {bindActionCreators} from 'redux';
class Home extends Component{
constructor(props){
super(props)
//判断是否是浏览器
if(typeof window==="object")this.fetchData();
}
//fetchData固定名称，必须返回异步,且所有action需要awiat
async fetchData(){
await this.props.getDataAct();
}
render(){
let {data}=this.props;
return 首页 {data}
}
}
const mapStateToProps=(state)=>({
data:state.config.data
})
const mapDispatchToProps=(dispatch)=>bindActionCreators({
getDataAct:Acts.getData,
},dispatch)export default connect(mapStateToProps,mapDispatchToProps)(Home)
$3
import {getDataFromTree} from 'fetch-initial-data';const render=async (ctx,next)=>{
//获取store
const { store, history } = createServerStore(ctx.req.url);
const AppRender=(
)
//保证所有请求完成
await getDataFromTree(AppRender);
//取得state传入html
let state=store.getState();
//开始渲染
let routeMarkup =renderToString(AppRender)
}