Flux 예제 분석 2

Flux 예제 분석 2
쇼핑 카트
by peter_yun

목차
● Flux 애플리케이션 구조
● index.html & package.json
● Dispatcher 만들기
● Action Type & Action Creator
● Store
● Controller View
● Mock Data 테스트
● 정리

Flux 애플리케이션 구조
components
stores
dispatcher
actions
constants
ProductData
utils/CartAPI

Flux 애플리케이션 구조
http://react-flux-cart.scotch.io/
CartApp
Catalog
Cart

index.html & package.json
Production
● react : reactjs
● flux : dispatcher from FB
Development
● browserify 안에 reactify 통해 reactjs의 jsx 변환
● watchify
Script
● npm start : src/bundle.js 생성
● npm build
not use grunt/gulp

index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flux Cart</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<section id="flux-cart"></section>
<script src="js/bundle.js"></script>
</body>
</html>

Dispatcher 만들기
● npm install flux
● Dispatcher는 중앙 허브
o dispatch : payload 전파
o register : payload 받기
payload = ActionType + Data

Action Creator
● Action Creator를 생성
○ View에서 호출 할 Public Domain Function (PDF)
○ payload 생성
○ Dispatcher.dispatch에 payload 전파 의뢰
● Action Type 정의

Action Creator 흐름도
Action Creator
PAYLOAD 생
성View
PDF
PAYLOAD 전파 의뢰

Store
● 데이터 상태 저장
● 데이터 set은 private 구성
o Dispatcher.register를 통해 Action type을 받아 set 함
● View로 payload 전송은 event 이용
o NodeJS EventEmitter
● 데이터 get은 public 구성
o View에서 get 하고 setState 함

Store - private set
private set data 영역
Dispatcher가 dispatch 한
payload를 받아 private set 호출을 위한
Dispatcher의 register에 콜백 등록
use
private set data 하면 change
이벤트 발생

Store - payload 전송
Store에서 private set 이 호출되
면
change 이벤트를 전송한다.
change 이벤트를 받아 실행할
callback을 View에서 등록한다.
module.exports 하여 View 에서
public get data 할 영역

Store - set/get 그리고 event 흐름도
set data
get dataevent

Controller View
● Controller View는 Store의 변경을 감지(Listen)하고, Store 의 public
get 통해 변경 데이터를 가져온다.
● 가져온 데이터는 setState 통해 this.state 최신 상태를 유지
● this.props 통해 Child Component에 데이터를 아래로 내려줌

Controller View
View Component Lifecycle 통해
Store 이벤트 Listen/Remove
this.setState 호출 최신 상태 유
지
Store 이벤트를 받으면 Store의
public get data를 호출

Controller View 흐름도
public get dataevent listen
setState 최
신상태유지
child component는
props 통해 데이터 전달

Child View
● Action Creator를 짝사랑한다.
o UI 이벤트 발생시 호출
● this.props 만 편식한다.
o UI 렌더링 데이터

Mock Data 테스트
app.js
Mock Data
셋팅

정리
● Flux 단방향은 data set 이 단방향이라는 말씀 !!!
● Dispatcher는 payload 받고 전달하는 중앙 허브
● Action Creator는 payload 생성자
● Store은 payload를 받아 모든 View에 payload 전달
● Controller View는 부모 Component로 최신 state 유지
● 자식 View Component는 this.props를 이용하고, 이벤트 발생시 Action Creator
호출
● 참조
https://scotch.io/tutorials/creating-a-simple-shopping-cart-with-react-js-and-flux#api-&-mock-data
https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture

실전 프로젝트로 배우는 AngularJS
많이 사보세요. ^^
그러면 ReactJS가
곧 출간됩니다…..

Flux 예제 분석 2

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Flux 예제 분석 2

Similar to Flux 예제 분석 2 (20)

Flux 예제 분석 2