data uni-directional architecture in android · 2018-11-10 · 목차 1. 세션 목표 2. 현...
TRANSCRIPT
![Page 1: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/1.jpg)
이승민, GDE Android Korea@maryangmin
Seoul
Data Uni-Directional Architecture in Android
![Page 2: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/2.jpg)
목차1.세션 목표2.현 구조의 문제점3. Data Uni-Directional Architecture (UDA)4. Flux5. Redux6. MVI7. UDA 정리8.간단 응용9.마무리
Korea
![Page 3: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/3.jpg)
이번 세션을 통해 여러분들이 얻어갔으면 좋겠는 것세션 목표
1.UDA란 것이 있구나2.저런 이유에서 UDA 라는 것이 나왔구나3.UDA는 기존 아키텍쳐와 저런 차이점이 있구나4.우리 앱은 UDA가 필요할까?5.기존 구조로 짜여진 우리 앱에 UDA를 어떻게 적용할까?(마지막) Flux / Redux / MVI는 이런거구나
3가지 아키텍쳐 예시를 통해 UDA 근본을 고민해보시기를 바래요!
![Page 4: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/4.jpg)
현 구조의 문제점
Seoul
![Page 5: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/5.jpg)
아까 다 읽었는데 숫자가 또 있네?
![Page 6: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/6.jpg)
한두번도 아니고... 왜 이럴까?
![Page 7: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/7.jpg)
새 댓글 Count=2
우리가 바라는 시나리오
Count=0
Count++
Clear알림클릭
비동기 작업View Input View 갱신
![Page 8: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/8.jpg)
새 댓글 Count=0
현실
Count=1
Count++
Clear알림클릭 숫자가남는다
비동기 작업View Input View 갱신
![Page 9: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/9.jpg)
입력 갱신
절망
작업
입력 갱신작업
입력 갱신작업
입력 갱신
결과를 예상할 수 없다!
난 직접 갱신!
![Page 10: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/10.jpg)
무엇이 문제일까?
![Page 11: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/11.jpg)
무엇이 문제일까?- View에 영향을 주는 State 변화가 여러곳에서 일어남
입력 갱신난 직접 갱신!
![Page 12: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/12.jpg)
무엇이 문제일까?- View에 영향을 주는 State 변화가 여러곳에서 일어남- 비동기로 일어나는 State 변화 시점을 예상할 수 없음
입력 갱신작업
다수의 입력 언제 끝날지 모르는 작업
입력 갱신난 직접 갱신!
![Page 13: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/13.jpg)
무엇이 문제일까?- View에 영향을 주는 State 변화가 여러곳에서 일어남- 비동기로 일어나는 State 변화 시점을 예상할 수 없음- 모델에서 결정되는 State를 View에서 넘겨받아 따로 관리하기 때문에 격차가 생김
입력 갱신작업
다수의 입력 언제 끝날지 모르는 작업
State모델 갱신할 때는 사실 달라진 State
입력 갱신난 직접 갱신!
![Page 14: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/14.jpg)
Data Uni-Directional Architecture(단방향 데이터 구조)
![Page 15: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/15.jpg)
Uni-Directional Architecture (UDA) Core
![Page 16: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/16.jpg)
- View에 영향을 주는 State는 한 방향으로만 수정할 수 있다. 단방향
Uni-Directional Architecture (UDA) Core
![Page 17: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/17.jpg)
- View에 영향을 주는 State는 한 방향으로만 수정할 수 있다. 단방향- 앞의 액션이 끝나지 않으면 뒤 액션을 실행하지 않는다. 동기적 실행
Uni-Directional Architecture (UDA) Core
![Page 18: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/18.jpg)
- View에 영향을 주는 State는 한 방향으로만 수정할 수 있다. 단방향- 앞의 액션이 끝나지 않으면 뒤 액션을 실행하지 않는다. 동기적 실행- Model은 State를 변화시키고, View는 State를 참조만 한다. View와 State 분리
Uni-Directional Architecture (UDA) Core
![Page 19: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/19.jpg)
UDA 종류
-Flux (Architecture by Facebook)
-Redux (Library related Flux)
-MVI (UDA Architecture in Android)
![Page 20: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/20.jpg)
UDA 종류
-Flux (Architecture by Facebook)
-Redux (Library related Flux)
-MVI (UDA Architecture in Android)
3가지 예시를 통해 UDA를 알아봅시다!
![Page 21: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/21.jpg)
Flux
Seoul
![Page 22: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/22.jpg)
출처: https://facebook.github.io/flux/docs/in-depth-overview.html#content
FluxFacebook이 만든 단방향 데이터 아키텍쳐
ActionCreator API
(EventBus)
![Page 23: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/23.jpg)
pr ivate void setButton() { btnAdd.setOnCl ickListener(v -> { Str ing text = inputTodo.getText() . toStr ing() ; i f ( "" .equals( text)) return; act ionCreator.create(text) ; inputTodo.setText("") ; } ) ; btnClear.setOnCl ickListener(v -> act ionCreator.c lear()) ;}
View
![Page 24: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/24.jpg)
pr ivate void setButton() { btnAdd.setOnCl ickListener(v -> { Str ing text = inputTodo.getText() . toStr ing() ; i f ( "" .equals( text)) return; act ionCreator.create(text) ; inputTodo.setText("") ; } ) ; btnClear.setOnCl ickListener(v -> act ionCreator.c lear()) ;}
View
![Page 25: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/25.jpg)
publ ic c lass TodoAct ionCreator { publ ic void create(Str ing todo) { Dispatcher.dispatch(Act ion.wi th(TodoAct ions.TYPE_CREATE) .data(TodoAct ions.KEY_TEXT, todo)) ; }
publ ic void c lear() { Dispatcher.dispatch(Act ion.wi th(TodoAct ions.TYPE_CLEAR)); }}
publ ic c lass TodoAct ions { publ ic stat ic f inal Str ing TYPE_CREATE = "CREATE"; publ ic stat ic f inal Str ing TYPE_CLEAR = "CLEAR"; publ ic stat ic f inal Str ing KEY_TEXT = “KEY_TEXT";}
ActionCreator
![Page 26: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/26.jpg)
publ ic c lass TodoAct ionCreator { publ ic void create(Str ing todo) { Dispatcher.dispatch(Act ion.wi th(TodoAct ions.TYPE_CREATE) .data(TodoAct ions.KEY_TEXT, todo)) ; }
publ ic void c lear() { Dispatcher.dispatch(Act ion.wi th(TodoAct ions.TYPE_CLEAR)); }}
publ ic c lass TodoAct ions { publ ic stat ic f inal Str ing TYPE_CREATE = "CREATE"; publ ic stat ic f inal Str ing TYPE_CLEAR = "CLEAR"; publ ic stat ic f inal Str ing KEY_TEXT = “KEY_TEXT";}
ActionCreator
Action 생성 및 Dispatch
![Page 27: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/27.jpg)
publ ic c lass Dispatcher { pr ivate stat ic EventBus bus = EventBus.getDefaul t ( ) ;
publ ic stat ic void dispatch(Act ion act ion) { bus.post(act ion); }}
Dispatcher
![Page 28: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/28.jpg)
publ ic c lass Dispatcher { pr ivate stat ic EventBus bus = EventBus.getDefaul t ( ) ;
publ ic stat ic void dispatch(Act ion act ion) { bus.post(act ion); }}
Dispatcher
![Page 29: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/29.jpg)
publ ic c lass TodoStore extends Store { pr ivate List<Todo> todos = new ArrayList<>() ;
@Subscr ibe publ ic void onEvent(Act ion act ion) { switch (act ion.getType()) { case TodoAct ions.TYPE_CREATE: Str ing text = (Str ing) act ion.getData() .get(TodoAct ions.KEY_TEXT); todos.add(new Todo(text)) ; emitChange() ; break; case TodoAct ions.TYPE_CLEAR: todos.clear() ; emitChange() ; break; } }}
Store
![Page 30: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/30.jpg)
publ ic c lass TodoStore extends Store { pr ivate List<Todo> todos = new ArrayList<>() ;
@Subscr ibe publ ic void onEvent(Act ion act ion) { switch (act ion.getType()) { case TodoAct ions.TYPE_CREATE: Str ing text = (Str ing) act ion.getData() .get(TodoAct ions.KEY_TEXT); todos.add(new Todo(text)) ; emitChange() ; break; case TodoAct ions.TYPE_CLEAR: todos.clear() ; emitChange() ; break; } }}
Store
비지니스 로직 수행(State 변경 )
![Page 31: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/31.jpg)
publ ic c lass TodoStore extends Store { pr ivate List<Todo> todos = new ArrayList<>() ;
@Subscr ibe publ ic void onEvent(Act ion act ion) { switch (act ion.getType()) { case TodoAct ions.TYPE_CREATE: Str ing text = (Str ing) act ion.getData() .get(TodoAct ions.KEY_TEXT); todos.add(new Todo(text)) ; emitChange() ; break; case TodoAct ions.TYPE_CLEAR: todos.clear() ; emitChange() ; break; } }}
Store
protected void emitChange() { Dispatcher.emitChange(changeEvent()) ;}
![Page 32: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/32.jpg)
@Subscr ibe(threadMode = ThreadMode.MAIN)publ ic void onEvent(TodoStore.TodoChangeEvent event) { updateUI() ;}
pr ivate void updateUI() { adapter.set I tems(store.getTodos()) ;}
View
![Page 33: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/33.jpg)
@Subscr ibe(threadMode = ThreadMode.MAIN)publ ic void onEvent(TodoStore.TodoChangeEvent event) { updateUI() ;}
pr ivate void updateUI() { adapter.set I tems(store.getTodos()) ;}
View
Store의 State 참조
![Page 34: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/34.jpg)
Flux 정리
![Page 35: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/35.jpg)
Flux 정리- View -> ActionCreator -> Action -> Dispatcher -> Store -> View
![Page 36: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/36.jpg)
Flux 정리- View -> ActionCreator -> Action -> Dispatcher -> Store -> View- Multiple Store- Store가 비지니스 로직을 실행한다. (State를 관리한다.)- Mutable State- 필요할 경우 ActionCreator가 Repository 역할을 한다.
![Page 37: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/37.jpg)
Redux
Seoul
![Page 38: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/38.jpg)
출처: https://blog.novoda.com/introduction-to-redux-in-flutter/
ReduxFlux에서 고안한 State 관리 라이브러리(프레임워크)
![Page 39: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/39.jpg)
pr ivate void setButton() { btnAdd.setOnCl ickListener(v -> { Str ing text = inputTodo.getText() . toStr ing() ; i f ( "" .equals( text)) return; store.dispatch(act ionCreator.create(text)) ; inputTodo.setText("") ; } ) ; btnClear.setOnCl ickListener(v -> store.dispatch(act ionCreator.c lear())) ;}
View
![Page 40: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/40.jpg)
pr ivate void setButton() { btnAdd.setOnCl ickListener(v -> { Str ing text = inputTodo.getText() . toStr ing() ; i f ( "" .equals( text)) return; store.dispatch(act ionCreator.create(text)) ; inputTodo.setText("") ; } ) ; btnClear.setOnCl ickListener(v -> store.dispatch(act ionCreator.c lear())) ;}
View
Store.dispatch() 직접 호출
![Page 41: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/41.jpg)
publ ic c lass TodoAct ionCreator { publ ic Act ion create(Str ing todo) { return Act ion.wi th(TodoAct ions.TYPE_CREATE) .data(TodoAct ions.KEY_TEXT, todo); }
publ ic Act ion c lear() { return Act ion.wi th(TodoAct ions.TYPE_CLEAR); }}
ActionCreator
![Page 42: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/42.jpg)
publ ic c lass TodoAct ionCreator { publ ic Act ion create(Str ing todo) { return Act ion.wi th(TodoAct ions.TYPE_CREATE) .data(TodoAct ions.KEY_TEXT, todo); }
publ ic Act ion c lear() { return Act ion.wi th(TodoAct ions.TYPE_CLEAR); }}
ActionCreator
Action 생성만 수행
![Page 43: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/43.jpg)
publ ic c lass SimpleStore<S extends State> implements Store<S> { pr ivate S in i t ia lState; pr ivate Reducer<S> reducer;
pr ivate SimpleStore() { act ionsSubject.map(act ion -> reducer.reduce( in i t ia lState, act ion)) .doOnNext(s -> in i t ia lState = s) .subscr ibe(s -> statesSubject .onNext(s) , Throwable: :pr intStackTrace); }
@Overr ide publ ic void dispatch(Act ion act ion) { act ionsSubject.onNext(act ion); }
@Overr ide publ ic Observable<S> asObservable() { return statesSubject ; }}
Store
![Page 44: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/44.jpg)
publ ic c lass SimpleStore<S extends State> implements Store<S> { pr ivate S in i t ia lState; pr ivate Reducer<S> reducer;
pr ivate SimpleStore() { act ionsSubject.map(act ion -> reducer.reduce( in i t ia lState, act ion)) .doOnNext(s -> in i t ia lState = s) .subscr ibe(s -> statesSubject .onNext(s) , Throwable: :pr intStackTrace); }
@Overr ide publ ic void dispatch(Act ion act ion) { act ionsSubject.onNext(act ion); }
@Overr ide publ ic Observable<S> asObservable() { return statesSubject ; }}
Store
![Page 45: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/45.jpg)
publ ic c lass SimpleStore<S extends State> implements Store<S> { pr ivate S in i t ia lState; pr ivate Reducer<S> reducer;
pr ivate SimpleStore() { act ionsSubject.map(act ion -> reducer.reduce( in i t ia lState, act ion)) .doOnNext(s -> in i t ia lState = s) .subscr ibe(s -> statesSubject .onNext(s) , Throwable: :pr intStackTrace); }
@Overr ide publ ic void dispatch(Act ion act ion) { act ionsSubject.onNext(act ion); }
@Overr ide publ ic Observable<S> asObservable() { return statesSubject ; }}
Store
initialState로부터 newState 생성
![Page 46: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/46.jpg)
publ ic c lass TodoReducer implements Reducer<TodoState> {
@Overr ide publ ic TodoState reduce(TodoState oldState, Act ion act ion) { switch (act ion.getType()) { case TodoAct ions.TYPE_CREATE: TodoState newState = new TodoState(oldState); Str ing text = (Str ing) act ion.getData() .get(TodoAct ions.KEY_TEXT); newState.getTodos() .add(new Todo(text)) ; return newState; case TodoAct ions.TYPE_CLEAR: return new TodoState() ; defaul t : return oldState; } }}
Reducer
![Page 47: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/47.jpg)
publ ic c lass TodoReducer implements Reducer<TodoState> {
@Overr ide publ ic TodoState reduce(TodoState oldState, Act ion act ion) { switch (act ion.getType()) { case TodoAct ions.TYPE_CREATE: TodoState newState = new TodoState(oldState); Str ing text = (Str ing) act ion.getData() .get(TodoAct ions.KEY_TEXT); newState.getTodos() .add(new Todo(text)) ; return newState; case TodoAct ions.TYPE_CLEAR: return new TodoState() ; defaul t : return oldState; } }}
Reducer
Reducer는 하나의 함수
![Page 48: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/48.jpg)
publ ic c lass TodoReducer implements Reducer<TodoState> {
@Overr ide publ ic TodoState reduce(TodoState oldState, Act ion act ion) { switch (act ion.getType()) { case TodoAct ions.TYPE_CREATE: TodoState newState = new TodoState(oldState); Str ing text = (Str ing) act ion.getData() .get(TodoAct ions.KEY_TEXT); newState.getTodos() .add(new Todo(text)) ; return newState; case TodoAct ions.TYPE_CLEAR: return new TodoState() ; defaul t : return oldState; } }}
Reducer
![Page 49: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/49.jpg)
publ ic c lass TodoReducer implements Reducer<TodoState> {
@Overr ide publ ic TodoState reduce(TodoState oldState, Act ion act ion) { switch (act ion.getType()) { case TodoAct ions.TYPE_CREATE: TodoState newState = new TodoState(oldState); Str ing text = (Str ing) act ion.getData() .get(TodoAct ions.KEY_TEXT); newState.getTodos() .add(new Todo(text)) ; return newState; case TodoAct ions.TYPE_CLEAR: return new TodoState() ; defaul t : return oldState; } }}
Reducer
비지니스 로직 수행( init ialState로부터
newState 생성 )
![Page 50: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/50.jpg)
publ ic c lass SimpleStore<S extends State> implements Store<S> { pr ivate S in i t ia lState; pr ivate Reducer<S> reducer;
pr ivate SimpleStore() { act ionsSubject.map(act ion -> reducer.reduce( in i t ia lState, act ion)) .doOnNext(s -> in i t ia lState = s) .subscr ibe(s -> statesSubject .onNext(s) , Throwable: :pr intStackTrace); }
@Overr ide publ ic void dispatch(Act ion act ion) { act ionsSubject.onNext(act ion); }
@Overr ide publ ic Observable<S> asObservable() { return statesSubject ; }}
Store
![Page 51: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/51.jpg)
pr ivate void subscr ibeStore() { store.asObservable() .observeOn(AndroidSchedulers.mainThread()) .subscr ibe(this: :updateUI) ;}
pr ivate void updateUI(TodoState state) { adapter.set I tems(state.getTodos()) ;}
View
![Page 52: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/52.jpg)
pr ivate void subscr ibeStore() { store.asObservable() .observeOn(AndroidSchedulers.mainThread()) .subscr ibe(this: :updateUI) ;}
pr ivate void updateUI(TodoState state) { adapter.set I tems(state.getTodos()) ;}
View
Store의 State 참조
![Page 53: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/53.jpg)
Redux 정리
![Page 54: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/54.jpg)
Redux 정리- View -> ActionCreator -> Action -> Reducer -> Store -> View
![Page 55: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/55.jpg)
Redux 정리- View -> ActionCreator -> Action -> Reducer -> Store -> View- 3원칙: 단일 Store, Immutable State, Functional Reducer- View에서 직접 Store dispatch를 실행- Single Store- Reducer가 비지니스 로직을 실행한다.- Immutable State- Reducer 앞에 별도기능 Middleware 추가 가능- 필요할 경우 Middleware가 Repository 역할을 한다.
![Page 56: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/56.jpg)
Flux Redux
Dispatcher 있음
Multiple Store
Business logic in Store
Mutable State
Dispatcher 없음
Single Store
Business logic in Reducer
Immutable State
![Page 57: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/57.jpg)
MVI
Seoul
![Page 58: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/58.jpg)
출처: http://hannesdorfmann.com/android/model-view-intent
MVIHannes Dorfmann이 만든 Android UDA
![Page 59: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/59.jpg)
pr ivate Publ ishSubject<MviIntent> addIntent = Publ ishSubject .create() ;pr ivate Publ ishSubject<MviIntent> c learIntent = Publ ishSubject .create() ;
pr ivate void setButton() { btnAdd.setOnCl ickListener(v -> { addIntent.onNext(Mvi Intent.wi th(TodoAct ions.TYPE_CREATE) .data(TodoAct ions.KEY_TEXT, inputTodo.getText() . toStr ing())) ; inputTodo.setText("") ; } ) ; btnClear.setOnCl ickListener(v -> c learIntent.onNext(Mvi Intent.wi th(TodoAct ions.TYPE_CLEAR))) ;}
pr ivate void in i t ia l izeIntent() { presenter.processIntents( intents()) ;}
publ ic Observable<MviIntent> intents() { return Observable.merge(addIntent, c learIntent) ;}
View
![Page 60: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/60.jpg)
pr ivate Publ ishSubject<MviIntent> addIntent = Publ ishSubject .create() ;pr ivate Publ ishSubject<MviIntent> c learIntent = Publ ishSubject .create() ;
pr ivate void setButton() { btnAdd.setOnCl ickListener(v -> { addIntent.onNext(Mvi Intent.wi th(TodoAct ions.TYPE_CREATE) .data(TodoAct ions.KEY_TEXT, inputTodo.getText() . toStr ing())) ; inputTodo.setText("") ; } ) ; btnClear.setOnCl ickListener(v -> c learIntent.onNext(Mvi Intent.wi th(TodoAct ions.TYPE_CLEAR))) ;}
pr ivate void in i t ia l izeIntent() { presenter.processIntents( intents()) ;}
publ ic Observable<MviIntent> intents() { return Observable.merge(addIntent, c learIntent) ;}
View
Intent 보내기
![Page 61: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/61.jpg)
pr ivate Publ ishSubject<MviIntent> addIntent = Publ ishSubject .create() ;pr ivate Publ ishSubject<MviIntent> c learIntent = Publ ishSubject .create() ;
pr ivate void setButton() { btnAdd.setOnCl ickListener(v -> { addIntent.onNext(Mvi Intent.wi th(TodoAct ions.TYPE_CREATE) .data(TodoAct ions.KEY_TEXT, inputTodo.getText() . toStr ing())) ; inputTodo.setText("") ; } ) ; btnClear.setOnCl ickListener(v -> c learIntent.onNext(Mvi Intent.wi th(TodoAct ions.TYPE_CLEAR))) ;}
pr ivate void in i t ia l izeIntent() { presenter.processIntents( intents()) ;}
publ ic Observable<MviIntent> intents() { return Observable.merge(addIntent, c learIntent) ;}
View
Intent 처리
![Page 62: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/62.jpg)
publ ic c lass MviPresenter<S extends State> { pr ivate S in i t ia lState; pr ivate MviReducer<S> reducer;
pr ivate BehaviorSubject<S> stateSubject = BehaviorSubject .create() ;
publ ic void processIntents(Observable<MviIntent> intents) { intents .scan( in i t ia lState, (s, intent) -> reducer.reduce(s, intent)) .doOnNext(state -> in i t ia lState = state) .subscr ibe(stateSubject) ; }
publ ic Observable<S> states() { return stateSubject ; }}
Presenter
![Page 63: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/63.jpg)
publ ic c lass MviPresenter<S extends State> { pr ivate S in i t ia lState; pr ivate MviReducer<S> reducer;
pr ivate BehaviorSubject<S> stateSubject = BehaviorSubject .create() ;
publ ic void processIntents(Observable<MviIntent> intents) { intents .scan( in i t ia lState, (s, intent) -> reducer.reduce(s, intent)) .doOnNext(state -> in i t ia lState = state) .subscr ibe(stateSubject) ; }
publ ic Observable<S> states() { return stateSubject ; }}
Presenter
비지니스 로직 수행( init ialState로부터
newState 생성 )
Intent 처리
![Page 64: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/64.jpg)
publ ic c lass MviPresenter<S extends State> { pr ivate S in i t ia lState; pr ivate MviReducer<S> reducer;
pr ivate BehaviorSubject<S> stateSubject = BehaviorSubject .create() ;
publ ic void processIntents(Observable<MviIntent> intents) { intents .scan( in i t ia lState, (s, intent) -> reducer.reduce(s, intent)) .doOnNext(state -> in i t ia lState = state) .subscr ibe(stateSubject) ; }
publ ic Observable<S> states() { return stateSubject ; }}
Presenter
![Page 65: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/65.jpg)
pr ivate void in i t ia l izeIntent() { presenter.states() .subscr ibe(this: : render) ;}
@Overr idepubl ic void render(TodoState state) { adapter.set I tems(state.getTodos()) ;}
View
![Page 66: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/66.jpg)
pr ivate void in i t ia l izeIntent() { presenter.states() .subscr ibe(this: : render) ;}
@Overr idepubl ic void render(TodoState state) { adapter.set I tems(state.getTodos()) ;}
View
Store의 State 참조
![Page 67: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/67.jpg)
MVI 정리
![Page 68: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/68.jpg)
MVI 정리- View -> Intent -> Model -> View
![Page 69: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/69.jpg)
MVI 정리- View -> Intent -> Model -> View- Intent는 Presenter 등에 있다.- Multiple Store (Presenter)- Reducer가 비지니스 로직을 실행한다.- Immutable State
![Page 70: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/70.jpg)
Flux Redux
Action 명시
Dispatcher 있음
Multiple Store
Business logic in Store
Mutable State
Action 명시
Dispatcher 없음
Single Store
Business logic in Reducer
Immutable State
MVI
Action 없음
Dispatcher 없음
Multiple Store(Presenter)
Business logic in Reducer
Immutable State
![Page 71: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/71.jpg)
UDA 정리
Seoul
![Page 72: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/72.jpg)
- View에 영향을 주는 State는 한 방향으로만 수정할 수 있다. 단방향- 앞의 액션이 끝나지 않으면 뒤 액션을 실행하지 않는다. 동기적 실행- Model은 State를 변화시키고, View는 State를 참조만 한다. View와 State 분리
Uni-Directional Architecture (UDA) Core 복습
![Page 73: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/73.jpg)
UDA 장점
![Page 74: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/74.jpg)
UDA 장점단방향, View와 State 분리, State 저장소 일원화 등으로 State 관리에 이점을 갖는다.
![Page 75: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/75.jpg)
UDA 장점단방향, View와 State 분리, State 저장소 일원화 등으로 State 관리에 이점을 갖는다.
-여러 입력(다른화면,Service 등)으로 일어나는 State 변화를 한곳에서 쉽게 관리할 수 있다-State 변경지점이 명확하여 디버깅이 쉽다
![Page 76: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/76.jpg)
UDA 장점
어느 경우에 UDA를 사용할까?
단방향, View와 State 분리, State 저장소 일원화 등으로 State 관리에 이점을 갖는다.
-여러 입력(다른화면,Service 등)으로 일어나는 State 변화를 한곳에서 쉽게 관리할 수 있다-State 변경지점이 명확하여 디버깅이 쉽다
![Page 77: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/77.jpg)
UDA 장점
다양한 Input으로(입력종류,비동기 등) 변화가 일어나는 복잡한 State에 대해 사용
어느 경우에 UDA를 사용할까?
단방향, View와 State 분리, State 저장소 일원화 등으로 State 관리에 이점을 갖는다.
-여러 입력(다른화면,Service 등)으로 일어나는 State 변화를 한곳에서 쉽게 관리할 수 있다-State 변경지점이 명확하여 디버깅이 쉽다
![Page 78: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/78.jpg)
UDA 장점
다양한 Input으로(입력종류,비동기 등) 변화가 일어나는 복잡한 State에 대해 사용
-복잡한 State가 없으면 사용하지 않는 것이 좋다.-복잡한 State에 대해서만 부분적으로 사용할 수 있다.
어느 경우에 UDA를 사용할까?
단방향, View와 State 분리, State 저장소 일원화 등으로 State 관리에 이점을 갖는다.
-여러 입력(다른화면,Service 등)으로 일어나는 State 변화를 한곳에서 쉽게 관리할 수 있다-State 변경지점이 명확하여 디버깅이 쉽다
![Page 79: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/79.jpg)
간단 응용
Seoul
![Page 80: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/80.jpg)
UDA 개념을 MVP에서 간단하게 응용해보자
![Page 81: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/81.jpg)
데이터 흐름을 interface에서 Store로 변경
UDA 개념을 MVP에서 간단하게 응용해보자
![Page 82: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/82.jpg)
데이터 흐름을 interface에서 Store로 변경1. Presenter 로직 후 Store로 dispatch 한다.2. View에서 Store를 구독한다.
UDA 개념을 MVP에서 간단하게 응용해보자
![Page 83: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/83.jpg)
pr ivate void setButton() { btnAdd.setOnCl ickListener(v -> { presenter.create( inputTodo.getText() . toStr ing()) ; inputTodo.setText("") ; } ) ; btnClear.setOnCl ickListener(v -> presenter.c lear()) ;}
View
![Page 84: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/84.jpg)
pr ivate void setButton() { btnAdd.setOnCl ickListener(v -> { presenter.create( inputTodo.getText() . toStr ing()) ; inputTodo.setText("") ; } ) ; btnClear.setOnCl ickListener(v -> presenter.c lear()) ;}
View
![Page 85: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/85.jpg)
publ ic c lass TodoPresenter { pr ivate TodoReposi tory reposi tory = new TodoReposi tory() ; pr ivate TodoStore store = TodoStore.get() ;
publ ic void create(Str ing text) { Todo todo = reposi tory.create(text) ; store.create(todo); }
publ ic void c lear() { reposi tory.c lear() ; store.c lear() ; }}
Presenter
![Page 86: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/86.jpg)
publ ic c lass TodoPresenter { pr ivate TodoReposi tory reposi tory = new TodoReposi tory() ; pr ivate TodoStore store = TodoStore.get() ;
publ ic void create(Str ing text) { Todo todo = reposi tory.create(text) ; store.create(todo); }
publ ic void c lear() { reposi tory.c lear() ; store.c lear() ; }}
Presenter
비지니스 로직 후Store로 Dispatch
![Page 87: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/87.jpg)
publ ic c lass TodoStore { pr ivate List<Todo> todos = new ArrayList<>() ; pr ivate BehaviorSubject<List<Todo>> stateSubject = BehaviorSubject .create() ;
publ ic void create(Todo todo) { todos.add(todo); stateSubject .onNext( todos); }
publ ic void c lear() { todos.clear() ; stateSubject .onNext( todos); }}
Store
![Page 88: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/88.jpg)
publ ic c lass TodoStore { pr ivate List<Todo> todos = new ArrayList<>() ; pr ivate BehaviorSubject<List<Todo>> stateSubject = BehaviorSubject .create() ;
publ ic void create(Todo todo) { todos.add(todo); stateSubject .onNext( todos); }
publ ic void c lear() { todos.clear() ; stateSubject .onNext( todos); }}
Store
State 변경 및뷰 갱신 알림
![Page 89: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/89.jpg)
pr ivate void subscr ibeStore() { store.states() .subscr ibe(todos -> adapter.set I tems(todos)) ;}
View
Store의 State 참조
![Page 90: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/90.jpg)
UDA 개념을 MVP에서 간단하게 응용해보자
큰 변경 없이 MVP에 UDA를 부분적으로 적용하였다!
데이터 흐름을 interface에서 Store로 변경1. Presenter 로직 후 Store로 dispatch 한다.2. View에서 Store를 구독한다.
![Page 91: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/91.jpg)
마무리
Seoul
![Page 92: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/92.jpg)
Flux, Redux, MVI 잊어버려도 괜찮아요
![Page 93: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/93.jpg)
- View에 영향을 주는 State는 한 방향으로만 수정할 수 있다. 단방향- 앞의 액션이 끝나지 않으면 뒤 액션을 실행하지 않는다. 동기적 실행- Model은 State를 변화시키고, View는 State를 참조만 한다. View와 State 분리
Uni-Directional Architecture (UDA) Core 복습!!!
![Page 94: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/94.jpg)
UDA 아이디어를 통해 여러분의 앱을
더 쉽게 안정적으로 관리해보세요!
![Page 95: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/95.jpg)
Flux: http://facebook.github.io/fluxRedux: https://redux.js.org역시 Redux: https://www.slideshare.net/dalinaum/redux-55650128
MVI: http://hannesdorfmann.com/android/model-view-intentUDA: https://academy.realm.io/kr/posts/eric-maxwell-uni-directional-architecture-android-using-realmSample Code: https://github.com/maryangmin/GDG-Flux-Redux-MVI
Reference
![Page 96: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/96.jpg)
감사합니다!
이승민, GDE Android Korea@maryangmin
Seoul
![Page 97: Data Uni-Directional Architecture in Android · 2018-11-10 · 목차 1. 세션 목표 2. 현 구조의 문제점 3. Data Uni-Directional Architecture (UDA) 4. Flux 5. Redux 6. MVI](https://reader033.vdocuments.pub/reader033/viewer/2022050200/5f5417ae43f9e513bc6e143f/html5/thumbnails/97.jpg)
Q&A
Seoul