Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Flux/Reduxって何?雑に作ってみよう / easy creation of flux
erukiti
May 26, 2017
Programming
1
890
Flux/Reduxって何?雑に作ってみよう / easy creation of flux
第1回 React.js 導入事例の発表資料です。
Flux/Reduxとは何かという説明と、実際にFluxを作ってみようというものです。
erukiti
May 26, 2017
Tweet
Share
More Decks by erukiti
See All by erukiti
実践モブプログラミング/ mob programming practice
erukiti
3
790
今日からアウトプットを始めよう / let's start the output from today
erukiti
1
400
Markdownをスクリプト言語として走らせてみた / actual-code
erukiti
0
3.4k
もくもく執筆会 for 技術書典5 / techbook_meepup
erukiti
0
74
#技術書典 で爆死しないために、今から始めるべきこと / first-step-techbookfest
erukiti
1
670
修羅場を支えるテクニック / Technique of SHURA battlefield
erukiti
1
880
暗号通貨・ブロックチェーンをたしなむ JSフレンズ -初夏のJavaScript祭 in サーキュレーションビル ForPro- / crypto coin js
erukiti
1
610
暗号技術たーのしー / 5-14-techbook-meetup
erukiti
0
72
ライトニングネットワーク完全に理解した (わかってない) / lightning-network
erukiti
2
1.8k
Other Decks in Programming
See All in Programming
Named Document って何?
harunakano
0
300
The future of trust stores in Python
sethmlarson
0
180
Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022
manfredsteyer
PRO
0
290
質とスピード(2022春版、質疑応答用資料付き) / Quality and Speed 2022 Spring Edition
twada
PRO
28
18k
Keep Your Cache Always Fresh With Debezium
gunnarmorling
0
180
ゴーファーくんと学ぶGo言語の世界/golang-world-with-gopher
iwasiman
1
150
バンドル最適化マニアクス at tfconf
mizchi
3
2k
heyにおけるSREの大切さ~マルチプロダクト運用の「楽しさ」と「難しさ」および今後の展望~
fufuhu
3
1.5k
Git Rebase
bkuhlmann
7
1k
WindowsコンテナDojo:準備編
oniak3ibm
PRO
0
470
Milestoner
bkuhlmann
1
200
SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計
ahomu
3
1.6k
Featured
See All Featured
Building an army of robots
kneath
299
40k
Faster Mobile Websites
deanohume
294
28k
Designing Experiences People Love
moore
130
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
890
Robots, Beer and Maslow
schacon
152
7.1k
GraphQLとの向き合い方2022年版
quramy
16
8.1k
Rails Girls Zürich Keynote
gr2m
86
12k
Thoughts on Productivity
jonyablonski
43
2.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
268
11k
Transcript
Flux/ReduxͬͯԿʁ ࡶʹ࡞ͬͯΈΑ͏ erukiti
erukiti (͑Δ͖ͪ) • ES2016େ͖ (ES5ҎલΨϯແࢹελΠϧ) • ͍ͨͩ·ٳཆத • Switchങ͍·ͨ͠ (θϧμ125࣌ؒҎ্ɺϚϦ
ΦΧʔτ15࣌ؒҎ্ϓϨΠ)
ٕज़ॻయ2Ͱຊͩ͠·ͨ͠ • ٕज़ॻయ2࠷ߴͰͨ͠ɻ • Impress R&D͞·ͰۀԽ ͷ࡞ۀ͕ਐߦதͰ͢ɻ ͷਐḿχϟΦεͰ͢ɻ https://tk-rabbit-house.booth.pm/items/489874
ࠓͷ༰ • Reactʹ͖ͷͷFlux/ReduxͱԿ͔ • FluxΛ؆୯ʹ࡞Δ
FluxReduxͬͯԿʁ
FluxσβΠϯύλʔϯ • σʔλϑϩʔΛҰํ௨ߦʹ͢Δͱ͍͏σβΠ ϯύλʔϯ • Facebook͕ࣾಉ໊͡લͷϥΠϒϥϦ࡞ͬͯΔ • ObserverύλʔϯͱCommandύλʔϯͷ Έ߹Θͤ ฆΒΘ͍͠
͜ΜͳਤΛݟͨ͜ͱ͋Γ·͔͢ʁ Action Dispatcher Store View Action
ActionΛ͛Δ(dispatch͢Δ)
ঢ়ଶཧStoreͷ͠͝ͱ • StoreΞϓϦͷঢ়ଶ(State)Λ࣋ͭ • ͛ΒΕͨActionΛreducerͰঢ়ଶΛߋ৽ • ߋ৽ͨ͠ΒViewʹ௨Λඈ͢
Viewγϯϓϧʹ • Store͔Βͷߋ৽௨Ͱඳը (Observer) • Ϣʔβʔ͔ΒͷೖྗActionΛdispatch͢Δ • ࣮ViewReactҎ֎ͰOK
͓͞Β͍ Action Dispatcher Store View Action
Կ͕͏Ε͍͠ͷʁ • σʔλͷྲྀΕ͕୯७Խ͢Δ • Λ໌֬ʹ͚ΒΕΔ (༨͕͋Δ) • ͦΕΒʹΑͬͯૄ݁߹ʹͰ͖Δ
Redux? Action Store View Action
ReduxͱFluxͷҧ͍ • FluxͰDispatcherγϯάϧτϯͰStore ෳ࣋ͯΔ • ͦΕͳΒStoreΛγϯάϧτϯʹ͢Ε Dispatcher͍Βͳ͍ࢠͳͷͰʁ • ͱ͍͏ׂΓΓΛ࣮͕ͨ͠Redux
FluxΛ࡞ͬͯΈΔ
ϕʔεͱͳΔReact Component
None
Storeͷׂ • ঢ়ଶͷอ࣋ͱมߋ • มߋͨ͠Β௨Λඈ͢
None
reducerϏδωεϩδοΫ • reducerActionΛݩʹStateΛมߋ͢Δํ๏ ͚ͩΛهͨ͠ͷ • stateʹॳظΛೖΕͯΔͷReduxͷΓํ
React ComponentΛมߋ͢Δ
·ͩsetState͕ͬͯΔ݅ • Store࡞ͬͯdispatch࣮͚ͨ͠Ͳɺ·ͩ setState͕ͬͯ͠·͍ͬͯΔɻ • Ͳ͏ͤFluxಋೖ͢ΔΜ͔ͩΒprops͚͍ͩͨ ͍ • Ͳ͏͢ΕpropsΛߋ৽(?)Ͱ͖Δͷ͔ʁ
propsΛߋ৽(?)͢Δํ๏ 1. react-domͷrenderΛ໌ࣔతʹୟ͘ 2. ରͷComponentΛߋ৽͢ΔͨΊͷϥο ύʔΛ࡞Δ (react-reduxํࣜ) ΄͔ʹΓํ͋Δ͔ʁ
None
None
Θʔ͍ɺͨʔͷ͠ʔ
՝ • ࡶʹ࡞ͬͨͭͳͷͰɺ͋ͱͪΐͬͱΈ ΛՃ͑ͳ͍ͱϥΠϒϥϦԽͰ͖ͳ͍ɻ • ReduxͰͦ͏͚ͩͲɺඇಉظॲཧΛͲ͜ʹ ஔ͘ͷʁ
·ͱΊ • Modern JavaScript ͍ͨͩ·boothͰൃചதͰ ͢ɻۀ൛͕ਐߦதͰ͢ɻ • FluxΞϓϦΛγϯϓϧʹ͢ΔͨΊͷσβΠϯ ύλʔϯ (ͳͷͰɺReactҎ֎ʹ͑Δ)
• Flux؆୯ʹ࡞ΕΔ https://tk-rabbit-house.booth.pm/items/489874
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ