Flux体系结构循环依赖

我已经开始学习Facebook的Flux架构。我正在尝试制作一个简单的登录屏幕。我遵循了磁通聊天示例应用程序来创建屏幕。我在ServerActionCreator和WebAPIUtils之间存在循环依赖的问题。请参见下面的代码。

ServerActionCreator.js

var AppDispatcher = require('../dispatcher/AppDispatcher');
var Constants = require('../constants/Constants');
var WebAPIUtils = require('../utils/WebAPIUtils');

var ActionTypes = Constants.ActionTypes;

module.exports = {
    receiveLoginStatus: function(status){
        AppDispatcher.handleServerAction({
            type: ActionTypes.RECEIVE_LOGIN_STATUS,
            status: status
        });
    },
    
    loginSubmit: function(data){
        WebAPIUtils.login(data);
    }
}

WebAPIUtils.js

var ServerActionCreator = require('../actions/ServerActionCreator');

module.exports = {
    login: function (data) {
        //Mock server API call
        var status = JSON.parse('{"status":"success"}');
        ServerActionCreator.receiveLoginStatus(status);
    }
};

如您所见，ServerActionCreator依赖于WebAPIUtils，而WebAPIUtils依赖于ServerActionCreator。

我认为，由于循环依赖性，WebAPIUtils变成一个空对象，并且在调用ServerActionCreator中的loginSubmit函数时出现“未定义不是函数”错误。屏幕截图如下。

如何处理这种情况？还是有其他方法吗？任何帮助深表感谢。