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
Redux のディレクトリ構成を考える
Search
sota ohara
February 01, 2018
Programming
2
15k
Redux のディレクトリ構成を考える
sota ohara
February 01, 2018
Tweet
Share
More Decks by sota ohara
See All by sota ohara
Re-Architecture of ReactNative
sottar
0
270
Implement prerendering w/ puppeteer
sottar
1
290
create own CMS from scratch
sottar
2
9k
Let’s try to hack AST of JavaScript
sottar
1
1.8k
フロントエンドエンジニアが伝えたい最近の事情
sottar
28
18k
複数人で高速に開発するためのnpmモジュール
sottar
5
2.6k
new version of context in React 16.3
sottar
3
1.7k
2ヶ月半でサービスをリリースした話し
sottar
2
2.2k
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
sottar
9
5k
Other Decks in Programming
See All in Programming
MLH State of the League: 2026 Season
theycallmeswift
0
100
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
990
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
670
The State of Fluid (2025)
s2b
0
180
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
990
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
170
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
22
8.6k
decksh - a little language for decks
ajstarks
4
21k
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
880
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
290
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
2
540
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Become a Pro
speakerdeck
PRO
29
5.5k
Into the Great Unknown - MozCon
thekraken
40
2k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
Redux ͷσΟϨΫτϦߏΛߟ͑Δ גࣜձࣾϝϧΧϦ ϑϩϯτΤϯυΤϯδχΞ େݪᆴଠ
େݪ ᆴଠ / sottar גࣜձࣾϝϧΧϦ ϑϩϯτΤϯυΤϯδχΞ mercari NOW, CSTool React,
Redux sottar_ About me sottar
ฐࣾͷ JavaScript νϟϯωϧ ݁ߏΈΜͳσΟϨΫτϦߏΜͰΔɻɻ
ੈͷ Redux ͍ΜͰΔ https://redux.js.org/docs/faq/CodeStructure.html#code-structure
ੈͷ Redux ͍ΜͰΔ https://redux.js.org/docs/faq/CodeStructure.html#code-structure
̎ͭͷ • component ઃܭ • store ઃܭ
component ઃܭ
component ઃܭ Container component ͱ Presentational component Λͤ͞Δ
component ઃܭ • Container component • react-redux.connect() Λͬͯ redux ʹͭͳ͙
• Presentational component • view ͷΈΛѻ͏ component • react ͷΈͰ݁ͤ͞Δ
component ઃܭ • ͜Μͳײ͡ͷσΟϨΫτϦߏ
component ઃܭ • ͜Μͳײ͡ͷσΟϨΫτϦߏ
component ઃܭ Home.js (Container component)
component ઃܭ HomeContents.js (Presentational Component)
Store ઃܭ
Store ઃܭ https://redux.js.org/docs/faq/CodeStructure.html#code-structure Rails-styleɹɹDomain-styleɹɹDucks
͜͜Ͱ͍͏ Store ઃܭͱ
Store ઃܭͱ View Actions Reducers Store Store ઃܭͷൣғ → ͭ·Γ
View Ҏ֎
Rails style
Rails style • ׂ (actions, constants, reducers, containers, components) ͝ͱʹσΟϨΫτϦΛ࡞͢Δͱ͍͏ͷ
Rails style • rails ͷ scaffold Ͱੜ͞ΕΔߏͱࣅ͍ͯΔ • Redux ͷ
tutorial ͜ͷελΠϧΛ࠾༻ • ׂ͕σΟϨΫτϦ͝ͱʹ͔Ε͍ͯΔͷͰΘ͔Γ͍͢ • ಉ໊͡લͷϑΝΠϧ͕Ͱ͖ͨΓ͢Δ
Domain style
Domain style • ػೳ (domain) ͝ͱʹσΟϨΫτϦΛ͚ͪΌ͓͏
Domain style • υϝΠϯ͝ͱʹσΟϨΫτϦΛ͚ɺͦͷͳ͔ʹ actions ͱ reducers Λͭ͘Δͱ͍͏ͷ • actions
ͱ reducers 1ର1 Ͱ࡞Δ͜ͱଟ͍ • middleware configureStore.js ͰՃ͢Δ • action types actions.js ʹॻ͘
Ducks
Ducks • {actionTypes, actions, reducer} ΛͦΕͧΕผͷϑΝΠϧʹ ॻ͘ͷ໘͔ͩΒҰͭʹ·ͱΊͪΌ͓͏ʂ https://github.com/erikras/ducks-modular-redux
Ducks • ͳͷͰσΟϨΫτϦߏ͜Μͳ؆ܿʹ
Ducks • domain style ʹࣅ͍ͯΔ͕ actions ͱ͔ reducers ͱ͔ΛҰͭͷ ϑΝΠϧʹ·ͱΊͪΌ͏ͷ
• σΟϨΫτϦɺϑΝΠϧ͕গͳͯ͘؆ܿ • ҰͭͷϑΝΠϧͷهड़ྔ͕ଟ͘ͳΔ
Ducks modules/item.js
ॏཁͳ͜ͱ… ڀۃతʹͲͷํ๏ͰσΟϨΫτϦߏΛߦͳͬͯྑ͍͕ action ͱ reducer Λͯ͠ߟ͑Δ͖Ͱͳ͍ɺ ͱ͍͏ߟ͑ํ͕ॏཁ https://redux.js.org/docs/faq/CodeStructure.html#code-structure
৽نͰϓϩδΣΫτ࡞Δͱ͖ʹࢀߟʹ͍ͯͩ͘͠͞
ϑϩϯτΤϯυΊͪΌͪ͘Όืू͍ͯ͠·͢ ɹ ɹɹɹ sottar_