FormidableLabs / biff

Flux architecture made easy
BSD 3-Clause "New" or "Revised" License
27 stars 6 forks source link

_this.storeDidChange is not a function #11

Closed edgesoft closed 9 years ago

edgesoft commented 9 years ago

I've created a Store called RegistrationStore and added this to react component

RegistrationStore.mixin

The first time storeDidChange is called everything works as expected. I have a child component that calls the parent component when a button is clicked and I ran into this problem.

TypeError: _this.storeDidChange is not a function
    at Store.mixin.componentDidMount.listener (Store.js:59)
    at Store.EventEmitter.emit (events.js:99)
    at Store.emitChange (Store.js:154)
    at Store.<anonymous> (RegistrationStore.js:46)
    at Store.<anonymous> (Store.js:14)
    at Dispatcher.$Dispatcher_invokeCallback (Dispatcher.js:220)
    at Dispatcher.dispatch (Dispatcher.js:195)
    at Action.Biff.createActions.storeSectionFields [as callback] (RegistrationAction.js:41)
    at React.createClass.onSectionSubmit (ModuleRegistrationComponent.jsx:88)
    at React.createClass.submit (SectionComponent.jsx:56)

here is my onSectionSubmit

onSectionSubmit: function(model,transition){
        var data = [];
        this.state.fields.map(function(field){
           if( model[ field._id ] ){
               if( field.type === 'dropdown' ){
                    data.push( {_id : field._id, value : model[field._id].split(',') } );  
               }else{
                    data.push( { _id : field._id, value : model[field._id] });   
               }

           }
        });

       // Here is where the error happens.
        RegistrationAction.storeSectionFields(  data );  
    },

This is my store and my action

var Biff = require("../biff");
var request = require("superagent");

var RegistrationAction = Biff.createActions({

    checkEmail: function(data) {
        var self = this;
        request
            .post("/users/create")
            .send({ user : data})
            .set("Accept", "application/json")
            .set('Content-Type', 'application/json')
            .end(function (error,res) {
                console.log( res.text );
                self.dispatch({
                    actionType: "REGISTRATION_CHECK_EMAIL",
                    data: JSON.parse(res.text)
                });
            });

    },
    getSectionFields : function( data ){
        var self = this;
        request
            .post("/fields/get")
            .send({ sectionId : data})
            .set("Accept", "application/json")
            .set('Content-Type', 'application/json')
            .end(function (error,res) {
                self.dispatch({
                    actionType: "REGISTRATION_FIELDS_GET",
                    data: JSON.parse(res.text)
                });
            });
    },
     storeSectionFields : function( data ){
         console.log( "StoreSection" );
         console.log( data );
        this.dispatch({
            actionType: "REGISTRATION_FIELDS_STORE",
            data: data
        });

    },
    setCurrentSection : function( module ){
        this.dispatch({
            actionType: "REGISTRATION_SET_SECTION",
            data: module
        });
    }
});

module.exports = RegistrationAction;
var Biff = require("../biff");

var RegistrationStore = Biff.createStore({

    _user: {},
    _module: {},
    _fields:{},
    _enteredFields:[],

    checkEmail: function (data) {
        this._user = data;
    },
    getUser : function(){
      return this._user;
    },
    setCurrentSection :function(data){
        this._module = data;
    },
     setCurrentSectionFields :function(data){
        this._module = data;
    },
    getCurrentSection: function(){
        return this._module;
    },
    setSectionFields: function(data){
       this._fields = data;
    },
    getSectionFields: function(){
        console.log( "Getting section" );
        console.log( this._fields );
        return this._fields;
    },
    storeSectionFields: function(fields){
        this._enteredFields.push( fields );
    }

}, function (payload) {

    switch( payload.actionType ){
        case 'REGISTRATION_FIELDS_GET':
            this.setSectionFields(payload.data);
            this.emitChange();
            break;
        case 'REGISTRATION_FIELDS_STORE':
            this.storeSectionFields(payload.data);
            this.emitChange();
            break;
        case 'REGISTRATION_CHECK_EMAIL':
            if( payload.data.error){
                this.emitError( payload.data.error );
            }else {
                this.checkEmail(payload.data);
                this.emitChange();
            }
            break;
        case 'REGISTRATION_SET_SECTION' :
            this.setCurrentSection(payload.data);
            this.emitChange();
            break;
    }

});

module.exports = RegistrationStore;
edgesoft commented 9 years ago

I think I found my bug. My child component also had SectionStore.mixin and when I removed the mixin the error went away.