Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
RxJSで状態を管理する / state management by RxJS
adwd
May 23, 2018
Programming
1
830
RxJSで状態を管理する / state management by RxJS
adwd
May 23, 2018
Tweet
Share
More Decks by adwd
See All by adwd
GraphQLのあまり知られていない魅力 (スキーマの表現力編) / domain modeling with GraphQL Schema
adwd
3
3.8k
Savkin先生から学んだぼくの考えた最強のAngularアプリアーキテクチャ / The best Angular application architecture
adwd
1
650
create-react-app-introduction
adwd
7
1.6k
React/Redux Introduction
adwd
17
4.6k
Other Decks in Programming
See All in Programming
ExplainableAIの概要とAmazon SageMaker Clarifyでの実装例
hacarus
0
100
Amazon SageMakerでImagenを動かして猫画像生成してみた
hotoke_neko
0
120
How to Test Your Compose UI (Droidcon Berlin 2022)
stewemetal
1
130
Windows コンテナ Dojo 第5回 OpenShift で学ぶ Kubernetes 入門
oniak3ibm
PRO
0
200
企業内スモールデータでのデータ解析
hamage9
0
900
Untangling Coroutine Testing (Droidcon Berlin 2022)
zsmb
2
490
アジャイルで始める データ分析基盤構築
nagano
1
920
サーバーレスパターンから学ぶデータ分析基盤構築 / devio2022
kasacchiful
0
510
SwiftUIで「意図」を伝える / swiftui_intention
uhooi
2
150
動画合成アーキテクチャを実装してみて
satorunooshie
0
560
「困りごと」から始める個人開発
ikumatadokoro
4
260
ECサイトの脆弱性診断をいい感じにやりたい/OWASPKansaiNight_LT1_220727
owaspkansai
0
300
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.7k
Visualization
eitanlees
125
12k
Unsuck your backbone
ammeep
659
55k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.4k
Bash Introduction
62gerente
598
210k
Code Review Best Practice
trishagee
44
9.7k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
StorybookのUI Testing Handbookを読んだ
zakiyama
6
2.5k
Mobile First: as difficult as doing things right
swwweet
213
7.6k
How to Ace a Technical Interview
jacobian
267
21k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
6k
Transcript
RxJS Ͱঢ়ଶΛཧ͢Δ Meguro.es #15 @ Drecom
ࣗݾհ • ాխത • @adwd118 (twitter) • @adwd (github) •
~2018/1 Bizreach • 2018/2~ Mercari/Merpay
RxJS
RxJS • ΠϕϯτɾඇಉظΛѻ͏ϥΠϒϥϦ • C#(ຊՈ), Java, Swift, JSͳͲͳͲͷ࣮͕͋Δ • ๛ͳAPIͰඇಉظΛ͔͋ͭ͑Δ
• AngularRxJSΛ͍ͬͯΔ
RxJSͷAPI • ͨ͘͞Μ͋ΔͷͰࠓճ͏͚ͭͩ • Observable • Subject • BehaviorSubject •
operators • map/filter/switchMap/debounceTime …
Observable • ඇಉظʹσʔλ͕ྲྀΕͯ͘ΔΦϒδΣΫτ • addEventListenerΈ͍ͨͳͷ • ͕ԿճདྷΔPromiseΈ͍ͨͳͷ
const obs1 = Rx.Observable.interval(1000); obs1.subscribe(count => console.log(‘count: ‘ + count));
// count: 1 // count: 2 // count: 3 const obs2 = Rx.Observable.fromEvent(document.body, ‘click') obs2.pipe( map(ev => ({ x: ev.clientX, y: ev.clientY })), filter(pos => pos.x > 400), ).subscribe(ev => console.log(ev)) // { x: 1000, y: 1000 } // { x: 1000, y: 200 } ग़ྗ͞Εͳ͍ Observable
Subject • Λྲྀ͢ϝιουੜ͑ͯΔObservable • Subject#next
Subject const myEvent = new Subject(); myEvent.subscribe(ev => console.log(‘event: ‘
+ ev)); myEvent.next(‘hi’) // event: hi myEvent.next(‘yo’) // event: yo
BehaviorSubject • ݱࡏͷΛอ͍࣋ͯ͠ΔSubject • Subjectͱͷࠩҟ • BehaviorSubject#getValue() • BehaviorSubject.subscribeͨ͠ॠؒʹݱࡏ ͷ͕ྲྀΕͯ͘Δ
BehaviorSubject // ॳظΛίϯετϥΫλͷҾʹऔΔɹ const myTodos = new BehaviorSubject([]); myTodos.subscribe(todos =>
console.log(‘todos: ‘ + todos.length)); // todos: 0 // subscribeͨ͠ॠ͕ؒྲྀΕͯ͘Δ myTodos.next([ { id: 1, text: ‘do something’ } ]); // todos: 1
BehaviorSubject = Flux • BehaviorSubject͕΄΅Flux(Redux)Λͬͯ͘ΕΔ • BS#next => action •
BS#subscribe => connect(react-redux) • combineLatest => combineReducers • (BehaviorSubject͡Όͳͯ͘Observableʹͳ Δ)
create-subscription • https://github.com/facebook/react/tree/ master/packages/create-subscription • reactνʔϜެࣜͷύοέʔδ • BehaviorSubjectΛσʔλιʔεͱ͢Δαϯϓ ϧ͕υΩϡϝϯτʹॻ͍ͯ͋Δ •
Observableͷػӡʁ
create-subscription example import { createSubscription } from ‘create-subscription’; const BehaviorSubscription
= createSubscription({ getCurrentValue: behaviorSubject => behaviorSubject.getValue(), subscribe: (behaviorSubject, callback) => { const subscription = behaviorSubject.subscribe(callback); return () => subscription.unsubscribe(); } }); <BehaviorSubscription source={myTodos}> {todos => <TodoList todos={todos} /> </BehaviorSubscription>
examples
Todomvc const todos = new BehaviorSubject([]); const addTodo = text
=> { const current = todos.getValue(); todos.next([…current, { text, id: newId() }]); }; const filter = new BehaviorSubject(‘all’); // all, active, completed const filteredTodos = combineLatest(todos, filter) .pipe(map(v => switch(v.filter) { case ‘all’: return todos; case ‘active: return todos.filter(t => !t.completed); … })) <Todos todos={filteredTodos} onFilterChange={filter.next} addTodo={addTodo} />
search w/ throttling const searchText = new BehaviorSubject(‘’); const searchResults
= searchText.pipe( debounceTime(1000), switchMap(text => fetch(`/search?q=${text}`)) ) <SearchTextInput onChange={text => searchText.next(text)} /> <SearchResults results={searchResults} />
αϯϓϧίʔυ • https://github.com/adwd/react-rxjs-todomvc • reduxjs/reduxͷtodomvc exampleΛϕʔε ʹͯ͠ஔ͖࣮͑ͨ
RxJSʹͯ͠Կ͕͍͍ͷ͔ • ๛ͳΦϖϨʔλͰReduxͷselectorɺmiddlewareΛ ͔ͭͬͯͬͯͨdebounceͱ͔͕؆୯ʹͰ͖Δ • ReduxͱൺΔͱ • actionɺswitchจͱ͔ॻ͔ͳ͍͍ͯ͘ • MobXͱൺΔͱ
• ϚδοΫײ͕ͳ͍ʢRxJSʹϚδοΫײด͡ΒΕΔʣ
RxJSͷΑ͘ͳ͍ͱ͜ • ֶशίετ • APIׂ͕ͱେ͖͘มΘΔʁ(v5 -> v6)
BehaviorSubjectͰFluxͰ͖ͨ • ͋ͱHoCͳΓͰBSɺؔͷࢀরΛίϯ ϙʔωϯτʹ༩͑ͯΕ͍͍ • ୯७ʹexport constͰఆٛͯͦ͠ΕΛίϯ ϙʔωϯτ͔Βࢀর͢ΔͷͰ͖Δ
ࣄͷϓϩδΣΫτʹೖத • Google Mapͷ্Ͱ͍Ζ͍Ζ͢ΔΞϓϦ • ϚοϓͷυϥοάʹԠͯ͡ൣғͷϞϊΛݕࡧ͢ΔAPIΛୟ ͘ • ݱࡏΛnavigator.geolocation.watchPositionͰlistenͯ͠ ϓϩοτ͢Δ
• ·ͩ·ͩվળͨ͘͞Μ͋Δ • ͬͯΔ࠷தʹผϓϩδΣΫτʹҟಈ
·ͱΊ • ࣄͰRedux -> RxJSʹ͍ͯͨ͠ • ࣗͱͯ͘͢͠͝ྑ͘ͳͬͨ • Ҿ͖ܧ͍ͩΤϯδχΞ͕RxJSΒͳ͍߹… •
GoogleͷAdWordsνʔϜ͕Flutter/AngularDartͰࣅͨΑ ͏ͳ͜ͱ(BLoC)ͬͯͨ • DartConf, Google I/O 2018ʹτʔΫ͕͋Δ
͓ΘΓ