5 ms·

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

skrebbel 11y ago
If at all.
Shizka 11y ago
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.
theaqua 11y ago
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 http://alt.js.org
rattray 11y ago
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/ http://optimizely.github.io/nuclear-js/
- danabramov 11y ago
  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 https://github.com/faassen/reselect. (Sorry, no README yet :-( ). They don't have to be inside the core.
- seivan 11y ago
  I actually like Reflux https://github.com/spoike/refluxjs 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 :-/
  - Lazare 11y ago
    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_more_stores_meet_reducer/csfpdo6 https://www.reddit.com/r/javascript/comments/3ap0y6/flux_no_...
    - andy_ppp 11y ago
      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...
glenjamin 11y ago
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.
- grandalf 11y ago
  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.
lukasm 11y ago
They all boil down to the same thing. I use this one https://github.com/acdlite/flummox https://github.com/acdlite/flummox minimum boilerplate
- patio11 11y ago
  Further boilerplate reduction: https://gist.github.com/patio11/b472ccb2df3e1fcce78c https://gist.github.com/patio11/b472ccb2df3e1fcce78c I was going crazy with all the sit-ups to hook actions/stores together prior to this.
  - lukasm 11y ago
    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);
applecore 11y ago
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.

If at all.

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.

theaqua 11y ago

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 http://alt.js.org

rattray 11y ago

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/ http://optimizely.github.io/nuclear-js/

danabramov 11y ago
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 https://github.com/faassen/reselect. (Sorry, no README yet :-( ). They don't have to be inside the core.
seivan 11y ago
I actually like Reflux https://github.com/spoike/refluxjs 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 :-/
- Lazare 11y ago
  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_more_stores_meet_reducer/csfpdo6 https://www.reddit.com/r/javascript/comments/3ap0y6/flux_no_...
  - andy_ppp 11y ago
    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...

glenjamin 11y ago

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.

grandalf 11y ago
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.

lukasm 11y ago

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

patio11 11y ago
Further boilerplate reduction: https://gist.github.com/patio11/b472ccb2df3e1fcce78c https://gist.github.com/patio11/b472ccb2df3e1fcce78c I was going crazy with all the sit-ups to hook actions/stores together prior to this.
- lukasm 11y ago
  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);

applecore 11y ago

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.