Javascript 节点服务器，Redux不'；t将内容发送回UI组件_Javascript_Node.js_Reactjs_Express_Redux

Javascript 节点服务器，Redux不'；t将内容发送回UI组件

javascript node.js reactjs express redux

Javascript 节点服务器，Redux不'；t将内容发送回UI组件,javascript,node.js,reactjs,express,redux,Javascript,Node.js,Reactjs,Express,Redux,问题是，当我运行npm运行start dev来运行客户端代码时，它工作得非常好。但每当我运行npm时，都会运行start来启动服务器端。客户端不会将内容发送回UI。我需要帮助 Server.js 'use strict'; import path from 'path'; import { Server } from 'http'; import Express from 'express'; import React from 'react'; import { renderToString

问题是，当我运行npm运行start dev来运行客户端代码时，它工作得非常好。但每当我运行npm时，都会运行start来启动服务器端。客户端不会将内容发送回UI。我需要帮助

Server.js

'use strict';

import path from 'path';
import { Server } from 'http';
import Express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { match, RouterContext } from 'react-router';
import routes from './routes';
import NotFoundPage from './components/NotFoundPage';

import { Provider } from 'react-redux';
import { createStore } from 'redux';
const content = require('./Action/reducer');

// initialize the server and configure support for ejs templates
const app = new Express();
const server = new Server(app);
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// define the folder that will be used for static assets
app.use(Express.static(path.join(__dirname, 'static')));

// universal routing and rendering
app.get('*', (req, res) => {
  match(
    { routes, location: req.url },
    (err, redirectLocation, renderProps) => {
      const store = createStore(content);

      // in case of error display the error message
      if (err) {
        return res.status(500).send(err.message);
      }

      // in case of redirect propagate the redirect to the browser
      if (redirectLocation) {
        return res.redirect(302, redirectLocation.pathname + redirectLocation.search);
      }

      // generate the React markup for the current route
      let markup;
      if (renderProps) {
        // if the current route matched we have renderProps
        markup = renderToString(
          <Provider store={store}>
            <RouterContext {...renderProps}/>
          </Provider>
        );
      } else {
        // otherwise we can render a 404 page
        markup = renderToString(<NotFoundPage/>);
        res.status(404);
      }
      res.send(renderFullPage(markup))

      // render the index template with the embedded React markup
      // return res.render('index', { markup });
    }
  );
});

function renderFullPage(html) {
  return `
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="shortcut icon" href="/img/favicon.ico">
      <link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <title>Chris</title>

      <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
      <meta name="viewport" content="width=device-width" />

      <link href="bootstrap3/css/bootstrap.css" rel="stylesheet" />
      <link href="assets/css/gsdk.css" rel="stylesheet" />
      <link href="assets/css/demo.css" rel="stylesheet" />

      <!--     Font Awesome     -->
      <link href="bootstrap3/css/font-awesome.css" rel="stylesheet"/>
      <link href='https://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'/>
    </head>
    <body>
      <div id="main">${html}</div>
      <script src="../static/js/bundle.js"></script>
      <script src="jquery/jquery-1.10.2.js" type="text/javascript"></script>
      <script src="assets/js/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>

      <script src="bootstrap3/js/bootstrap.js" type="text/javascript"></script>
      <script src="assets/js/gsdk-checkbox.js"></script>
      <script src="assets/js/gsdk-radio.js"></script>
      <script src="assets/js/gsdk-bootstrapswitch.js"></script>
      <script src="assets/js/get-shit-done.js"></script>
      <script src="assets/js/custom.js"></script>
    </body>
  </html>

    `
  }


// start the server
const port = process.env.PORT || 3000;
const env = process.env.NODE_ENV || 'production';
server.listen(port, err => {
  if (err) {
    return console.error(err);
  }
  console.info(`Server running on http://localhost:${port} [${env}]`);
});

reducer.js

const action_types = require('./action_types');
import json from '../../lang.json';


const initialState = {
  content: json.en // Loads default language content (en) as an initial state
};

const reducer = function (state = initialState, action) {
  switch (action.type) {
    case action_types.SWITCH_LANGUAGE:
      return {
        content: json[action.language]
      };
    default:
      return state;
  }
};

module.exports = reducer;

如果你愿意，你可以试试我的代码。这是我的github项目。克隆项目。执行npm安装，npm运行start dev以运行客户端（工作），npm运行start（调度问题）

非常感谢您的帮助

到底是什么“调度问题”？浏览器控制台或终端中是否有错误信息？因此，我单击布局组件中的按钮，该按钮将调用switchLanguage（）。它将改变内容的状态。此时，数据将被调度，并使用this.props中更新的内容更新UI组件。“调度问题”到底是什么？浏览器控制台或终端中是否有错误信息？因此，我单击布局组件中的按钮，该按钮将调用switchLanguage（）。它将改变内容的状态。此时，数据将被调度，并使用this.props中更新的内容更新UI组件。

'use strict';

import React from 'react';
import { Link } from 'react-router';

// const actions = require('../Action/actions');
import * as actions from '../Action/actions';
import {connect} from 'react-redux';

class Layout extends React.Component {
  handleSwitchLang(targetLang) {
    this.props.switchLanguage(targetLang);
  }

  render() {
    let switchLanguage = this.props.switchLanguage;
    let content = this.props.content;
    return (
      some UI code
    );
  }
}

function mapStateToProps(state) {
  return { content: state.content }
}

export default connect(mapStateToProps, actions)(Layout);

const action_types = require('./action_types');
import json from '../../lang.json';


const initialState = {
  content: json.en // Loads default language content (en) as an initial state
};

const reducer = function (state = initialState, action) {
  switch (action.type) {
    case action_types.SWITCH_LANGUAGE:
      return {
        content: json[action.language]
      };
    default:
      return state;
  }
};

module.exports = reducer;