React의 단방향 데이터 흐름을 활용하기 위한 어플리케이션 아키텍쳐.
번역된 문서는 flux 한국어 번역 페이지에서 확인할 수 있다.
Flux 발표 포스트를 참고한다: "An Application Architecture for React".
상세한 내용은 Flux 아키텍쳐와 TodoMVC 예시에서 확인할 수 있다.
더 깊은 내용은 action creators and the dispatcher에서 확인할 수 있다.
기본 예시: TodoMVC
약간 더 복잡한 예시: Chat Client
Flux는 프레임워크보다는 패턴에 가까워 강한 의존성을 가지지 않는다. 하지만 Stores를 위해 EventEmitter를 사용하고 Views를 위해 React를 사용하고 있다. Flux의 구성 중 다른 곳에서 찾아볼 수 없는 것은 dispatcher로 이 모듈이 Flux 도구 모음을 완성하는 역할을 한다. Dispatcher는 invariant 모듈에 의존성을 가지고 있고 여기에 포함되어 있다.
npm module에서 사용 가능하고 npm install flux 명령어로 package.json에 추가할 수 있다. dispatcher는 Flux.Dispatcher로 사용할 수 있는데 다음 예시와 같이 활용할 수 있다:
var Dispatcher = require('flux').Dispatcher;dispatcher API와 예제를 확인하자.
클론한 리포에서 flux 디렉토리로 이동한 후 npm install을 실행한다.
이 작업은 Gulp 기반의 빌드 일감을 자동으로 실행하고 Flux.js 파일을 생성하며 모듈에서 불러 사용할 수 있다.
생성한 파일을 다음과 같이 불러와 쓸 수 있다:
var Dispatcher = require('path/to/this/directory/Flux').Dispatcher;이 빌드 프로세스는 설탕옷을 벗긴 Dispatcher와 invariant 모듈을 lib 디렉토리에 생성하는데 이 모듈을 직접 접근해서 사용하거나 편의에 따라 다른 디렉토리로 복사해서 사용할 수도 있다. flux-todomvc와 flux-chat 예제에서는 이 방법을 사용했다.