Tweet
Tweet

Slide 1

Slide 1 text

Reactͷඇಉظॲཧ ϥΠϒϥϦΛ஌Δ bruno / @nitaking_ エアークローゼット

Slide 2

Slide 2 text

About ɾSatoshi Nitawaki ɾࣾ಺Ͱ͸brunoͱݺ͹Ε͍ͯ·͢ ɾܦྺɿࣾ಺SE / SIer ɾݴޠɿJava / PHP 7 / Laravel / ɹɹɹɹReact Native(React) ͳͲ

Slide 3

Slide 3 text

About ೔ຊञͱ෱Ԭ͕޷͖ͳΤϯδχΞͳͷͰ ޷͖ͳํ͸͜ͷޙ࿩͠·͠ΐ͏ʂ

Slide 4

Slide 4 text

observableがキてるよ observableで Qiita書いた

Slide 5

Slide 5 text

Redux-Observable ͬͯͳΜͩ

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

RxJS 6-based middleware for Redux.

Slide 8

Slide 8 text

RxJS ͬͯͳΜͩ

Slide 9

Slide 9 text

৮ͬͯΈͨ

Slide 10

Slide 10 text

BufferCount: count͚ͩόοϑΝ Subscribe: Observer͕σʔλΛߪಡ(?)

Slide 11

Slide 11 text

৮ͬͯΈͨ

Slide 12

Slide 12 text

BufferWhen: fn͕ൃՐ͢Δ·ͰόοϑΝ͢Δ

Slide 13

Slide 13 text

γϦΞϧ௨৴ॲཧͬΆ͍ײ͡

Slide 14

Slide 14 text

センサ メイン機器 100ms毎とかで 送信 5000ms毎に データ回収 γϦΞϧ௨৴͸͜Μͳײ͡Ͱͨ͠

Slide 15

Slide 15 text

Redux-observable ʹ໭ͬͯ…

Slide 16

Slide 16 text

Ͳ͏΍ͬͯReduxͱ RxJS(ReactiveX)ͷ֓೦Λ ૊Έ߹Θ͍ͤͯΔ͔ʁ

Slide 17

Slide 17 text

Action In , Action Out ͷ֓೦ ΠϥετɿTomas Nilsson Ҿ༻ɿhttps://makeitnew.io/epic-reactive-programming-with-redux-observable-eff4d3fb952f Epic: ͋Δఔ౓actionΛόοϑΝˍҰؾʹactionΛ࣮ߦ

Slide 18

Slide 18 text

ͳʹ͕Ͱ͖Δʁ ɾఆظతͳRequest ʢϙʔϦϯάʣ ɾϙʔϦϯάͷΩϟϯηϧ …etcɹ takeUntil: Ҿ਺஋͕؍ଌ͞ΕΔ·Ͱ஋Λ์ग़ => actionʹNAVIGATE_BACK͕དྷͨΒϙʔϦϯά΍ΊΔ

Slide 19

Slide 19 text

ଞϥΠϒϥϦͱͷҧ͍ redux-thunkɿ ɹγϯϓϧɺͦͷ෼ෳࡶͳॲཧ͸ۤख(?) ɹdispatchࡁΈΞΫγϣϯͷΩϟϯηϧ͕ෆՄ redux-Observableɿ ɹΞΫγϣϯΛϙʔϦϯάͰ࣮ߦͨ͠ΓͰ͖Δ ɹdispatchࡁΈΞΫγϣϯͷΩϟϯηϧ͕Մೳ redux-sagaɿ ɹgeneratorؔ਺ʹΑΔ࣮૷ͷͨΊඇಉظॲཧͷதͰಉظతʹ࣮૷ ɹdispatchࡁΈΞΫγϣϯͷΩϟϯηϧ͕ෆՄ ͱɺݴΘΕ͍ͯΔ

Slide 20

Slide 20 text

ReduxඇಉظϥΠϒϥϦ ɾେখؚΊΕ͹10ݸۙ͋͘Δ ɾٞ࿦ͷత͸̏େϥΠϒϥϦ ɹ(saga/thunk/observable) ɾthunk × saga or observable ΋͍͍Αͱ͍͏આ΋

Slide 21

Slide 21 text

ɾRxJSͷ֓ཁ͸ͳΜͱͳ͘Θ͔͕ͬͨ ɾ·ͩ·ͩRxJSͷཧղ͕ඞཁͦ͏ɻएׯͷϋʔυϧʁ ɹ=> ͨͩ͠ɺJSҎ֎ʹ΋ݴޠԣஅతʹReactiveXͷ֓೦͸࢖͑Δɹɹ ɹɹ=> େ͖ͳֶशίετͰ͸ͳ͍ʁ ɾReactiveXͷ֓೦͕γϦΞϧ௨৴ʹࣅͯͨ ɾsagaͱobservable͸ൺֱ͞Ε͕͕ͪͩ࢖༻ײ͸ҟͳΔʁʁ

Slide 22

Slide 22 text

͋Γ͕ͱ͏͍͟͝·ͨ͠