'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
.
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.
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM