Alt actions not triggering alt store methods when dispatched (Flux)

Question

I've recently started rewriting a flux & react app using alt.js which allows me easily bootstrap the application with data when rendering from the server.

Everything else works great apart from the fact that I cannot get my store methods to fire when an action has been dispatched client side.

The action updateCurrentPostType is being called from an onClick event in one of my react components. After running some tests I can confirm that both my Action and callback are being fired but the store doesn't seem to be picking anything up.

I've tried using bindListeners & bindAction methods in my stores constructor but still no result.

I know it's not really much of a question but I'm hoping somebody with a bit more experience using alt will be able to see if I am missing anything vital out.

"alt": "^0.14.5"

Here is my code. Thanks for your time.

PostTypeLink.jsx (React component, Action called in loadPostType method)

"use strict";

var React = require('react');
var Router = require('react-router');
var PostTypeActions = require('../../../actions/postTypeActions');

var PostTypeLink = React.createClass({

    contextTypes: {
        router: React.PropTypes.func
    },

    getInitialState: function() {
        return this.props.postType;
    },

    loadPostType: function(e) {
        e.preventDefault();

        var self = this;
        var postTypeName = this.props.postType.info.posttype_name;

        PostTypeActions.updateCurrentPostType(postTypeName, function() {

            self.context.router.transitionTo('/admin/content/'+postTypeName);
        });
    },

    render: function() {
        var postTypeName = this.props.postType.info.posttype_name;

        return (
            <li key={this.props.key}>
                <a href="#" onClick={this.loadPostType}>
                    <i className="fa fa-book fa-fw"></i> {_.startCase(postTypeName)}
                </a>
            </li>
        );
    }
});

module.exports = PostTypeLink;

PostTypeActions.js

"use strict";

var alt = require('../alt');
var request = require('superagent');

class PostTypeActions {

    loadAllPostTypes(cb) {
        var self = this;

        request
        .get('/api/v1/posttypes')
        .end(function(err, res) {
            if (err) {
                console.log('Request Failed: '+err);
            } else {
                var response = JSON.parse(res.text);

                self.actions.updatePostTypes(response);

                if (cb) {
                    cb();
                }
            }
        });
    }

    updatePostTypes(postTypes){
        this.dispatch(postTypes);
    }

    updateCurrentPostType(postTypeName, cb){
        console.log('updating current post type');
        this.dispatch(postTypeName);

        if (cb) {
            cb();
        }
    }
}

module.exports = alt.createActions(PostTypeActions);

PostTypeStore.js

"use strict";

var alt = require('../alt');
var PostTypeActions = require('../actions/PostTypeActions');

class PostTypeStore {

    constructor() {
        var self = this;

        this.bindListeners({
            updatePostTypes: PostTypeActions.updatePostTypes,
            updateCurrentPostType: PostTypeActions.updateCurrentPostType
        });

        this.on('init', function() {
            self.postTypes = [];
            self.currentPostType = null;
        });
    }

    updatePostTypes(postTypes) {
        this.postTypes = postTypes;
        this.emitChange();
    }

    updateCurrentPostType(postTypeName) {
        var self = this,
            _postTypes = this.postTypes;

        for (var i = 0; i < _postTypes.length; i++) {
            if ( _postTypes[i].info.posttype_name == postTypeName ) {
                console.log(_postTypes[i]);
                self.currentPostType = _postTypes[i];
                self.emitChange();
            }
        }
        console.log('THIS METHOD WONT FIRE!!!!');
        console.log(self.currentPostType);
    }
}

module.exports = alt.createStore(PostTypeStore, 'PostTypeStore');

Answer 1

You have to actually require the Store somewhere for it to be compiled into the code and for it to start listening to the actions. Just creating a store isn't enough. Simple requiring it PostTypeLink.jsx above should be enough.