React
Flux 방식으로 ReactJS 사용하기
수색…
소개
비고
Flux 는 Facebook이 클라이언트 측 웹 응용 프로그램을 작성하는 데 사용하는 응용 프로그램 아키텍처입니다. 단방향 데이터 흐름을 활용하여 React의 구성 가능한보기 구성 요소를 보완합니다. 공식적인 프레임 워크가 아닌 패턴이 더 많으므로 많은 새로운 코드없이 Flux를 즉시 사용할 수 있습니다.
플럭스 응용 프로그램에는 디스패처 , 상점 및 뷰 (React 구성 요소)의 세 가지 주요 부분 이 있습니다 . 이것들은 Model-View-Controller와 혼동되어서는 안됩니다. 컨트롤러는 Flux 애플리케이션에 존재하지만 컨트롤러 뷰입니다. 계층 구조 맨 위에있는 뷰는 저장소에서 데이터를 검색하고이 데이터를 하위 노드로 전달하는 경우가 많습니다. 또한 액션 생성자 (Dispatcher 도우미 메소드)는 응용 프로그램에서 가능한 모든 변경 사항을 설명하는 의미 론적 API를 지원하는 데 사용됩니다. 플럭스 업데이트주기의 네 번째 부분으로 생각하는 것이 유용 할 수 있습니다.
플럭스 는 단방향 데이터 흐름을 선호하여 MVC 를 피 합니다. 사용자가 React보기와 상호 작용할 때보기는 중앙 디스패처를 통해 조치를 적용하여 영향을받는 모든보기를 업데이트하는 응용 프로그램의 데이터 및 비즈니스 로직을 보유하는 다양한 저장소로 전달합니다. 이는 React의 선언적 프로그래밍 스타일에서 특히 잘 작동합니다. 저장소에서 상태간에 뷰를 전환하는 방법을 지정하지 않고 업데이트를 보낼 수 있습니다.
데이터 흐름
이것은 포괄적 인 개요의 개요 입니다.
플럭스 패턴은 단방향 데이터 흐름을 사용한다고 가정합니다.
액션 - 액션
type및 기타 입력 데이터를 설명하는 간단한 객체입니다.Dispatcher - 단일 조치 수신자 및 콜백 컨트롤러. 응용 프로그램의 중앙 허브라고 상상해보십시오.
저장소 - 응용 프로그램 상태 및 논리를 포함합니다. 디스패처에 콜백을 등록하고 이벤트가 발생하여 데이터 레이어가 변경된 시점을 확인합니다.
보기 - 저장소에서 변경 이벤트 및 데이터를 수신하는 구성 요소를 응답합니다. 무언가가 변경되면 다시 렌더링됩니다.
Flux 데이터 흐름에서, 뷰는 동작 을 생성 하고 사용자 상호 작용을 위해 디스패처로 전달할 수 있습니다.
되 돌린
더 명확하게하기 위해, 우리는 끝에서부터 시작할 수 있습니다.
서로 다른 React 구성 요소 ( 보기 )는 변경된 사항에 대해 다른 점포의 데이터를 가져옵니다.
컨트롤러 뷰 라고 하는 구성 요소는 거의 없기 때문에 상점에서 데이터를 가져오고 자손의 체인을 따라 데이터를 전달하는 접착제 코드를 제공합니다. 컨트롤러 뷰는 페이지의 중요한 섹션을 나타냅니다.
상점 은 조치 유형과 응용 프로그램의 비즈니스 로직에 대한 기타 입력 데이터를 비교하는 콜백으로 표시 될 수 있습니다.
Dispatcher 는 공통 조치 수신자 및 콜백 컨테이너입니다.
액션 은 필요한
type속성을 가진 단순한 객체 일뿐입니다.이전에는 작업 유형 및 도우미 메서드 ( 작업 작성자 라고 함)에 상수를 사용하려고합니다.
