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

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

adwd
May 23, 2018

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

adwd

May 23, 2018
Tweet

More Decks by adwd

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  13. 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 full-size slide

  14. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide