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
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
Claude Code活用において、メンタルモデルを変える必要がある / rethinking-claude-code-mental-models
erukiti
19
12k
AIとの対話で加速する学び / ai learnig
erukiti
1
330
コーディングエージェントを作ってるけどうまくいかなかった話 ~あるいは二ヶ月本気でコーディングエージェントと向き合った話~ / Two Month Agent Struggle
erukiti
38
19k
Gemini 2.0 Flashで実現する高コスパAI開発 〜実践的プロンプトエンジニアリングと文書管理システムの実装例〜/gemini-2.0-flash-prompt-engineering
erukiti
17
6.5k
LLMをねじ伏せる/Conquer the LLM
erukiti
0
220
鮮度が高すぎて世界で誰も正解を見つけてない課題に取り組んでいる/ Freshness issues
erukiti
1
870
実演TypeScript + GitHub Copilot
erukiti
9
4.4k
Function Calling対応Playgroundを作って検証してみた/LLMMeetup#3
erukiti
0
540
プロンプトを管理しやすくするツールを作ってみた / I created a tool to make the prompts easier to manage.
erukiti
3
2.1k
Other Decks in Programming
See All in Programming
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
230
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
220
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
860
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
46
31k
NPOでのDevinの活用
codeforeveryone
0
350
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
320
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.1k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
220
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.5k
Benchmark
sysong
0
270
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
530
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Docker and Python
trallard
44
3.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
GraphQLとの向き合い方2022年版
quramy
48
14k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Automating Front-end Workflow
addyosmani
1370
200k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
A designer walks into a library…
pauljervisheath
207
24k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
What's in a price? How to price your products and services
michaelherold
246
12k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ