'this' undefined in Reflux.createStore()

Question

I'm trying to set state properties via this in my Reflux store, but whenever I attempt to set a property I get the following error:

Uncaught TypeError: Cannot read property 'triggers' of undefined

I've using Babel to compile my JSX, so not sure if that's the issue but I highly doubt it.

import Reflux from 'reflux';

import BoardActions from '../actions/BoardActions';

const BoardStore = Reflux.createStore({
  listenables: [BoardActions],
  getInitialState: () => {
    return {
      boards: []
    };
  },
  init: (state = undefined) => {
    if (state) {
      this.state = state;
    }

    this.triggers(this.state);        <-----     Getting the error here
    // this.state = { boards: [] };   <-----     This would also fail
  },

  ...

});

And here is the BoardActions:

import Reflux from 'reflux';

import BoardSource from '../sources/BoardSource';

const BoardActions = Reflux.createActions({
  'fetch': { children: ['fetching', 'completed', 'failed'] }
});

BoardActions.fetch.listen(() => {
  BoardSource.fetch().then((data) => {
    BoardActions.fetch.completed(data);
  });
});

export default BoardActions;

Thanks!

Update

I can see that the transpiler is converting this to undefined in the compiled code, as below:

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _reflux = require('reflux');

var _reflux2 = _interopRequireDefault(_reflux);

var _BoardActions = require('../actions/BoardActions');

var _BoardActions2 = _interopRequireDefault(_BoardActions);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var BoardStore = _reflux2.default.createStore({
  listenables: [_BoardActions2.default],
  init: function init() {
    undefined.test = 'test';
  },
  onFetch: function onFetch() {},
  onFetchFetching: function onFetchFetching() {},
  onFetchCompleted: function onFetchCompleted(boards) {
    undefined.boards = boards;
    undefined.trigger(undefined.boards);
  },
  onFetchFailed: function onFetchFailed() {}
});

exports.default = BoardStore;
//# sourceMappingURL=BoardStore.js.map

But still no idea why it would be transpiling this to undefined.

Hey man you asked a question about splitting boxes. I did it for you but you removed it... Check this out if it helps cool if not let me know. https://jsfiddle.net/9xyo225z/ — wuno, Feb 11 '16 at 21:56
Wow thanks @wuno I'd be more then willing to re-open that question to accept your answer for that. I felt a bit dumb that I didn't add enough detail to the question so that it got so many downvotes so quickly :P, You're answer is great though, I tested with overflowed content and the scrollable areas scroll perfect — Steven Bennett, Feb 12 '16 at 06:10
People act like they have never had a question man... Never feel dumb but yes unfortunately people are cruel lol. Ya that would be cool man. then I will delete these comments. Comment when you open it and I will post the link Thanks bro — wuno, Feb 12 '16 at 06:12
Cool, I've undeleted it! I do have an update to the question, which perhaps could be of value to someone in the future (and myself) — Steven Bennett, Feb 12 '16 at 06:14

ZenMaster · Accepted Answer · 2015-12-29T20:14:42.510

Because you use arrow functions to define your object's methods (for the one you pass to Reflux.createStore).

In arrow function this is scoped lexically, which means, in the context of your question, that it is undefined, since it is lexically bound to the containing module (whatever that is).

See example in Babel online editor.

See more for further explanation on cases.

Note: I assume that you are familiar with the basics, otherwise here is the link to a great article in a great book on ES6.

score 1 · Answer 2 · answered Dec 29 '15 at 11:37

The problem appears to be caused by use of arrow functions.

This should work:

const BoardStore = Reflux.createStore({

  ...

  init(state = undefined) {
    if (state) {
      this.state = state;
    }
    this.triggers(this.state);
    // this.state = { boards: [] };
  },

  ...

});

'this' undefined in Reflux.createStore()

Update

2 Answers2