Flux 架构循环依赖

Posted 2023-02-22

【中文标题】Flux 架构循环依赖

【英文标题】：Flux architecture circular dependency

【发布时间】：2015-02-24 04:56:36

【问题描述】：

我已经开始学习 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 函数时出现“未定义不是函数”错误。截图如下。

如何处理这种情况？或者有没有其他方法？非常感谢任何帮助。

【参考方案1】：

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

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

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

WebAPIUtils.login(data, ServerActionCreator.receiveLoginStatus)

【讨论】：

由于登录操作正在发起服务器请求，我的印象是它必须在 ServerActionCreator 中。无论如何，我已经使用了你的第二个解决方案，它工作正常。感谢您的帮助。