Flux 애플리케이션은 크게 세 부분으로 구성

• 디스패처(Dispatcher)
• 스토어(Store)
• 뷰(View)

Flux 아키텍처의 가장 큰 특징

• 단방향 데이터 흐름(unidirectional data flow)

디스패처(Dispatcher)는 Flux 애플리케이션의 모든 데이터 흐름을 관리하는 허브 역할을 한다. 액션이 발생하면 디스패처로 메시지(또는 액션 객체)가 전달되고 디스패처는 디스패처에 등록된 콜백 함수를 통해 이 메시지를 스토어에 전달한다. 다른 구성요소와 달리 디스패처는 전체 애플리케이션에서 한 개의 인스턴스만 사용한다.

snippet.java

var TodoActions = {
  create(text) {
    AppDispatcher.dispatch({
      actionType: Constants.TODO_CREATE,
      text
    })
  },
  ...
  destroy(id){
    AppDispatcher.dispatch({
      actionType: Constants.TODO_DESTROY,
      id
    })
  }
}

위 코드에서 액션은 TodoActions.create 와 TodoActions.destroy 라는 액션 생성자를 통해 만들어지고, 뷰에서는 액션 생성자를 실행하여 액션을 만들고 이렇게 만들어진 액셔은 디스패처로 전달되고 디스패처는 액션의 데이터를 스토어로 전달한다.

스토어는 애플리케이션의 상태를 저장한다. MVC 패턴의 모델과 유사하지만 ORM(Object-relational Mapping) 스타일로 데이터를 다루지 않는다. 그보다는 애플리케이션의 특정 도메인에 해당하는 상태를 다룬다고 보는 편이 좋다.

예를 들어, 페이스북의 돌아보기 동영상 편집기(Loopback Video Editor)는 TimeStore를 사용해 재생 상태와 위치를 다루고, ImageStore를 사용해 재생 상태와 위치를 다루고, ImageStore를 사용해 이미지 컬랙션을 다룬다. 물론, Todo 애플리케이션의 예처럼 MVC의 모델과 비슷하게 스토어 데이터를 구성할 수도 있다.

Flux에서의 뷰는 MVC의 뷰와는 달리 화면을 표시하는 것은 물론 컨트롤러의 성격도 가지고 있다. 특히 중첩된 뷰 레이어의 최상위 뷰는 스토어에서 데이터를 가져와 이를 자식 뷰로 배분하는 역할을 하고 있기 때문에 컨트롤러-뷰(Controller-view)라고도 부른다.

• http://webframeworks.kr/tutorials/react/flux/