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

Question

我正在使用 React.js 和 asp.net mvc 4 开发一个网站，我打算使用 Flux 作为我的前端架构，但是我遇到了一些问题并且对使用助焊剂：

一开始我觉得Flux会是我网站上一个完美的前端架构，但是看了很多关于Flux的文章，发现几乎都是NodeJs，连facebook上的demo也不例外团队，这意味着他们都在服务器端做 React 的渲染工作。js/Flux 代码，对吧？但是如何在客户端使用 Flux，我的意思是在用户的浏览器中？

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

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

希望有人能帮我解决这些问题。

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

Answer 1

React 是一个客户端库。您可以使用虚拟的任何后端语言来提供 React 应用程序。很多示例都使用 node 的原因是因为它设置起来简单快捷。

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

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

得益于 Babel. If you believe you have any trouble with Babel, you might want to first play around with it's REPL to get a feeling for it: https://babeljs.io/repl/

，ES6 可以在浏览器中运行

Answer 2

想法是代码可以在客户端和服务器上运行（通用 js，过去称为同构 javascript（尽管它比服务器端渲染等更进一步。 .),

目前有很多 flux 实现 reflux 是最有前途的，我使用的是 martyjs（但他们停止了开发，它将被 alt 接管）但即使对于 flux 架构，你也只是得到调度程序 /事件发射器和一些想法 :D,

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

https://github.com/christianalfoni/flux-react-boilerplate/ <-- 有一些样板，提供了一些关于如何捆绑代码的很好的指南。

Answer 3

我想你想要：

$ bower install flux

然后你可以这样做（如果使用 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/）

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

How to use Flux pattern in client side(browser)?

asp.net

asp.net-mvc

reactjs

reactjs-flux

flux