Reagieren/Reflux: mit Mixins Klassen Converting Dekorateure mit bis ES6

Question

Ich versuche ES6-ify die folgende Reaktion-Reflux-Code: nicht sicher

var TimeStore = Reflux.createStore({ 
    listenables: [TimeActions], 

    onTick: function(tick) { 
     ....  
    } 
}) 

var Watch = React.createClass({ 
    mixins: [Reflux.connect(TimeStore, 'tick')], 
    ... 

Source

Ich bin, wie zu konvertieren dies unter Verwendung react-decorator. Dies ist, was ich verwandelt habe es an:

const SomeDecorator = MixinDecorator(
    'TimerActions', // displayName 
    Reflux.connect(TimeStore, 'tick') 
); 

@SomeDecorator 
class Watch extends React.Component { 
    ... 

Es mit babel kompiliert (mit stage Satz 0) aber sehr gut funktioniert nicht. Irgendwelche Vorschläge, wie man das beheben kann? Ist es auch möglich, das Geschäft zu verkaufen?

Answer 1

Mixins insgesamt überspringen.

class AppCtrlRender extends Component { 
     binder(...methods) { methods.forEach((method) => this[method] = this[method].bind(this)); } 

     render() { 
      var data = this.state.Data; 
      data = JSON.stringify(data, null, 2); 
      var data2 = this.state.Data2; 
      data2 = JSON.stringify(data2, null, 2); 
      var data3 = this.state.Data3; 
      data3 = JSON.stringify(data3, null, 2); 
      return (
       <div id='AppCtrlSty' style={AppCtrlSty}> 
        React 1.3 ReFlux with WebSocket<br/><br/> 
        {data}<br/><br/> 
        Data2: {data2}<br/><br/> 
        Data3: {data3}<br/><br/> 
       </div> 
      ); 
     } 
    } 

    function getState() { 
     return { 
      Data: BasicStore.getData(), 
      Data2: BasicStore.getData2(), 
      Data3: BasicStore.getData3() 
     }; 
    }; 

    export default class AppCtrl extends AppCtrlRender { 
     constructor() { 
      super(); 
      this.state = getState(); 
      this.binder('storeDidChange'); 
     } 

     componentDidMount() { this.unsubscribe = BasicStore.listen(this.storeDidChange); } 
     componentWillUnmount() { this.unsubscribe(); } 
     storeDidChange() { this.setState(getState()); } 
    } 

Answer 2

Die korrekte Übersetzung des Codes in Ihrem OP für die neue Reflux ES6 API würde wie folgt aussehen:

var TimeActions = Reflux.createActions(['tick']); 

class TimeStore extends Reflux.Store 
{ 
    constructor() 
    { 
     super(); 
     this.listenables = TimeActions; 

     // whatever state you want to store should 
     // now be on a state property in the store 
     this.state = { ticks: 0 }; 
    } 

    onTick(tick) 
    { 
     // now update values in your store via setState 
     this.setState({ ticks: this.state.ticks+1 }); 
    } 
} 

class Watch extends Reflux.Component 
{ 
    constructor(props) 
    { 
     super(props); 

     // set this.store to the store class itself 
     this.store = TimeStore; 
    } 

    render() 
    { 
     // from now any any changes to the store will automatically 
     // reflect in your component's state. 
     return <p>{this.state.ticks} ticks...</p>; 
    } 
} 

Eine Arbeits JSFiddle ist hier: https://jsfiddle.net/uomkhbzj/

Und die Dokumentation für die API sind hier: https://github.com/reflux/refluxjs#react-es6-usage