2016-04-16 11 views
1

Fluxパートを表すためにReact/FluxプロジェクトでAltライブラリを使用していますが、私はアクションクリエイターになっています。alt fluxアクション:this.generateActionsが呼び出されても_this.actionsが定義されていません

私は、次のアクションを作成しました:

// 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); 

問題はアクション、this.actionsは、未定義です。 this.generateActions関数がUserActionsクラスのactionsプロパティを設定する必要があるか、またはアクションを使用できるようにするために何か別のものを記述する必要があることを正しく理解していますか?

私は、ES6を使用して、匿名機能内のthisUserActionsクラスのthisに正しく結びついていると思います。

答えて

2

Altの実装が最近変更されたかどうかはわかりませんが、動作させるにはディスパッチを使って手動でアクションをコーディングし、actionsを使用してこれらの関数に直接アクセスするのではなく、プロパティ。

これは私が持っているコードであり、成功裏にロードしてアクションをマッピングする方法を格納してマップすることができます。このアプローチで

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); 

コンストラクタでgenerateActions呼び出しがないだけで不要ですが、そうでない場合は、このアクションの作成者を使用してストアには、使用したいアクションを知ることができません、回避する必要があります。

機能の最後に、altでスローされたコンソールの警告を表示する機能も追加しました(関数がディスパッチされない場合はfalseを返す必要があります)。

ここで、ディスパッチされたアクション、getUsersSuccessおよびgetUsersFailは、パラメータ/パラメータを消費し、状態に影響を及ぼすストア内のカウンターパートを持つ必要があります。

+1

おかげで、私は同じ問題を抱えていました –

1

しようと、それ以上のアクションを使用する必要はありません:あなたのソリューションを共有するための

// 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); 
関連する問題