Flux architecture circular dependency

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); 
    } 
} 

당신이 ServerActionCreator이 WebAPIUtils 및 WebAPIUtils에 따라 볼 수 있듯이 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는 빈 객체가되어 ServerActionCreator의 loginSubmit 함수가 호출되면 "정의되지 않은 함수가 아닙니다."라는 오류가 발생합니다. 아래 스크린 샷.

이 시나리오를 처리하는 방법

? 또는 다른 대안이 있습니까? 어떤 도움이라도 대단히 감사합니다.

Answer 1

모듈간에 순환 의존성이있을 때마다 일반적인 해결책은 모듈을 결합하거나주기를 중단시킬 세 번째 엔터티를 만드는 것입니다.

귀하의 경우, loginSubmit을 다른 액션 제작자 모듈로 이동할 수 있다고 주장합니다. 그것은 실제로 사용자 행동이지, 절망적 인 행동이 아닙니다. 따라서 loginSubmit은 다른 사용자 작업 작성자 메소드와 함께 UserActionCreators.js에 포함될 수 있습니다.

문제에 대한 또 다른 해결책 (일반적으로 순환 종속성)은 메서드를보다 순수하게 만들고 종속성을 제거하고 대신 종속성을 인수로 전달하는 것입니다. 따라서 WebAPIUtils.login()은 성공 콜백이 될 두 번째 인수를 취할 수 있습니다. 따라서 :

WebAPIUtils.login(data, ServerActionCreator.receiveLoginStatus)