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

Question

I am working on a website with React.js and asp.net mvc 4, I am planning to use Flux as my front-end architecture, but I met some problems and was very confused about the use of Flux:

In the beginning,I thought Flux would be a perfect front-end architecture in my website,but after I read a lot of articles about Flux, I find that they are nearly all with NodeJs,even the demos from facebook team,that means they all do the rendering stuffs of React.js/Flux code in server side,right? but How can I use Flux in the client side ,I mean in the user's browser?

I am very confused,am I wrong if I treat react.js/flux as a client side solution?If I am not wrong, but why they all use them with NodeJs and ES6(like facebook Dispatcher.js), That's ok in server side,but what about client side ? most of user broswers don't support ES6. I tried using Babel to convert Dispatcher.js from ES6 to ES5,but the es5 version had some errors and didn't work.

And I also found some implements of Flux that claim to support client side,like fluxxor,but I don't have a chance to try it before I write this post,because I am too confused.

I hope someone can help me to figure out these problems.

ps. Sorry for my english,if you don't understand my words,pls let me know , I will explain it.

Answer 1

I think you want :

$ bower install flux

Then you could do something like this (if using 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' }
    });

});

(This answer uses : https://bower.io/, https://libraries.io/bower/flux, http://requirejs.org/)