ES6 class support

[torarnek]

Edit by @BryanGrezeszak: I'm putting this at the top since this page gets a lot of google traffic. Reflux does now support and embrace ES6 classes in React. You may check the documentation for more info.

---

It would have been fantastic if I could do:

class MyStore extends Reflux.Store {
init(){
...
}
}

This would allow editors/jshint/flow to more easily do code checks, like checking method names, than what is possible with a dynamic object that Reflux.createClass gives.

Any chance for this in the near future? :)

[spoike]

Maybe. We're using mixins to build up the stores, actions and joins.

I'm aware that React has API for ES6 classes, however by using that you're also opting out of mixins.

To be honest I'm not a big supporter of classes in Javascript since mixins (or in other languages traits/roles) has been proven to be more flexible for me personally in my daily dev work. So I won't be working on it however I'd accept PR if such would come up.

[Turbo87]

there is a difference compared to the react components because when you call Reflux.createStore() an actual instance is generated, but when you call React.createClass() it is more like a class definition, that is only instantiated when calling the React.render() method. Due to that I'm not sure if replacing the createStore() call with ES6 classes is actually possible.

[zbyte64]

Not sure if I follow the hangup over returning a class. You can define a store and instantiate it:

class PageStore extends Reflux.Store {
  constructor(myInitialState) {
    this.state = myInitialState || Immutable.Map()
    this.listen(AddPageSuccess, this.addPageSuccess)
  }
  setState(delta) {
    this.state = this.state.merge(delta)
    this.trigger(this.state)
  }
  addPageSuccess(pageResult) {
    this.setState({page_id: pageResult})
  }
}

var PageState = PageStore();

var PageListing = React.createClass({
  componentDidMount: function() {
    PageState.listen(this.onPageState)
  }
})

So I guess the cost is one extra line of code to use an es6 class.

[bengotow]

Wait—I'm not sure I follow. Is your syntax above an existing feature? Reflux.Store doesn't seem to be defined in https://github.com/spoike/refluxjs/blob/master/src/index.js, and my test case fails:

class TestStore extends Reflux.Store
  constructor: ->

TestInstance = TestStore()

(Error:Cannot read property 'prototype' of undefined)

[mvcninja]

You can easily get the class from the instance, as an ES6 class is just a prototype-

Reflux.Store = Reflux.createStore().prototype;

class MyStore extends Reflux.Store {
  constructor() ->
}

let instance = new MyStore();

[LongLiveCHIEF]

I am also not in favor of classes, at least in the way they're implemented via es6. Javascript, as a functional language, has a lexical scoping/"inheritance" model that the es6 classes implementation can wreak havoc on in a moderate to large application environment.

Classes are great for peaking the interest of Ruby/PHP/Java developers, and helping them to adopt javascript, but they aren't a prototypal construct, and really don't deserve a place in this language.

There I said it. Classes are bad javascript.

That being said... the beauty of javascript is such that you can prototypically extend a library however you wish after requiring it in, and can use classes in your own code. If you wish, regardless of the authors/maintainers opinions about them. #javascriptFTW

I am working on some es6 refactoring of reflux at the moment, so keep an eye out for that.

Personally, I'd vote against any PR that uses classes in core reflux.

[blainekasten]

So, real talk here, if Reflux doesn't adopt es6 classes, this library may fall to the wayside as React is very much moving towards ES6 classes, and it's adoption is growing. You may want to seriously consider this. You could do the React approach and support both of them. You should also look into using context, as that's the new method to do 'mixin-like' things with React ES6 components.

[oriSomething]

you can also use ES7 decoratores instead of mixins. this is what i do

[tikhonbelousko]

Agree with @blainekasten.

@oriSomething can you provide an example of usage? Can I use react ES6 classes with reflux mixins somehow? 🌝

[blainekasten]

@oriSomething using es7 decorators is pretty bold as it's not yet standardized (stage 1).

@dazzz You can use reflux with es6 react classes like so:

import store from 'MyRefluxStore';

class Comp extends React.Component {
  componentDidMount() {
    this.unsubscribe = store.listen( () => this.setState({ data: store.getData() }) );
  }

  componentWillUnmount() {
    this.unsubscribe();
  }
}

[oriSomething]

@dazzz hey, i've used implantation similar to this.

@blainekasten it's true decorators are not standardized, but also react is still far from 1.0, and every version there are new breaking changes and pretty much, most of the JS technologies we use today. and still decorators might still be in the beginning, but there is very little todo to get similar effect with today JS, like:

class MyComponent extend React.Component {
 ...
}

export default connectStore(MyComponent, someRefluxStore);

[rymohr]

Looks like @AlexJozwicki is already working on an es6-based port: https://github.com/AlexJozwicki/airflux

I'm still undecided. I like mixins but I agree with @blainekasten, the react team is moving full steam towards classes. Here's a great post on the topic: https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750

[alex94cp]

BabelJS, one of the transpilers with better support for JSX, already has support for decorators (by means of { optional: ['es7.decorators'] }). Is the goal to not have anything ES6 related in Reflux core? Or only to maintain backward-compatibility? Cause implementing Reflux.createStore on top of classes and (maybe) decorators can't be that difficult.

[darkfrontcode]

@rymohr, Hi my friend, i'm working on @AlexJozwicki Airflux, but i cant make work together react and airflux, the state always come undefined, but if i use airflux only with js it works like a charm.

Do you have any examples of react + airflux working together?
In documentation of airflux dosent have a full exemple, only fragments of ramdom codes.

It would be helpful, thank you!

[darkfrontcode]

@AlexJozwicki Do you have any examples of react + airflux working together?

[grimen]

If ES6 classes is not considered for the project because of ideolistic reasons, I guess the community will just use a fork (pure or shim). Don't see why this is even a discussion, pretty much everyone embracing ES6 classes now that is part of the standard and hardly is a cost.

[LongLiveCHIEF]

@grimen read the writing on the wall. This project is dead.

[snario]

:(

[danielstorch]

So... i should use flux from FB instead? Im new to all this and have problems using mixins since my project is build up on ECMAScript 2015.
Cant figure out how to use mixins: [Reflux.connect(statusStore,"currentStatus")] while using export default class Navigation extends React.Component {}

[spoike]

This project isn't really dead, check #436 for details on why development has been slow lately.

Regarding class support, there are a bunch of reflux plugins on npm that can be used. E.g.

• reflux-provides-store
• reflux-state-mixin

Some information about them is in reflux/reflux-core#5 and #420

[blainekasten]

@danielstorch I would sugest Redux. The creator of that recently got hired by FB to work on React core if that is an indicator of anything.

[Flourad]

@blainekasten I have a question.

class Comp extends React.Component {
  componentDidMount() {
    this.unsubscribe = store.listen( () => this.setState({ data: store.getData() }) );
  }

  componentWillUnmount() {
    this.unsubscribe();
  }
}

The method above is helpful for me, but when i need to listen two different stores in the Comp component, how to use the unsubscribe to remove two listeners??

[jamesmarrs]

Hey @Flourad checking out the source code starting at line 553, you will find the listen() function. The method returns a callback that unsubscribes the registered event handler. Executing the function in the componentWillUnmount() function just triggers the callback. A solution (not sure if its the best) could be to put all callbacks in an array then call them in the componentWillUnmount() function.

import _ from 'lodash'

class Comp extends React.Component {
  componentDidMount() {
    this.unsubscribes = [YOUR_STORE.listen(TO_SOMETHING), ANOTHER_STORE.listen(SOMETHING_ELSE)]
  }

  componentWillUnmount() {
    _.each(this.unsubscribes, function(unsubscribeCallback) {unsubscribeCallback()})
  }
}

This question seems a bit off topic for this issue and may want to be taken elsewhere.

[Flourad]

@jamesmarrs Thank you for your answer, it inspires me~

[BryanGrezeszak]

This page gets a lot of google hits, so I think this is a good place to note that Reflux is now implementing a version of Reflux.Store for ES6 extension (as well as Reflux.Component). See info here: https://github.com/reflux/refluxjs#react-es6-usage

[santhosh77h]

@Flourad saved me from one more day of analyzing since this issue is related to bind I was trying to put arrow function so I checked it that way it was not working I have never thought it's because of reflux.....