flux 예제

나는이 튜토리얼이 반응과 플럭스를 학습에 도움이 되기를 바랍니다. 당신은 어떤 의견이있는 경우, 감사, 아래에 그들을 작성하시기 바랍니다. 이것은 Flux와의 반응에 대한 개요일 뿐이며, 이것이 빠르게 인기를 얻고 있는 이유를 설명합니다. 자바스크립트 기반(React 유무)을 위한 개발 환경을 설정하는 단계를 제공했습니다. 또한 코드 워크스루를 제공하여 사물이 배치되는 방식과 Flux와의 React에서 작동하는 방식을 이해하는 데 도움이 됩니다. 보시다시피 저장소는 단일 소스의 역할을 하며 구성 요소는 저장소 내의 데이터를 조작하여 서로 통신합니다. 이 예제에서는 순수 플럭스의 기본 사용을 보여 주며 개발자 효율성을 높이기 위해 상용구 코드를 추상화하는 플럭스의 더 나은 구현이 있습니다. 이러한 구현 중 하나는 Redux이며 다음 기사에서 Redux의 기본 을 안내할 것입니다. 이 문서에서는 작업 예제와 함께 React와 함께 Flux를 사용하는 개요를 제공합니다. Github에서 문서의 전체 소스 코드를 다운로드할 수 있습니다. 지금 당신은 그것으로 재생할 수 있습니다. 영화를 검색하려고하면 아래 그림과 같이 결과 목록이 표시됩니다. 동영상 제목을 입력하고 검색을 기록할 때마다 결과가 표시됩니다.

여기에 한 가지 예입니다 : 그러나 당신은 그것을 추가 할 필요가 없습니다, 당신은 단지 Flux에서 가져올 수 있습니다 : 지금 우리의 가게는 삭제하거나 토글을 할 수 있습니다. 이제 우리의 보기에 연결해 봅시다. Flux 앱에서 Flux에 대한 지식이 있어야 하는 유일한 장소는 컨테이너이며, 이는 AppContainer에서 콜백을 정의하고 AppView로 전달해야 한다는 것을 의미하며 뷰는 작업을 직접 디스패치하지 않습니다. 이렇게 하면 보기를 더 쉽게 다시 사용, 테스트 및 변경할 수 있습니다. Flux 개념을 작업, 디스패처, 저장소 및 보기의 네 가지 주요 부분으로 나눌 수 있습니다. 작업은 단순히 응용 프로그램에서 수행 된 작업을 설명합니다. 디스패처는 콜백의 단일 레지스트리입니다. 저장 하는 작업을 전달 하는 데 사용 됩니다. Store는 상태를 관리하고 응용 프로그램의 모든 업데이트에 사용되는 논리를 포함합니다.

그런 다음 모든 것을 보기에 표시할 수 있습니다 — React 구성 요소. 데이터가 한 방향으로 흐르게 됩니다. 이벤트가 발생하면 디스패처에게 작업이 전달되고 해당 작업이 구독된 모든 저장소로 전송될 수 있습니다. 그런 다음 저장소는 이 작업에 대해 준비된 논리를 사용하여 상태를 업데이트할 수 있습니다. 나중에 업데이트에 대해 뷰에 알릴 수 있으므로 구성 요소가 다시 렌더링됩니다. 이는 일반적으로 Flux가 디스패치 콜백을 처리하는 방법입니다. 각 페이로드에는 작업 이름과 데이터가 포함됩니다. switch 문은 저장소가 작업에 응답할지 여부를 결정하고 해당 작업 형식을 처리하는 방법을 알고 있는 경우 데이터를 변경합니다. 이 블로그에서는 샘플 프로젝트를 사용하여 “할 일” 목록을 만들어 Flux와 React에 대한 소개를 제공합니다.

Javascript 및 웹 개념에 대한 기본적인 이해가 필요합니다. 우리가 사용 하는 동일한 코드는 여기에서 찾을 수 있습니다 https://github.com/mahesh-singh/justdo. 위에서 언급한 예에서 단추를 클릭하는 사용자는 이벤트이며 팝업 메시지를 표시하는 것은 작업입니다.

Geplaatst in Geen categorie