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
180
React非同期ライブラリを知る
rxjs redux-observableについて
nitaking
September 28, 2018
Tweet
Share
More Decks by nitaking
See All by nitaking
人は30分でLT資料を作って発表できるのか
nitaking
0
250
React Native ことはじめ
nitaking
0
250
2021-06-24 最近のビルドツール調べてみた
nitaking
0
140
Fishのススメ
nitaking
0
73
Blitz.jsの紹介
nitaking
1
1k
Expo WEB × Next.js は実用できるのか?
nitaking
3
1k
react-hooks-loggerつくった話
nitaking
0
510
あの震えるインタラクションを実装したい
nitaking
1
1.5k
アプリリリースまでのつらみあれこれ
nitaking
0
670
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.6k
A Tale of Four Properties
chriscoyier
162
23k
Code Reviewing Like a Champion
maltzj
527
40k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Automating Front-end Workflow
addyosmani
1371
200k
Side Projects
sachag
455
43k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
51k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Why You Should Never Use an ORM
jnunemaker
PRO
60
9.6k
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ൺֱ͞Ε͕͕ͪͩ༻ײҟͳΔʁʁ
͋Γ͕ͱ͏͍͟͝·ͨ͠