[항해 99 주특기] 심화강의 flux아키텍처

flux 아키텍처란?

 

페이스북에서 본인들의 에러를 고치기 위해 만든 아키텍처로써 기존의 MVC 패턴으로는 도저히 극복하지 못했던 것을 극복하기 위해 만들어졌다

구조로써는 단방향으로 흐르는 구조를 가지고있으며( 액션 >> 디스패치 >> 스토어 >> 뷰 ) 이러한 특징으로 인해서 pong game처럼 난잡하게 이루어지던 데이터의 흐름을 정리할 수 있게 되었다.

 

 

 

---

FLUX 패턴에서 데이터의 흐름

1. 준비과정

스토어가 디스패쳐에게 다음 액션들어오면 알려달라한다

컨트롤러뷰가 스토어에게 변경사항 있는지 알려달라해서 없으면 그 내용 그대로를 뷰에게 전달한다 이후 스토어에게 변경사항이 있으면 알려달라고 한다

 

2. 이후 데이터의 흐름
뷰에서 액션 생성자한테 액션 오면 말해줄테니 준비해 라고 한다

액션이 발생하면서 액션생성자는 액션을 포맷에 맞게 만들어서 디스패쳐 주고 디스패쳐는 들어온 액션의 순서에 따라서 알맞은 스토어에 보낸다(필요한 것만 골라서)

스토어는 뷰컨트롤러에게 변경사항이 있다고 하면 뷰컨트롤러가 변경사항을 달라고 한다.

이후에 뷰컨트롤러가 자신의 아래의 모든 뷰에게 새로운 상태에 맞게 랜더링을 하라고 알린다.

 

각자의 역할

뷰(View)

뷰컨트롤러에게 받은 데이터를 기반으로 랜더링을 직접적으로 하는 역할 (발표자)

 

뷰컨트롤러(View controler)

스토어에게 받은 변경사항을 읽어와서 뷰에게 직접적으로 알리는 역할(뷰와 스토어의 중간다리 역할)

 

스토어(Store)

디스패쳐에게 받은 액션에 대해서 전체적으로 처리를 하는 역활 + 저장소 오직 디스패쳐로 전달된 액션만을 처리한다.

 

디스패쳐(Dispatcher)

액션 생성자에게서 받은 액션을 필요한지 불필요한지를 거르고 순서대로 처리(기본적으로 비동기)하고 필요하다면 waitFor() 통해서 먼저 실행(의존성이 있는 것들)하게도 하는 역할

 

액션 생성자(Action constructor)

뷰에게서 받은 사용자의 액션을 디스패쳐에게 전달하는 역할