Flux

React를 들어가기전에 대략적인 지식습득.
가볍게 읽어주는 용도.

 

Flux의 핵심적인 세가지 부분

Dispatcher , Stores , Views (React 컴포넌트)
Model-View-Controller와 혼동X

Flux는 단방향 데이터 흐름
MVC는 양방향 데이터 흐름

React view에서 사용자가 상호작용(회원가입, 사용자 정보수정 등)을 하고 싶다면? 
중앙의 dispatcher에게 action을 준다.
dispatcher는 store에게 action전파.
데이터와 비지니스 로직을 가지고 있는 store는 action이 전파되면 
이 action에 영향이 있는 모든 view를 갱신.

 

구조와 데이터흐름

Flux, 데이터는 단방향으로 흐른다.

flux의 단방향 데이터 흐름

action은 새로운 데이터를 포함하는 간단한 객체, 구분은 type 프로퍼티로.

view는 사용자의 요청을 action으로 dispatcher에 전파.

모든 데이터는 중앙 허브인 dispatcher를 통한다.
대부분의 action은 view에서의 사용자 상호작용에서 발생한다.
dispatcher는 store를 등록하기 위한 콜백을 실행 후, action을 모든 store로 전달한다.
store는 관리하고 있는 상태중 어떤 액션이라도 관련이 있다면 전달해줌.
store는 이벤트를 controller-views에게 알려주고 그 결과 데이터에 변화가 일어남.
controller-views는 이 이벤트를 듣고있다가 이벤트 핸들러가 있는 store에서 데이터를 다시 가져옴.
controller-views는 스스로 setState() 메소드를 호출하고 컴포넌트 트리에 속한 자식 노드 모두를 리렌더링함.

 

---

 

action creator

• 라이브러리에서 제공하는 메소드
• action, type을 설정하거나 dispatcher에 제공하는 역할
• 모든 action은 store가 dispatcher에 등록해둔 callback을 통해 모든 store에 전송
• action에 대한 응답으로 store가 스스로 갱신한 다음 자신이 변경되었다고 모두에게 알림
• controller-view 라고 불리는 특별한 view가 변경 이벤트를 듣고 새로운 데이터를 store에서 가져온 후 모든 트리에 있는 자식 view에게 새로운 데이터를 제공한다.

어플리케이션의 상태는 store에 의해 관리를 해서 어플리케이션의 다른 부분들과 결합도를 극히 낮춘 상태로 유지될 수 있다.
store의 사이에서 의존성이 생긴다고 해도 dispatcher에 의해 엄격한 위계가 유지되어 동기적으로 갱신되는 방식으로 관리된다.