Flux는 Facebook이 React로 클라이언트 측 웹 애플리케이션을 구축하기 위해 내부적으로 사용하는 애플리케이션 아키텍처입니다. 이는 라이브러리도 아니고 프레임워크도 아닙니다. 이는 라이브러리도 아니고 프레임워크도 아닙니다. 뷰로서 React를 보완하고 Unidirection Data Flow 모델의 개념을 따르는 일종의 아키텍처입니다. 프로젝트에 동적 데이터가 있을 때 유용하며 데이터를 효과적인 방식으로 업데이트해야 합니다. 런타임 오류가 줄어듭니다.
특수문자가 뭐야?
Flux 애플리케이션은 데이터를 처리하는 데 있어 세 가지 주요 역할을 합니다.
- 디스패처
- 백화점
- 보기(React 구성요소)
여기서 MVC(Model-View-Controller) 모델과 혼동해서는 안 됩니다. 컨트롤러는 두 가지 모두에 존재하지만 Flux 컨트롤러 뷰(뷰)는 계층 구조의 최상위에 있습니다. 저장소에서 데이터를 검색한 다음 이 데이터를 하위 항목에 전달합니다. 또한 작업 생성자 - 애플리케이션에서 가능한 모든 변경 사항을 설명하는 데 사용되는 디스패처 도우미 메서드입니다. 이는 Flux 업데이트 주기의 네 번째 부분으로 유용할 수 있습니다.
구조 및 데이터 흐름
Flux 애플리케이션에서는 데이터가 단일 방향(단방향)으로 흐릅니다. 이 데이터 흐름은 플럭스 패턴의 핵심입니다. 디스패처, 스토어, 뷰는 입력과 출력이 있는 독립적인 노드입니다. 작업은 새로운 데이터와 유형 속성을 포함하는 간단한 개체입니다. 이제 Flux 아키텍처의 다양한 구성요소를 하나씩 살펴보겠습니다.
디스패처
React Flux 애플리케이션의 중앙 허브이며 Flux 애플리케이션의 모든 데이터 흐름을 관리합니다. 이는 상점에 대한 콜백 레지스트리입니다. 자체적인 실제 지능은 없으며 단순히 작업을 저장소에 배포하는 메커니즘 역할만 합니다. 모든 매장은 스스로 등록하고 콜백을 제공합니다. 매장을 수정하는 모든 이벤트를 처리하는 곳입니다. 액션 생성자가 디스패처에 새로운 액션을 제공하면 모든 저장소는 레지스트리의 콜백을 통해 해당 액션을 수신합니다.
디스패처의 API에는 5가지 메서드가 있습니다. 이것들은:
문자열 추가
| SN | 행동 양식 | 설명 |
|---|---|---|
| 1. | 등록하다() | 저장소의 작업 핸들러 콜백을 등록하는 데 사용됩니다. |
| 2. | 등록 취소() | 상점의 콜백 등록을 취소하는 데 사용됩니다. |
| 삼. | 기다립니다() | 지정된 콜백이 먼저 실행될 때까지 기다리는 데 사용됩니다. |
| 4. | 보내다() | 액션을 전달하는 데 사용됩니다. |
| 5. | isDispatching() | Dispatcher가 현재 작업을 전달하고 있는지 확인하는 데 사용됩니다. |
백화점
여기에는 주로 애플리케이션 상태와 논리가 포함됩니다. 이는 전통적인 MVC의 모델과 유사합니다. 이는 애플리케이션 내에서 특정 상태를 유지하고 작업에 응답하여 자체적으로 업데이트하며 변경 이벤트를 내보내 컨트롤러 보기에 경고하는 데 사용됩니다.
견해
컨트롤러 뷰라고도 합니다. 액션을 생성하고 스토어로부터 새로운 데이터를 수신하는 로직을 저장하기 위해 체인 상단에 위치합니다. 이는 변경 이벤트를 수신하고 저장소에서 데이터를 수신하여 애플리케이션을 다시 렌더링하는 React 구성 요소입니다.
행위
디스패처 메서드를 사용하면 저장소에 디스패치를 트리거하고 작업을 호출하는 데이터 페이로드를 포함할 수 있습니다. 데이터를 디스패처에 전달하는 작업 생성자 또는 도우미 메서드입니다.
여우 대 늑대
플럭스의 장점
- 이해하기 쉬운 단방향 데이터 흐름 모델입니다.
- 이는 오픈 소스이며 MVC 아키텍처와 같은 공식 프레임워크보다 디자인 패턴에 더 가깝습니다.
- 플럭스 적용은 유지 관리가 더 쉽습니다.
- 플럭스 적용 부품이 분리됩니다.