es6 classes with mixin - meantime solution

There were few discussions regarding React’s new approach of using es6 classes. So at the future Reflux will be separated from React, but we need a solution today. Here is a first proposal for one! (example with ListenerMixin, could be copied to other mixins) :

import React from 'react';
import Reflux from 'reflux';

function ListenerMixin(ComposedComponent) {
    return React.createClass({
        mixins: [Reflux.ListenerMixin],

        render() {
            return <ComposedComponent {...this.props} listenTo={this.listenTo}/>;
        }

    });
}

export default ListenerMixin;

now in the component (using es7 decorators - supported by babel)

import Store from '../../stores/Store.js'
import ListenerMixin from './ListenerMixin.js';

@ListenerMixin
class SomeComp extends Component {
  componentDidMount() {
    this.props.listenTo(Store, msg=>{console.log(msg)});  //listenTo is a prop now
  }
  render()...
}

Reflux’s stores are the same (Reflux.createStore({...}))

Please send feedback

[Zeboch]

👍

Do you have some actual real solution waiting for reflux class support and alternative to mixin ? I also have the same problem trying to use ListenerMixin in a Component …

[raboija]

We have ES6 now, so closing this.

Can I use mixins in Reflux with ES6 now?

Here is my code : mixins: [Reflux.connect(PopularStore, ‘popularstore’)], popularStore: null,

and I get : Parsing error: Unexpected token, expected “,” (near .connect)

unless I use this, then it works : const JSONViewerReflux = createReactClass({ mixins: [Reflux.connect(PopularStore, ‘popularstore’)],

popularStore: null,

But with normal react classes, it doesn’t work.

Any suggestions where to put mixins and to use them with ES6? I don’t wanna conver all my components code to ES5.