运行没有 nodejs 服务器的 redux 示例？

Question

我是节点、redux、webpack 和 React 的新手。我找到了这个例子：

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

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

我找到的所有示例都使用 webpack-dev-server（node express 服务器），是否可以创建捆绑文件并将其作为简单的静态文件简单地提供？

Answer 1

如果您的目的是运行一个通用应用程序——一个在服务器上预呈现并且也可以在客户端上运行的应用程序（就像 repo 中的通用示例）——那么不，您必须运行 Node.js为了做服务器渲染。您可以轻松地将单个包导出到运行 客户端 端的应用程序，但运行它在 服务器 ] 这边你需要一种服务器技术，它实际上可以运行它，比如 Node.

Answer 2

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

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

Answer 3

我遇到了同样的问题。我想将基于 jsp 视图的 Spring MVC 应用程序迁移到 Redux/React 客户端，其中 Spring 作为客户端 webapp 的数据 API/Backend，但在服务器端渲染收益（通用 javascript）。

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

我问自己的两个问题是：真的值得所有额外的复杂性以及架构设置和维护方面的工作吗？我的创新是否会将我的项目变成每天都令人头疼的问题，由新的开发功能和可能的 issues/bugs 生产引起？

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

祝你好运！

Answer 4

你可以试试redux-auto

redux-auto: Redux made easy (with a plug and play approach). Removing the boilerplate code in setting up a store & actions

example 有任何设置 + 热重载。

您只需运行 npm install 然后 npm start

Answer 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>

运行没有 nodejs 服务器的 redux 示例？

Running redux example without nodejs server?

node.js

reactjs

webpack

redux

运行 没有 nodejs 服务器的 redux 示例？

Running redux example without nodejs server?

node.js

reactjs

webpack

redux

运行没有 nodejs 服务器的 redux 示例？