javascript - Reactjs中商店之间的通信

我开发了一个基于Reactjs和Flux的应用程序。商店之间的通信问题：ProjectsStore和TasksStore。

在getAllForCurrentProject的TasksStore方法中，我调用ProjectsStore.getCurrentId()。结果得到一个Uncaught TypeError: undefined is not a function。 typeof ProjectsStore是object中的getAllForCurrentProject。当我从任何组件调用ProjectsStore.getCurrentId()时，它都可以正常工作。

这种行为的原因是什么？

在example中，MessageStore以相同的模式询问ThreadStore：

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

我的商店：

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;

最佳答案

看起来您具有循环依赖项-TasksStore和ProjectsStore相互要求。

ProjectsStore不需要知道TasksStore，请删除以下行：

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

或者，如果您使用它，请设计商店以允许依赖项注入，以便您的to类不会相互依赖