javascript - react-redux在express服务端渲染如何实现当前端代码改变,服务端自动打包并且刷新页面
PHPz
PHPz 2017-04-11 11:20:50
[JavaScript讨论组]

初学react全家桶,在搭建项目结构的时候遇到2个问题:
1:目前express可以使用webpack打包前端的代码,但是不知道该如何弄自动刷新页面。
2:因为要在服务端渲染react+redux+router,当前端的代码改变,刷新的时候会报前端代码和服务端代码不一致的错误,如下

github项目地址:https://github.com/yourenA/re...

请问一下怎么解决这两个问题或者有什么相似的脚手架可以告诉小弟一声

express端代码如下

/**
 * Created by Administrator on 2017/1/3.
 */
var webpack=require('webpack');
var morgan = require('morgan')
var favicon = require('serve-favicon');
var webpackDevMiddleware=require('webpack-dev-middleware');
var webpackHotMiddleware=require('webpack-hot-middleware');
var config=require('./webpack.config');
var app=new (require('express'));
var port=3001;
var compiler=webpack((config));
app.use(webpackDevMiddleware(compiler,{noInfo:true,publicPath:config.output.publicPath}));
app.use(webpackHotMiddleware(compiler));
app.use(morgan('combined'));
app.use(favicon(__dirname + '/static/dist/link.ico'));


var qs = require('qs');
import {fetchCounter} from './common/api/counter'
import { match, RouterContext } from 'react-router';
import {Provider} from 'react-redux'
import React from 'react';
import {renderToString} from 'react-dom/server';
import configureStore from './src/store/configureSote'
import getRoutes from './src/Routes';
const routes = getRoutes();
function handlerender(req, res) {
    fetchCounter(apiResule=> {
        const params = qs.parse(req.query);
        const counter = parseInt(params.counter, 10) || apiResule || 0;
        var initailStrate = {};

        const store = configureStore(initailStrate);
        match({ routes, location: req.url }, (err, redirect, renderProps) => {
            if (redirect) {
                res.redirect(redirect.pathname + redirect.search);
            } else if (err) {
                console.error('ROUTER ERROR:', err.stack);
                res.status(500);
            } else if (renderProps) {
                res.status(200);
                const html = renderToString(
                    
                        
                    
                );
                const finalState = store.getState();
                res.send(renderFullPage(html, finalState));
            } else {
                res.status(404).send('Not found');
            }
        });
    })
}
function renderFullPage(html, initialState) {
    return `
        
        
        
            
            app
        
        
        

${html}

` } app.use(handlerender); app.listen(port,function (error) { if (error){ console.error(error); }else{ console.info("==>Listen on %s.Open up Http://localhost:%s/ in your browser",port,port) } });
PHPz
PHPz

学习是最好的投资!

全部回复(0)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号