Communication between Stores in Reactjs

Question

I develop an application which based on Reactjs and Flux. There is a problem of communication between Stores: ProjectsStore and TasksStore.

In the method getAllForCurrentProject of TasksStore, I call ProjectsStore.getCurrentId(). I get an Uncaught TypeError: undefined is not a function as a result. The typeof ProjectsStore is object in getAllForCurrentProject. When I call ProjectsStore.getCurrentId() from any component it works fine.

What is the reason for this behavior?

In the example MessageStore asks ThreadStore with the same pattern:

getAllForCurrentThread: function() {
  return this.getAllForThread(ThreadStore.getCurrentID());
}

My stores:

ProjectsStore.js:

'use strict';

var Dispatcher = require('../dispatcher/Dispatcher');
var EventEmitter = require('events').EventEmitter;
var assign = require('object-assign');
var _ = require('underscore');

var Api = require('../services/Api');
var ProjectsConstants = require('../constants/ProjectsConstants');

var TasksStore = require('../stores/TasksStore');

var changeEvent = 'projectsChanged';

var current = 0;
var items = [];

function requestItems() {
    return Api.Projects.getAll();
}

function setItems(data) {
    items = data;
}

var ProjectsStore = assign({}, EventEmitter.prototype, {

    emitChange: function () {
        this.emit(changeEvent);
    },

    getAll: function () {
        return items;
    },

    getCurrentId: function() {
        return current;
    },

    getCurrent: function() {
        var item = _.where(items, { id: this.getCurrentId() });
        return (typeof item[0] == 'object' ? item[0] : null);
    },

    getChildrenOf: function(id, isInclude) {

        var result = (typeof isInclude == 'boolean' && isInclude === true ? [id] : []),
            children = _.chain(items).where({ parent: id }).pluck('id').value();

        result.concat(children);

        return result;
    }

});

ProjectsStore.dispatchToken = Dispatcher.register(function (payload) {

    var action = payload.action;

    switch (action.type) {

        case ProjectsConstants.projectsSetCurrent:
            current = action.data;
            break;

        case ProjectsConstants.projectsGetAll:
            requestItems();
            break;

        case ProjectsConstants.projectsGetAllSuccess:
            setItems(action.data);
            break;

        default:
            return true;
    }

    ProjectsStore.emitChange();

    return true;

});

module.exports = ProjectsStore;

TasksStore.js:

'use strict';

var Dispatcher = require('../dispatcher/Dispatcher');
var EventEmitter = require('events').EventEmitter;
var assign = require('object-assign');
var _ = require('underscore');

var Api = require('../services/Api');
var TasksConstants = require('../constants/TasksConstants');

var ProjectsStore = require('../stores/ProjectsStore');


var changeEvent = 'tasksChanged';

var items = [];

function requestItems() {
    return Api.Tasks.getAll();
}

function setItems(data) {
    items = data;
}

var TasksStore = assign({}, EventEmitter.prototype, {

    emitChange: function () {
        this.emit(changeEvent);
    },

    getAll: function () {
        return items;
    },

    getAllForProject: function(id) {
        var projects = ProjectsStore.getChildrenOf(id, true);
        return _.chain(items).where({ parent: projects });
    },

    getAllForCurrentProject: function() {
        console.log('Type:', typeof ProjectsStore); // <-- object
        console.log('Inspect:', ProjectsStore); // <-- {}
        // Why ProjectsStore here is {} and 
        // Uncaught TypeError: undefined is not a function?
        var id = ProjectsStore.getCurrentId();
        // When I calling ProjectsStore.getCurrentId(); from any component it works fine.
        return this.getAllForProject(id);
    }

});

TasksStore.dispatchToken = Dispatcher.register(function (payload) {

    var action = payload.action;

    switch (action.type) {

        case TasksConstants.tasksGetAll:
            requestItems();
            break;

        case TasksConstants.tasksGetAllSuccess:
            setItems(action.data);
            break;

        default:
            return true;
    }

    TasksStore.emitChange();

    return true;

});

module.exports = TasksStore;

Answer 1

It's look like you have Circular dependencies - TasksStore and ProjectsStore requiring each other.

ProjectsStore don't need to know TasksStore, remove the line:

var TasksStore = require('../stores/TasksStore');

or, if you use it, design your store to allow dependency injection, so your to classes won't dependent on each other