如何将 ReactJS 与 Redux 和 Spring mVC 集成答案

【问题标题】：How to integrate ReactJS with Redux and Spring mVC如何将 ReactJS 与 Redux 和 Spring mVC 集成
【发布时间】：2017-07-10 01:45:25
【问题描述】：

我是 ReactJS 的新手。之前，我在我公司的项目中使用了 ReactJS，但实际上该项目已由 somone 配置。我只是将我对 Reactjs 的了解应用到项目中，例如：状态、道具、组件、应用 redux .....

但是，现在我想一步一步自己创建一个项目。因为我可以使用 reactjs 集成 redux 来管理使用数据的状态，而 Spring 是 RESTfull 标准的服务器并与 JPA 结合

请帮帮我

【问题讨论】：

标签： spring reactjs redux state

【解决方案1】：

你可以使用2种方法集成spring和react js

您可以通过制作一个使用 nashorn 引擎 (jdk8) 的同构 Web 应用程序来实现。
你可以使用 pusher api（我在我的应用中使用过 pusher api）

由于我无法在这里解释完整的工作，这里有教程供参考 using pusher api isomorphic wb app

【讨论】：

好的，非常感谢......你听说过restfull的库什么叫做fetch吗？

【解决方案2】：

没有简单的答案。

你可以使用maven插件https://github.com/eirslett/frontend-maven-plugin

在你的 pom.xml 中添加类似这样的内容

        <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>1.2</version>
            <configuration>
                <installDirectory>target</installDirectory>
            </configuration>
            <executions>
                <execution>
                    <id>install node and npm</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                    <configuration>
                        <nodeVersion>v4.4.5</nodeVersion>
                        <npmVersion>3.9.2</npmVersion>
                    </configuration>
                </execution>
                <execution>
                    <id>npm install</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>install</arguments>
                    </configuration>
                </execution>
                <execution>
                    <id>webpack build</id>
                    <goals>
                        <goal>webpack</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>

你需要像这样添加 package.json

{
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "requirejs": "^2.3.2"
  },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-regenerator": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-stage-0": "^6.22.0",
    "react-frame-component": "^0.6.6",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0"
  },
  "scripts": {
    "start": "webpack-dev-server --progress --inline --hot",
    "build": "webpack -d"
  }
}

但是依赖列表是你的

你需要 webpack.config.js 这样的东西

var path = require('path');
var webpack = require('webpack');
var packageJSON = require('./package.json');

module.exports = {
    entry: [
              'webpack/hot/only-dev-server',
              './src/main/resources/static/App.js'],
    devtool: 'sourcemaps',
    cache: true,
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/bundle.js',
        publicPath: 'http://localhost:3000/'
    },
    resolve: {extensions: ['.js', '.jsx']},
    plugins: [
               new webpack.HotModuleReplacementPlugin()
               ,new webpack.LoaderOptionsPlugin({
                     debug: true
                   })
        ],
    module: {
        loaders: [
            {
                test: path.join(__dirname, '.'),
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                }
            },

        ]
    },
    devServer: {
            noInfo: false,
            quiet: false,
            lazy: false,
            watchOptions: {
                poll: true
           }
        }
};

【讨论】：