Reactjs 中 Store 之间的通信答案

【问题标题】：Communication between Stores in ReactjsReactjs 中 Store 之间的通信
【发布时间】：2015-06-29 06:25:00
【问题描述】：

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

在TasksStore的方法getAllForCurrentProject中，我调用ProjectsStore.getCurrentId()。结果我得到了Uncaught TypeError: undefined is not a function。 typeof ProjectsStore 在getAllForCurrentProject 中是object。当我从任何组件调用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;

【问题讨论】：

标签： javascript reactjs reactjs-flux

【解决方案1】：

看起来你有循环依赖 - TasksStore 和 ProjectsStore 需要彼此。

ProjectsStore不需要知道TasksStore，去掉那行：

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

或者，如果您使用它，请将您的商店设计为允许依赖注入，这样您的 to 类就不会相互依赖

【讨论】：