Flux 예제 분석 2
20
Flux 예예 예예 2 예예 예예 by peter_yun
-
Upload
youngsik-yun -
Category
Engineering
-
view
2.016 -
download
7
Transcript of 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
actionsconstants
ProductDatautils/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
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 가 …곧출간됩니다 ..
![[분석]서울시내 상권분석/폐업률을 기준으로 한 서울시 창업기업의 생존률 분석](https://static.fdocument.pub/doc/165x107/58cf1e931a28abc05f8b5a3d/-58cf1e931a28abc05f8b5a3d.jpg)
