Alt + React - invalid action reference while following alt tutorial

Question

I'm trying to implement Alt in my React app. Currently I'm checking it out and just tried some thing following the tutorial. Now I'm stuck with the problem that the store does not recognizes the action.

This is the action class:

import alt from '../libs/alt';
import WishSource from '../sources/WishSource';

class WishActions {
  fetchWishes() {
      this.dispatch();
      WishSource.fetch()
        .then((wishes) => {
          this.actions.fetchWishesSuccess(wishes);
        })
        .catch((err) => {
          this.actions.fetchWishesFailed(err);
        });
  }
  fetchWishesSuccess(wishes) {
    this.dispatch(wishes);
  }
  fetchWishesFailed(err) {
    this.dispatch(err);
  }
}
export default alt.generateActions(WishActions);

I try to bind these actions in my store as follows:

import alt from '../libs/alt';
import WishActions from '../actions/WishActions';

class WishStore {
  constructor() {
    this.wishes = [];
    this.errorMessage = null;

    this.bindListeners({
        handleFetchWishes: WishActions.FETCH_WISHES,
        handleFetchWishesSuccess: WishActions.FETCH_WISHES_SUCCESS,
        handleFetchWishesFailed: WishActions.FETCH_WISHES_FAILED
    });
  }
  handleFetchWishesSuccess(wishes) {
    this.wishes = wishes;
    this.errorMessage = null;
  }
  handleFetchWishes() {
    this.wishes = [];
  }
  handleFetchWishesFailed(err) {
    this.errorMessage = err; 
  }
}

export default alt.createStore(WishStore, 'WishStore');

I keeps giving me the error

'Invalid action reference passed in'

The problem is somewhere in the bindListeners function.

If I try bindActions it says:

'_WishActions2.default.fetchWishes is not a function'

and this is in the view. Here I call WishActions.fetchWishes() in the componentDidMount()

I can't get my head around on what's going wrong here. If I look at the tutorial and other examples this should work.

Can someone help me out here and maybe explain what's wrong?

score 3 · Answer 1 · answered Jan 21 '16 at 21:25

I found what went wrong and will leave the post here in case someone else encounters the same thing.

The problem was I used generateActions instead of createActions. You use createActions for a class and generateActions for simple functions.

generateActions('create') will make a function create = (x) => { return x; } and dispatch it. You can still use this in your class with this.generateActions in the constructor

Alt + React - invalid action reference while following alt tutorial

1 Answers1