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
Flux/Reduxって何?雑に作ってみよう / easy creation of flux
Search
erukiti
May 26, 2017
Programming
1
1k
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
鮮度が高すぎて世界で誰も正解を見つけてない課題に取り組んでいる/ Freshness issues
erukiti
1
520
実演TypeScript + GitHub Copilot
erukiti
9
3.8k
Function Calling対応Playgroundを作って検証してみた/LLMMeetup#3
erukiti
0
360
プロンプトを管理しやすくするツールを作ってみた / I created a tool to make the prompts easier to manage.
erukiti
3
1.5k
実践モブプログラミング/ mob programming practice
erukiti
3
1.3k
今日からアウトプットを始めよう / let's start the output from today
erukiti
1
600
Markdownをスクリプト言語として走らせてみた / actual-code
erukiti
0
4k
もくもく執筆会 for 技術書典5 / techbook_meepup
erukiti
0
120
#技術書典 で爆死しないために、今から始めるべきこと / first-step-techbookfest
erukiti
1
760
Other Decks in Programming
See All in Programming
Milestoner
bkuhlmann
1
410
Folding Cheat Sheet #2
philipschwarz
PRO
0
120
使ってみよう Azure AI Document Intelligence
kosmosebi
2
240
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
470
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
220
エンターテイメント業界で利用されるAWS
demuyan
0
210
コードレビューで学ぶ!Kotlinオブジェクト指向デザインパターン
akkie76
2
190
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
230
ゆるい個人開発のススメ
kuroppe1819
10
970
Featured
See All Featured
Building Adaptive Systems
keathley
30
1.9k
Designing for humans not robots
tammielis
247
25k
RailsConf 2023
tenderlove
2
530
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
A Modern Web Designer's Workflow
chriscoyier
688
190k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Atom: Resistance is Futile
akmur
258
25k
Docker and Python
trallard
33
2.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
220
21k
Writing Fast Ruby
sferik
620
60k
The Cost Of JavaScript in 2023
addyosmani
14
3.8k
Designing Experiences People Love
moore
136
23k
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ