$30 off During Our Annual Pro Sale. View Details »
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
Codex時代の新たなバイブコーディングワークフロー/ after Codex workflow
erukiti
8
3.2k
Claude Codeを使って不確実性と戦う / claude-code-fights-uncertainty
erukiti
10
4.1k
Claude Code活用において、メンタルモデルを変える必要がある / rethinking-claude-code-mental-models
erukiti
20
14k
AIとの対話で加速する学び / ai learnig
erukiti
1
760
コーディングエージェントを作ってるけどうまくいかなかった話 ~あるいは二ヶ月本気でコーディングエージェントと向き合った話~ / Two Month Agent Struggle
erukiti
40
20k
Gemini 2.0 Flashで実現する高コスパAI開発 〜実践的プロンプトエンジニアリングと文書管理システムの実装例〜/gemini-2.0-flash-prompt-engineering
erukiti
17
6.8k
LLMをねじ伏せる/Conquer the LLM
erukiti
0
250
鮮度が高すぎて世界で誰も正解を見つけてない課題に取り組んでいる/ Freshness issues
erukiti
1
920
実演TypeScript + GitHub Copilot
erukiti
9
4.5k
Other Decks in Programming
See All in Programming
リリース時」テストから「デイリー実行」へ!開発マネージャが取り組んだ、レガシー自動テストのモダン化戦略
goataka
0
130
Navigating Dependency Injection with Metro
l2hyunwoo
1
150
堅牢なフロントエンドテスト基盤を構築するために行った取り組み
shogo4131
8
2.4k
チームをチームにするEM
hitode909
0
350
組み合わせ爆発にのまれない - 責務分割 x テスト
halhorn
1
150
GISエンジニアから見たLINKSデータ
nokonoko1203
0
170
20251212 AI 時代的 Legacy Code 營救術 2025 WebConf
mouson
0
200
Microservices rules: What good looks like
cer
PRO
0
1.5k
ZOZOにおけるAI活用の現在 ~モバイルアプリ開発でのAI活用状況と事例~
zozotech
PRO
9
5.8k
JETLS.jl ─ A New Language Server for Julia
abap34
1
420
生成AIを利用するだけでなく、投資できる組織へ
pospome
2
370
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
syumai
7
2.3k
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
0
390
SEO for Brand Visibility & Recognition
aleyda
0
4.1k
Crafting Experiences
bethany
0
19
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Making Projects Easy
brettharned
120
6.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.3k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandezseo
1
1.3k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
A Tale of Four Properties
chriscoyier
162
23k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.6k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
0
83
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ