Ad

'this' Undefined In Reflux.createStore()

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.

Ad

Answer

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.

Ad
source: stackoverflow.com
Ad