RxJSで状態を管理する / state management by RxJS

Transcript

1. RxJS Ͱঢ়ଶΛ؅ཧ͢Δ Meguro.es #15 @ Drecom
2. ࣗݾ঺հ • ੢ాխത • @adwd118 (twitter) • @adwd (github) • ~2018/1 Bizreach • 2018/2~ Mercari/Merpay
3. RxJS
4. RxJS • ΠϕϯτɾඇಉظΛѻ͏ϥΠϒϥϦ • C#(ຊՈ), Java, Swift, JSͳͲͳͲͷ࣮૷͕͋Δ • ๛෋ͳAPIͰඇಉظΛ͔͋ͭ͑Δ • Angular͸RxJSΛ࢖͍ͬͯΔ
5. RxJSͷAPI • ͨ͘͞Μ͋ΔͷͰࠓճ࢖͏΍͚ͭͩ • Observable • Subject • BehaviorSubject • operators • map/filter/switchMap/debounceTime …
6. Observable • ඇಉظʹσʔλ͕ྲྀΕͯ͘ΔΦϒδΣΫτ • addEventListenerΈ͍ͨͳͷ • ஋͕Կճ΋དྷΔPromiseΈ͍ͨͳͷ
7. 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
8. Subject • ஋Λྲྀ͢ϝιου΋ੜ͑ͯΔObservable • Subject#next
9. Subject const myEvent = new Subject(); myEvent.subscribe(ev => console.log(‘event: ‘ + ev)); myEvent.next(‘hi’) // event: hi myEvent.next(‘yo’) // event: yo
10. BehaviorSubject • ݱࡏͷ஋Λอ͍࣋ͯ͠ΔSubject • Subjectͱͷࠩҟ • BehaviorSubject#getValue() • BehaviorSubject.subscribeͨ͠ॠؒʹݱࡏ ͷ஋͕ྲྀΕͯ͘Δ
11. 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
12. BehaviorSubject = Flux • BehaviorSubject͕΄΅Flux(Redux)Λ΍ͬͯ͘ΕΔ • BS#next => action • BS#subscribe => connect(react-redux) • combineLatest => combineReducers • (BehaviorSubject͡Όͳͯ͘Observableʹͳ Δ)
13. create-subscription • https://github.com/facebook/react/tree/ master/packages/create-subscription • reactνʔϜެࣜͷύοέʔδ • BehaviorSubjectΛσʔλιʔεͱ͢Δαϯϓ ϧ͕υΩϡϝϯτʹॻ͍ͯ͋Δ • Observableͷػӡʁ
14. 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>
15. examples
16. 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} />
17. 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} />
18. αϯϓϧίʔυ • https://github.com/adwd/react-rxjs-todomvc • reduxjs/reduxͷtodomvc exampleΛϕʔε ʹͯ͠ஔ͖׵࣮͑ͨ૷
19. RxJSʹͯ͠Կ͕͍͍ͷ͔ • ๛෋ͳΦϖϨʔλͰReduxͷselector΍ɺmiddlewareΛ ͔ͭͬͯ΍ͬͯͨdebounceͱ͔͕؆୯ʹͰ͖Δ • Reduxͱൺ΂Δͱ • actionɺswitchจͱ͔ॻ͔ͳ͍͍ͯ͘ • MobXͱൺ΂Δͱ • ϚδοΫײ͕ͳ͍ʢRxJSʹϚδοΫײ͸ด͡ΒΕΔʣ
20. RxJSͷΑ͘ͳ͍ͱ͜ • ֶशίετ • APIׂ͕ͱେ͖͘มΘΔʁ(v5 -> v6)
21. BehaviorSubjectͰFluxͰ͖ͨ • ͋ͱ͸HoCͳΓͰBSɺؔ਺΁ͷࢀরΛίϯ ϙʔωϯτʹ༩͑ͯ΍Ε͹͍͍ • ୯७ʹexport constͰఆٛͯͦ͠ΕΛ௚઀ίϯ ϙʔωϯτ͔Βࢀর͢Δͷ΋Ͱ͖Δ
22. ࢓ࣄͷϓϩδΣΫτʹ౤ೖத • Google Mapͷ্Ͱ͍Ζ͍Ζ͢ΔΞϓϦ • ϚοϓͷυϥοάʹԠͯ͡ൣғ಺ͷϞϊΛݕࡧ͢ΔAPIΛୟ ͘ • ݱࡏ஍Λnavigator.geolocation.watchPositionͰlistenͯ͠ ϓϩοτ͢Δ • ·ͩ·ͩվળ఺͸ͨ͘͞Μ͋Δ • ΍ͬͯΔ࠷தʹผϓϩδΣΫτʹҟಈ
23. ·ͱΊ • ࢓ࣄͰRedux -> RxJSʹ͍ͯͨ͠ • ࣗ෼ͱͯ͠͸͘͢͝ྑ͘ͳͬͨ • Ҿ͖ܧ͍ͩΤϯδχΞ͕RxJS஌Βͳ͍৔߹… • GoogleͷAdWordsνʔϜ͕Flutter/AngularDartͰࣅͨΑ ͏ͳ͜ͱ(BLoC)΍ͬͯͨ • DartConf, Google I/O 2018ʹτʔΫ͕͋Δ
24. ͓ΘΓ