Flux架构循环依赖

Question

我已经开始学习Facebook的Flux架构了。我正在尝试制作一个简单的登录屏幕。我已按照flux-chat示例应用程序创建了屏幕。我有一个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函数时，我得到“未定义不是函数”错误。截图如下。

如何处理这种情况？还是有其他办法吗？非常感谢任何帮助。

Answer 1

每当模块之间存在循环依赖关系时，常见的解决方案是组合模块或创建将破坏循环的第三个实体。

在您的情况下，我认为您可以将loginSubmit移动到其他动作创建器模块。无论如何，它实际上是用户操作，而不是服务器操作。因此，loginSubmit可以与UserActionCreators.js一起进入任意数量的其他用户操作创建方法。

您的问题（以及一般的循环依赖）的另一个解决方案是使您的方法更纯粹，删除依赖项，而不是将依赖项作为参数传递。所以WebAPIUtils.login()可以采取第二个参数，这将成功回调。因此：

WebAPIUtils.login(data, ServerActionCreator.receiveLoginStatus)