Круговая зависимость архитектуры потока

Question

Я начал изучать архитектуру Flux в Facebook. Я пытаюсь сделать простой экран входа. Я выполнил пример приложения 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 становится пустым объектом, и я вызываю ошибку «undefined is not a function» при вызове функции loginSubmit в ServerActionCreator. Снимок экрана ниже.

Как обрабатывать этот сценарий? или Есть ли альтернативный способ? Буду признателен за любую оказанную помощь.

Answer 1

Всякий раз, когда у вас есть круговая зависимость между модулями, общее решение заключается в объединении модулей или создании третьего объекта, который разрушит цикл.

В вашем случае я бы сказал, что вы можете переместить loginSubmit другому модулю создателей действий. Во всяком случае, это действие пользователя, а не действие. Поэтому, возможно, loginSubmit может пойти в UserActionCreators.js вместе с любым количеством других методов создания пользовательских действий.

Еще одно решение вашей проблемы (и для круговых зависимостей в целом) - сделать ваши методы более чистыми, удалить зависимости и вместо этого передать в зависимостях в качестве аргументов. Таким образом, WebAPIUtils.login() может принять второй аргумент, который будет успешным обратным вызовом. Таким образом:

WebAPIUtils.login(data, ServerActionCreator.receiveLoginStatus)