Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

752892b8463a058168636e8aba80be6f?s=47 adwd
May 23, 2018

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

752892b8463a058168636e8aba80be6f?s=128

adwd

May 23, 2018
Tweet

More Decks by adwd

Other Decks in Programming

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. ͓ΘΓ