在没有 nodejs 服务器的情况下运行 redux 示例？答案

【问题标题】：Running redux example without nodejs server?在没有 nodejs 服务器的情况下运行 redux 示例？
【发布时间】：2016-04-12 00:15:11
【问题描述】：

我是 node、redux、webpack 和 react 的新手。我找到了这个例子：

http://rackt.org/redux/docs/introduction/Examples.html

我成功运行了 Universal 示例。但是我的客户不想在生产中运行 node.js 服务器。无论如何我可以在构建时生成 bundle.js 并将所有内容上传到他们的服务器？

我发现的所有示例都使用 webpack-dev-server (node express server)，是否可以创建捆绑文件并将其作为简单的静态文件提供？

【问题讨论】：

是的。您正在描述一个典型的部署方案。但是您确实知道您需要一个网络服务器应用程序（节点、IIS、Apache 等）来提供文件，不是吗？
是的，JBoss 在生产中，但我在本地有 Apache。但是从这个例子来看，如何说服导出 bundle.js 静态文件？我在玩，但没有任何成功..
你有 webpack.config.js 吗？你是在使用 webpack 构建你的 bundle.js 吗？
这里是 redux 的例子：github.com/rackt/redux/blob/master/examples/todomvc/…。我试着玩，但没有成功..
我面临着完全相同的问题。你是怎么解决的？我让 Nginx 运行，我期待一个可以上传和运行应用程序的捆绑 js。

标签： node.js reactjs webpack redux

【解决方案1】：

我也面临同样的问题。我想将基于 jsp 视图的 Spring MVC 应用程序迁移到 Redux/React 客户端，并将 Spring 作为客户端 webapp 的数据 API/后端，但具有服务器端渲染优势（通用 javascript）。

对于 Angular 应用（仅限客户端 js），很容易为浏览器提供捆绑包，然后通过 ajax 与后端通信，但使用服务器端渲染，一切都变得更加复杂。

我问自己的两个问题是：它真的值得所有额外的复杂性和架构设置和维护工作吗？由于新的开发功能和生产中可能出现的问题/错误，我的创新是否会让我的项目每天都头疼？

如果您的客户不会欣赏您的服务器端渲染架构或真正获得太多价值（从非技术角度来看），那么为您的服务器端渲染架构提供额外的复杂框架可能不是最好的主意项目。

祝你好运！

【讨论】：

【解决方案2】：

这并不像您想象的那么简单，因为服务器生成的视图可以是动态的。因此，您将需要一些机制来在服务器中运行 javascript。

不过正如this blog post 详细阐述的那样，您可以使用 Nashorn JavaScript 引擎在服务器上渲染 react 组件。这样，您的 javascript 引擎就嵌入在 JVM 中，您不必运行单独的节点进程。

【讨论】：

【解决方案3】：

你可以试试redux-auto

redux-auto：Redux 变得简单（采用即插即用的方法）。在设置商店和操作时删除样板代码

example 有任何设置 + 热重载。

你只需要运行npm install 然后npm start

【讨论】：

【解决方案4】：

如果您的意图是运行一个通用应用程序——一个在服务器上预渲染并在客户端上运行的应用程序（如 repo 中的通用示例）——那么不，您必须运行 Node.js 才能进行服务器渲染.您可以轻松导出单个包以在 client 端运行应用程序，但要在 server 端运行它，您需要一种可以实际运行它的服务器技术，比如节点。

【讨论】：

好的，但是如何为 todomvc 示例执行此操作。 Webpack 配置在这里，但它不会在文件系统上生成 bundle.js..：github.com/rackt/redux/blob/master/examples/todomvc/…

【解决方案5】：

我创建了一个小提琴。 https://jsfiddle.net/parthmakadiya12/z8dLrhqv/2/ 不建议将其用于现实世界的实现。

<html>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>
</head>

<body>
    <div>
        Counter:
        <span id="counter"></span>
    </div>
    <button id="inc">Increment</button>
    <button id="dec">Decrement</button>
</body>
<script>
    function reducer(state, action) {
        switch (action.type) {
            case 'INC':
                return {...state, counter: action.payload
                };
            case 'DEC':
                return {...state, counter: state.counter - 1
                };
            default:
                return state;
        }
    }
    const initialState = {
        counter: 0
    }
    const store = Redux.createStore(reducer, initialState);

    function upDateData() {
        document.getElementById('counter').innerText = store.getState().counter;
    }
    store.subscribe(upDateData)
    document.getElementById('inc').onclick = () => {
        store.dispatch({
            type: 'INC',
            payload: store.getState().counter + 1
        });

    };
    document.getElementById('dec').onclick = () => {
        store.dispatch({
            type: 'DEC'
        })
        payload: store.getState().counter + 1
    };
</script>

</html>

【讨论】：