Flux 패턴

데이터가 단방향으로 흐른다. (출처 : facebook github)

Flux 패턴 : Dispatcher, Store, Views를 이용하여 데이터 흐름을 단방향으로 처리하는 방식.

Action : 지정된 행동의 단위. 

Dispatcher : Dispatcher는 호출된 action에 따라 'Dispatcher 에게' 지정된 행동을 하고 Store를 업데이트한다. 

Store : 상태와 값을 가지는 저장소. 그 스스로는 어떠한 동작도 하지 않으며, 그 변경은 오직 Dispatcher를 통해서만 이루어진다.

View : 일반적인 뷰. (ex. React, Angular 등의 컴포넌트)

 

최대한 간략하게 정리한다고 했지만, 이게 절대로 한 번에 이해될리 없다는 걸 안다. 예를 들어보겠다.

A, B, C 라는 사람과  매우 큰 창고(이하 Store)를 가진 甲 이라는 사람이 있다.

甲은 A, B, C 에게 창고이용 제한적으로 허용하였다.
  * 저장, 회수, 상태 확인만이 가능하다.
  * A, B, C 는 창고에 직접적인 이용이 불가능하고 모든 행위(저장, 회수, 상태 확인)는 甲을 통해서만 가능하다.

A, B, C는 View, 창고는 Store,  甲은 Dispatcher 이다. 

설명이 도움이 되길 바란다.

좌측 빗금은 대개 초기화 할 때나 사용할 것이라고 생각하여서 뺐다.

 

* NgRx 의 튜토리얼에서 Action을 보기 좋아서 아래와 같이 가져왔다.

좌: 호출된 액션들, 우: 선택된 Increment 액션 상세

호출된 Action에 따라 'Dispatcher를 통해' 변경된 Store의 상태.(0 -> 1)

 

---

아래 글들을 읽어보길 바란다. 

https://facebook.github.io/flux/docs/in-depth-overview

Flux · Application architecture for building user interfaces

https://haruair.github.io/flux/docs/overview.html#content

Flux

https://2dubbing.tistory.com/26

Flux 아키텍쳐 란??

https://ngrx.io/guide/store

NgRx Docs