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
260
Implement prerendering w/ puppeteer
sottar
1
280
create own CMS from scratch
sottar
2
9k
Let’s try to hack AST of JavaScript
sottar
1
1.7k
フロントエンドエンジニアが伝えたい最近の事情
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
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
670
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
0
740
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
270
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
170
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
670
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
280
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
2
730
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
50
32k
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
330
Discover Metal 4
rei315
2
110
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Making Projects Easy
brettharned
116
6.3k
Bash Introduction
62gerente
614
210k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
720
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Raft: Consensus for Rubyists
vanstee
140
7k
Practical Orchestrator
shlominoach
188
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
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_