如何在客户端（浏览器）中使用 Flux 模式？答案

【问题标题】：How to use Flux pattern in client side(browser)?如何在客户端（浏览器）中使用 Flux 模式？
【发布时间】：2015-11-23 13:16:04
【问题描述】：

我在做一个React.js和asp.net mvc 4的网站，我打算用Flux作为我的前端架构，但是遇到了一些问题，对Flux的使用很困惑：

一开始，我以为 Flux 会是一个完美的前端架构在我的网站，但是在我阅读了很多关于 Flux 的文章后，我发现他们几乎都是用 NodeJs 的，甚至是来自 facebook 团队的演示，这意味着他们都在服务器端渲染 React.js/Flux 代码，对吧？但是如何在客户端使用 Flux，我的意思是在用户的浏览器中？

我很困惑，如果我将 react.js/flux 视为客户端解决方案，我错了吗？如果我没有错，但为什么他们都将它们与 NodeJs 和 ES6（如 facebook Dispatcher.js）一起使用，那就是在服务器端可以，但是在客户端呢？大多数用户浏览器不支持 ES6。我尝试使用 Babel 将 Dispatcher.js 从 ES6 转换为 ES5，但是 es5 版本有一些错误并且无法正常工作。

我还发现了一些声称支持客户端的 Flux 实现，比如fluxxor，但是在写这篇文章之前我没有机会尝试它，因为我太困惑了。

我希望有人可以帮助我解决这些问题。

ps。对不起我的英语，如果你不明白我的话，请告诉我，我会解释的。

【问题讨论】：

我在github上找到了一个项目：react-flux-js-lib，它是一个React Flux架构的客户端库，我试了一下，效果很好，我想这正是我想要的并且会使用它:)

标签： asp.net asp.net-mvc reactjs reactjs-flux flux

【解决方案1】：

React 是一个客户端库。您可以使用虚拟的任何后端语言为 React 应用程序提供服务。很多示例都使用节点的原因是因为它易于设置且快速。

你应该试试这个教程： https://facebook.github.io/react/docs/getting-started.html

它非常简单，不需要节点。另外，也许您应该尝试从一开始就静态地为 React 应用程序提供服务，以更好地理解 React 本身。

感谢Babel，ES6 可以在浏览器中运行。如果您认为 Babel 有任何问题，您可能想先尝试一下它的 REPL 来感受一下：https://babeljs.io/repl/

【讨论】：

【解决方案2】：

想法是代码可以在客户端和服务器上运行（通用js，曾经被称为同构javascript（虽然它比服务器端渲染等更进一步......），

目前有很多通量实现回流是最有希望的，我正在使用 martyjs（但他们停止了开发，它将被 alt 接管）但即使对于通量架构，你也只需获得调度程序/事件发射器和一些想法：D，

Shorty 说你可以安装 npm 包（flux、react、babel）等，但你需要像 http://browserify.org/(withreactify 或 Webpack 这样的东西，以便在浏览器中运行它们。你不需要在“捆绑后”在节点 js 上运行它们，webpack/browserify 将捆绑代码以便它可以在浏览器中独立使用

https://github.com/christianalfoni/flux-react-boilerplate/

【讨论】：

【解决方案3】：

我想你想要：

$ bower 安装助焊剂

然后你可以做这样的事情（如果使用 require.js）：

require(
    ['bower_components/flux/dist/Flux'], 
    function(
        Flux ) 
{

    var dispatcher = new Flux.Dispatcher();

    dispatcher.register(function(payload) { 

        if (payload.actionType='test') {
            console.log('i got a ', payload); 
        }

    });

    dispatcher.dispatch({
        actionType: 'test',
        otherData: { foo: 'bar' }
    });

});

（此答案使用：https://bower.io/、https://libraries.io/bower/flux、http://requirejs.org/）

【讨论】：