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

Transcript

1. RxJS Ͱঢ়ଶΛ؅ཧ͢Δ
   Meguro.es #15 @ Drecom
   

   View Slide

2. ࣗݾ঺հ
   • ੢ాխത
   • @adwd118 (twitter)
   • @adwd (github)
   • ~2018/1 Bizreach
   • 2018/2~ Mercari/Merpay
   

   View Slide

3. RxJS
   

   View Slide

4. RxJS
   • ΠϕϯτɾඇಉظΛѻ͏ϥΠϒϥϦ
   • C#(ຊՈ), Java, Swift, JSͳͲͳͲͷ࣮૷͕͋Δ
   • ๛෋ͳAPIͰඇಉظΛ͔͋ͭ͑Δ
   • Angular͸RxJSΛ࢖͍ͬͯΔ
   

   View Slide

5. RxJSͷAPI
   • ͨ͘͞Μ͋ΔͷͰࠓճ࢖͏΍͚ͭͩ
   • Observable
   • Subject
   • BehaviorSubject
   • operators
   • map/filter/switchMap/debounceTime …
   

   View Slide

6. Observable
   • ඇಉظʹσʔλ͕ྲྀΕͯ͘ΔΦϒδΣΫτ
   • addEventListenerΈ͍ͨͳͷ
   • ஋͕Կճ΋དྷΔPromiseΈ͍ͨͳͷ
   

   View Slide

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
   

   View Slide

8. Subject
   • ஋Λྲྀ͢ϝιου΋ੜ͑ͯΔObservable
   • Subject#next
   

   View Slide

9. Subject
   const myEvent = new Subject();
   myEvent.subscribe(ev => console.log(‘event: ‘ + ev));
   myEvent.next(‘hi’)
   // event: hi
   myEvent.next(‘yo’)
   // event: yo
   

   View Slide

10. BehaviorSubject
    • ݱࡏͷ஋Λอ͍࣋ͯ͠ΔSubject
    • Subjectͱͷࠩҟ
    • BehaviorSubject#getValue()
    • BehaviorSubject.subscribeͨ͠ॠؒʹݱࡏ
    ͷ஋͕ྲྀΕͯ͘Δ
    

    View Slide

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
    

    View Slide

12. BehaviorSubject = Flux
    • BehaviorSubject͕΄΅Flux(Redux)Λ΍ͬͯ͘ΕΔ
    • BS#next => action
    • BS#subscribe => connect(react-redux)
    • combineLatest => combineReducers
    • (BehaviorSubject͡Όͳͯ͘Observableʹͳ
    Δ)
    

    View Slide

13. create-subscription
    • https://github.com/facebook/react/tree/
    master/packages/create-subscription
    • reactνʔϜެࣜͷύοέʔδ
    • BehaviorSubjectΛσʔλιʔεͱ͢Δαϯϓ
    ϧ͕υΩϡϝϯτʹॻ͍ͯ͋Δ
    • Observableͷػӡʁ
    

    View Slide

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();
    }
    });
    
    {todos =>
    
    

    View Slide

15. examples
    

    View Slide

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);
    …
    }))
    
    

    View Slide

17. search w/ throttling
    const searchText = new BehaviorSubject(‘’);
    const searchResults = searchText.pipe(
    debounceTime(1000),
    switchMap(text => fetch(`/search?q=${text}`))
    )
    searchText.next(text)} />
    
    

    View Slide

18. αϯϓϧίʔυ
    • https://github.com/adwd/react-rxjs-todomvc
    • reduxjs/reduxͷtodomvc exampleΛϕʔε
    ʹͯ͠ஔ͖׵࣮͑ͨ૷
    

    View Slide

19. RxJSʹͯ͠Կ͕͍͍ͷ͔
    • ๛෋ͳΦϖϨʔλͰReduxͷselector΍ɺmiddlewareΛ
    ͔ͭͬͯ΍ͬͯͨdebounceͱ͔͕؆୯ʹͰ͖Δ
    • Reduxͱൺ΂Δͱ
    • actionɺswitchจͱ͔ॻ͔ͳ͍͍ͯ͘
    • MobXͱൺ΂Δͱ
    • ϚδοΫײ͕ͳ͍ʢRxJSʹϚδοΫײ͸ด͡ΒΕΔʣ
    

    View Slide

20. RxJSͷΑ͘ͳ͍ͱ͜
    • ֶशίετ
    • APIׂ͕ͱେ͖͘มΘΔʁ(v5 -> v6)
    

    View Slide

21. BehaviorSubjectͰFluxͰ͖ͨ
    • ͋ͱ͸HoCͳΓͰBSɺؔ਺΁ͷࢀরΛίϯ
    ϙʔωϯτʹ༩͑ͯ΍Ε͹͍͍
    • ୯७ʹexport constͰఆٛͯͦ͠ΕΛ௚઀ίϯ
    ϙʔωϯτ͔Βࢀর͢Δͷ΋Ͱ͖Δ
    

    View Slide

22. ࢓ࣄͷϓϩδΣΫτʹ౤ೖத
    • Google Mapͷ্Ͱ͍Ζ͍Ζ͢ΔΞϓϦ
    • ϚοϓͷυϥοάʹԠͯ͡ൣғ಺ͷϞϊΛݕࡧ͢ΔAPIΛୟ
    ͘
    • ݱࡏ஍Λnavigator.geolocation.watchPositionͰlistenͯ͠
    ϓϩοτ͢Δ
    • ·ͩ·ͩվળ఺͸ͨ͘͞Μ͋Δ
    • ΍ͬͯΔ࠷தʹผϓϩδΣΫτʹҟಈ
    

    View Slide

23. ·ͱΊ
    • ࢓ࣄͰRedux -> RxJSʹ͍ͯͨ͠
    • ࣗ෼ͱͯ͠͸͘͢͝ྑ͘ͳͬͨ
    • Ҿ͖ܧ͍ͩΤϯδχΞ͕RxJS஌Βͳ͍৔߹…
    • GoogleͷAdWordsνʔϜ͕Flutter/AngularDartͰࣅͨΑ
    ͏ͳ͜ͱ(BLoC)΍ͬͯͨ
    • DartConf, Google I/O 2018ʹτʔΫ͕͋Δ
    

    View Slide

24. ͓ΘΓ
    

    View Slide