## Flux 소개

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

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

Flux 아키텍처의 가장 큰 특징

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

### 디스패처

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

### 액션

```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 애플리케이션](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/)의 예처럼 MVC의 모델과 비슷하게 스토어 데이터를 구성할 수도 있다. 

### 뷰

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

## 링크

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