2014-09-23 2 views
4

그래서 React와 Flux 아키텍처를 가지고 놀았습니다.React Flux : Store dependencies

2 개의 상점 A와 B가 있다고 가정 해 봅시다. B는 B에 값이 필요하기 때문에 B에 의존합니다. 따라서 Dispatcher가 작업을 발송할 때마다 먼저 B.MethodOfB가 실행되고 A.MethodOfA가 실행됩니다.

A를 B의 청취자로 등록하고 B가 변경 이벤트를 낼 때마다 A.MethodOfA를 실행하는 것보다이 아키텍처의 이점이 무엇일까 궁금합니다.

Btw : 페이 스북에서 예제 디스패처의 "스위치 케이스"없이 Flux 구현에 대해 생각해보십시오!

답변

8

이벤트가 발생하는 방식의 문제점은 어떤 핸들러가 주어진 이벤트를 먼저 처리할지에 대한 보장이 없다는 것입니다. 그래서 매우 크고 복잡한 응용 프로그램에서는 어떤 일이 일어나고 있는지 확실히 알지 못하는 얽힌 웹이 될 수 있습니다. 이로 인해 상점 간 종속성 관리가 매우 어려워집니다.

콜백 기반 dispatcher의 이점은 두 가지입니다. 즉, 상점 자체의 업데이트 순서는이 주문이 필요한 상점에서 선언되며 의도 한대로 작동하는 것이 보장됩니다. 그리고 이것은 Flux의 주요 목적 중 하나입니다. 앱의 상태를 예측 가능하고 일관성 있으며 안정하게 만듭니다.

시간이 지남에 따라 커지거나 변화하지 않을 수있는 아주 작은 앱에서 내가 제안하는 것과 논쟁 할 수 없습니다. 그러나 작은 응용 프로그램은 결국 큰 응용 프로그램으로 성장하는 경향이 있습니다. 이것은 누군가가 그것이 일어나고 있음을 깨닫기 전에 종종 발생합니다.

확실히 Flux에 대한 다른 접근법이 있습니다. 꽤 다른 구현이 만들어졌으며이 문제에 대한 다른 접근법을 가지고 있습니다. 그러나, 나는이 실험 중 어느 것이 잘 확장되는지 확신하지 못한다. 반면에 Facebook's Flux repo의 디스패처와 documentation에 설명 된 접근 방식은 진정으로 거대한 응용 프로그램으로 확장되었으며 상당히 테스트를 거쳤습니다.

+0

야후의 [플럭스 예]있다을 (https://github.com/yahoo/flux-examples) 일에 약간의 트위스트를 제공한다. –

+0

Yahoo! 콜백 (callback) 접근 방식을 사용하여 적어도 자신들의 파견기에 들어갔습니다 : https://github.com/yahoo/dispatchr/blob/master/lib/Dispatcher.js#L139-162 그리고 https://github.com/ yahoo/dispatchr/blob/master/lib/Action.js # L36-L69 – fisherwebdev

+0

아주 좋은 설명, 정말 고마워! –

2

내 생각에이 발송자는 어떻게 든 반 패턴이라고 생각합니다.

이벤트 소싱 또는 CQRS를 기반으로하는 분산 아키텍처에서는 자율 구성 요소가 동일한 이벤트 로그를 공유 할 때 서로 종속 될 필요가 없습니다.

당신이 이러한 개념을 적용 할 수없는 동일한 호스트 (브라우저/모바일 장치)에 있기 때문에가 아닙니다. 그러나 자율적 인 저장소 (저장소 종속성 없음)를 사용하면 같은 브라우저에있는 2 개의 저장소에 동일한 데이터가 2 개의 다른 저장소에 필요할 수 있으므로 중복 된 데이터가있을 수 있습니다. 이것은 지불해야 할 비용이지만 저장소 의존성을 제거함에 따라 장기적으로 이점이 있다고 생각합니다. 즉, 해당 저장소를 사용하지 않는 구성 요소에 영향을주지 않고 하나의 저장소 만 완전히 리팩토링 할 수 있습니다.

제 경우에는 이러한 패턴을 사용하여 일종의 자치 위젯을 만듭니다. 자율 위젯은 다음과 같습니다

  • 이벤트 스트림
  • 구성 요소
  • 해주기 때문에 스타일 반응 어쩌면 쓸모 덜 파일 (듣고 상점?)

이것의 장점은 주어진 위젯에 버그가있는 경우, 버그가 거의 위 했나요 3 이외의 다른 파일을 포함하지 않을 것입니다; 단점은 저장이 호스트하는 것입니다

) 동일한 데이터가이를 유지해야합니다. 일부 이벤트의 경우 많은 상점에서 로컬 데이터에 대해 동일한 조치를 취해야 할 수 있습니다.

이 방법은 더 큰 프로젝트에서 더 잘 확장됩니다.

여기 내 통찰력 참조 : Om but in javascript

+1

downvote 사람들은 이유를 설명하는 것을 망설이지 않습니다. 이것은 Flux로부터의 열망을 받아 저장소 의존성을 제거하여 합성 가능성을 높이는 매우 인기있는 Redux 프레임 워크의 접근 방식이기도합니다 –

+0

Redux가 갈 길이 멀다고 생각합니다. 그러나 나는 당신의 대답을 완벽하게 이해하지 못합니다. 어쩌면 그게 누군가가 downvoted ... –

관련 문제