Alt flux action: _this.actions ist undefiniert, auch wenn this.generateActions

Question

genannt wird. Ich benutze die Alt Bibliothek in meinem React/Flux Projekt, um den Flux Teil darzustellen und ich bin zu Actions Creators gekommen.

Ich habe die folgende Aktion:

// alt.js 
import Alt from 'alt'; 

export default new Alt(); 

// UserActions.js 
import alt from '../alt'; 

class UserActions { 
    constructor() { 
     this.generateActions(
      'getUsersSuccess', 
      'getUsersFailed' 
     ); 
    } 

    getUsers(userId) { 
     $.ajax({ url: '/api/users/'+userId }) 
     .done((data) => { 
      this.actions.getUsersSuccess(data); 
     }) 
     .fail((jqXhr) => { 
      this.actions.getUsersFailed(jqXhr); 
     }); 
    } 
} 

export default alt.createActions(UserActions); 

Das Problem ist, die Aktionen, this.actions, nicht definiert sind. Versteh ich es richtig, dass die this.generateActions Funktion die actions Eigenschaft der UserActions Klasse ausfüllen sollte, oder muss ich etwas anderes schreiben, um die Aktionen verfügbar zu haben?

Ich glaube, mit ES6, die this innerhalb der anonymen Funktionen sollte korrekt an this der UserActions Klasse gebunden werden.

Answer 1

Ich weiß nicht, ob sich die Implementierung von Alt in letzter Zeit geändert hat, aber ich musste die Aktionen mit dispatch manuell codieren, um es funktionsfähig zu machen, und diese Funktionen direkt aufrufen, anstatt mit actions darauf zuzugreifen Eigentum.

Dies ist der Code, den ich habe, der erfolgreich geladen werden kann, um zu speichern und die Aktionen so abzubilden, wie sie zugeordnet werden sollten.

import alt from '../alt'; 

class UserActions{ 
    getUsers(userId) { 
     $.ajax({url: 'api/users/'+userId}) 
      .done((data) => { 
       this.getUsersSuccess(data); 
      }) 
      .fail((jqHxr) => { 
       this.getUsersFail(jqHxr); 
      }); 
     return false; 
    } 

    getUsersSuccess(data) { 
     return (dispatch) => { 
      dispatch(data); 
     } 
    } 

    getUsersFail(jqHxr) { 
     return (dispatch) => { 
      dispatch(jqHxr); 
     } 
    } 
} 

export default alt.createActions(UserActions); 

Mit diesem Ansatz der generateActions Aufruf im Konstruktor ist nicht nur unnötig, sondern muss vermieden werden, da sonst der Speicher diese Aktion Schöpfer mit nicht wissen, welche Aktion, die Sie verwenden möchten.

Ich fügte auch das return false am Ende der Funktion hinzu, um Konsolewarnung zu unterdrücken, die durch alt geworfen wurde (false muss zurückgebracht werden, wenn eine Funktion nicht versendet).

Die abgeschickten Aktionen hier, getUsersSuccess und getUsersFail, sollten dann Gegenstücke im Speicher haben, die den Parameter/die Parameter verbrauchen und den Status beeinflussen.

Answer 2

Es ist nicht mehr notwendig, Maßnahmen zu verwenden, versuchen:

// alt.js 
import Alt from 'alt'; 
export default new Alt(); 

// UserActions.js 
import alt from '../alt'; 

class UserActions { 
    constructor() { 
     this.generateActions(
      'getUsersSuccess','getUsersFailed' 
     ); 
    } 

    getUsers(userId) { 
     $.ajax({ url: '/api/users/'+userId }) 
     .done((data) => { 
      this.getUsersSuccess(data); 
     }) 
     .fail((jqXhr) => { 
      this.getUsersFailed(jqXhr); 
     }); 
    } 
} 
export default alt.createActions(UserActions);