Hacker News Reader

Comment by gschrader | Hacker News Reader

The hardest part of learning React is trying to figure out which incarnation of flux one should use.

The dirty secret is: they're probably all fine.

It's unlikely that you will choose a flux lib that will be the make or break point of your application.

Even if a library stops being "maintained", most decent flux incarnations are really small (~100 LoC) - it's unlikely that there's some fatal flaw you'll be stuck with.

In summary: redux is neat, but don't beat yourself up over choosing the perfect flux lib - just grab one that you like the look of and move on with building your application.

this is a great point. Also, since the overall architecture is going to be similar no matter which one you use, it's likely not going to be a major hassle to switch to a different one later.

I really hope NuclearJS (by optimizely) wins out. It shares the "pure function" philosophy of Redux, along with use of Immutable.JS and a really powerful notion of functional data transforms/lenses called 'getters'.

Docs are incomplete:

http://optimizely.github.io/nuclear-js/

Redux doesn't care what you use for state, so you may (or may not) use ImmutableJS too.

Here's an example of the “getters” concept with Redux: https://github.com/faassen/reselect. (Sorry, no README yet :-( ). They don't have to be inside the core.

I actually like Reflux https://github.com/spoike/refluxjs

It's not "Pure" Flux, which is the reason I like it, it doesn't deal with a Dispatcher and it has syntactic sugar for 'common' use-cases, most Rails dev enjoy stuff like that.

Seems like Reflux can't have hot-reloading because there is no (public?) dispatcher to replay values :-/

I wouldn't really recommend Reflux. What advantages it has are shared by other, better libraries like alt or redux, but it has some disadvantages all its own.

Ran across a good writeup here: https://www.reddit.com/r/javascript/comments/3ap0y6/flux_no_...

I am really enjoying Reflux personally and I think that's one of the good things about React and the Fluxes; there's many mental models to suit different ways of thinking about how to build apps.

There is no 100% correct way to build complex single page web apps but there is definitely a wrong way and that way looks increasing like progressive enhancement sadly...

I agree.

I am currently in the early stages of starting a project and I want to use react+flux. However with the different variants of flux finding the one that is the best fit and is going to be maintained a year from now isn't an easy task. I think I might end up using the facebook variant as I'm fairly certain that they will continue to maintain it.

It's good practice to write your own Flux implementation for any new React project. It's pretty straightforward; just a few hundred lines of JavaScript.

I'm using alt.js[1] at now (very good implementation without boilerplate such switch/cases), but waiting Redux 1.0.

[1] http://alt.js.org

They all boil down to the same thing. I use this one https://github.com/acdlite/flummox minimum boilerplate

Further boilerplate reduction: https://gist.github.com/patio11/b472ccb2df3e1fcce78c I was going crazy with all the sit-ups to hook actions/stores together prior to this.

Heh I know exactly what you mean. Just 3 hours ago I was thinking about rewriting it, but 4 actions and 4 stores don't justify it. Thanks for sharing.

For the reader. This starts to grow quite quickly.

    import SearchActions from './actions/searchActions.js';
    import VideoActions from './actions/videoActions.js';
    import VideoMetaActions from './actions/videoMetaActions.js';
    import MusicPlayerActions from './actions/musicPlayerActions.js';
    
    import SearchStore from './stores/searchStore.js';
    import VideoStore from './stores/videoStore.js';
    import VideoMetaStore from './stores/videoMetaStore.js';
    import MusicPlayerStore from './stores/musicPlayerStore.js';
    
    class Flux extends Flummox {
      constructor() {
        super();
        this.createActions('search', SearchActions);
        this.createStore('search', SearchStore, this);
    
        this.createActions('video', VideoActions);
        this.createStore('video', VideoStore, this);
    
        this.createActions('videoMeta', VideoMetaActions);
        this.createStore('videoMeta', VideoMetaStore, this);
    
        this.createActions('musicPlayer', MusicPlayerActions);
        this.createStore('musicPlayer', MusicPlayerStore, this);
      }
    }

What is more, store registration could be improved as well

    const videoMetaActions = flux.getActions('videoMeta');
    this.register(videoMetaActions.setAudioVolume, this.handleAudioVolume);
    this.register(videoMetaActions.setMusicVolume, this.handleMusicVolume);
    this.register(videoMetaActions.setMusicUrl, this.handleMusicUrl);

If at all.

Reply on news.ycombinator.com