Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React非同期ライブラリを知る
Search
nitaking
September 28, 2018
0
160
React非同期ライブラリを知る
rxjs redux-observableについて
nitaking
September 28, 2018
Tweet
Share
More Decks by nitaking
See All by nitaking
人は30分でLT資料を作って発表できるのか
nitaking
0
200
React Native ことはじめ
nitaking
0
220
2021-06-24 最近のビルドツール調べてみた
nitaking
0
110
Fishのススメ
nitaking
0
61
Blitz.jsの紹介
nitaking
1
970
Expo WEB × Next.js は実用できるのか?
nitaking
3
1k
react-hooks-loggerつくった話
nitaking
0
470
あの震えるインタラクションを実装したい
nitaking
1
1.3k
アプリリリースまでのつらみあれこれ
nitaking
0
570
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Automating Front-end Workflow
addyosmani
1369
200k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Typedesign – Prime Four
hannesfritz
41
2.5k
RailsConf 2023
tenderlove
29
1k
Faster Mobile Websites
deanohume
306
31k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
11
540
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Transcript
Reactͷඇಉظॲཧ ϥΠϒϥϦΛΔ bruno / @nitaking_ エアークローゼット
About ɾSatoshi Nitawaki ɾࣾͰbrunoͱݺΕ͍ͯ·͢ ɾܦྺɿࣾSE / SIer ɾݴޠɿJava / PHP
7 / Laravel / ɹɹɹɹReact Native(React) ͳͲ
About ຊञͱԬ͕͖ͳΤϯδχΞͳͷͰ ͖ͳํ͜ͷޙ͠·͠ΐ͏ʂ
observableがキてるよ observableで Qiita書いた
Redux-Observable ͬͯͳΜͩ
None
RxJS 6-based middleware for Redux.
RxJS ͬͯͳΜͩ
৮ͬͯΈͨ
BufferCount: count͚ͩόοϑΝ Subscribe: Observer͕σʔλΛߪಡ(?)
৮ͬͯΈͨ
BufferWhen: fn͕ൃՐ͢Δ·ͰόοϑΝ͢Δ
γϦΞϧ௨৴ॲཧͬΆ͍ײ͡
センサ メイン機器 100ms毎とかで 送信 5000ms毎に データ回収 γϦΞϧ௨৴͜Μͳײ͡Ͱͨ͠
Redux-observable ʹͬͯ…
Ͳ͏ͬͯReduxͱ RxJS(ReactiveX)ͷ֓೦Λ Έ߹Θ͍ͤͯΔ͔ʁ
Action In , Action Out ͷ֓೦ ΠϥετɿTomas Nilsson Ҿ༻ɿhttps://makeitnew.io/epic-reactive-programming-with-redux-observable-eff4d3fb952f Epic:
͋ΔఔactionΛόοϑΝˍҰؾʹactionΛ࣮ߦ
ͳʹ͕Ͱ͖Δʁ ɾఆظతͳRequest ʢϙʔϦϯάʣ ɾϙʔϦϯάͷΩϟϯηϧ …etcɹ takeUntil: Ҿ͕؍ଌ͞ΕΔ·ͰΛ์ग़ => actionʹNAVIGATE_BACK͕དྷͨΒϙʔϦϯάΊΔ
ଞϥΠϒϥϦͱͷҧ͍ redux-thunkɿ ɹγϯϓϧɺͦͷෳࡶͳॲཧۤख(?) ɹdispatchࡁΈΞΫγϣϯͷΩϟϯηϧ͕ෆՄ redux-Observableɿ ɹΞΫγϣϯΛϙʔϦϯάͰ࣮ߦͨ͠ΓͰ͖Δ ɹdispatchࡁΈΞΫγϣϯͷΩϟϯηϧ͕Մೳ redux-sagaɿ ɹgeneratorؔʹΑΔ࣮ͷͨΊඇಉظॲཧͷதͰಉظతʹ࣮ ɹdispatchࡁΈΞΫγϣϯͷΩϟϯηϧ͕ෆՄ
ͱɺݴΘΕ͍ͯΔ
ReduxඇಉظϥΠϒϥϦ ɾେখؚΊΕ10ݸۙ͋͘Δ ɾٞͷత̏େϥΠϒϥϦ ɹ(saga/thunk/observable) ɾthunk × saga or observable ͍͍Αͱ͍͏આ
ɾRxJSͷ֓ཁͳΜͱͳ͘Θ͔͕ͬͨ ɾ·ͩ·ͩRxJSͷཧղ͕ඞཁͦ͏ɻएׯͷϋʔυϧʁ ɹ=> ͨͩ͠ɺJSҎ֎ʹݴޠԣஅతʹReactiveXͷ֓೦͑Δɹɹ ɹɹ=> େ͖ͳֶशίετͰͳ͍ʁ ɾReactiveXͷ֓೦͕γϦΞϧ௨৴ʹࣅͯͨ ɾsagaͱobservableൺֱ͞Ε͕͕ͪͩ༻ײҟͳΔʁʁ
͋Γ͕ͱ͏͍͟͝·ͨ͠