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
14k
Redux のディレクトリ構成を考える
sota ohara
February 01, 2018
Tweet
Share
More Decks by sota ohara
See All by sota ohara
Re-Architecture of ReactNative
sottar
0
160
Implement prerendering w/ puppeteer
sottar
1
200
create own CMS from scratch
sottar
2
8.8k
Let’s try to hack AST of JavaScript
sottar
1
1.6k
フロントエンドエンジニアが伝えたい最近の事情
sottar
28
18k
複数人で高速に開発するためのnpmモジュール
sottar
5
2.4k
new version of context in React 16.3
sottar
3
1.5k
2ヶ月半でサービスをリリースした話し
sottar
2
2k
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
sottar
9
4.9k
Other Decks in Programming
See All in Programming
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
CSC307 Lecture 10
javiergs
PRO
0
310
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
【Go言語】ジェネリクス
tomo1227
0
170
【Go言語】golangci-lintの使い方
tomo1227
0
280
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
Product Management LT会_クアンド新家
shinshin
0
250
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
How to use Macrobenchmark
veronikapj
0
160
Featured
See All Featured
Unsuck your backbone
ammeep
666
57k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
Code Review Best Practice
trishagee
58
16k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
Writing Fast Ruby
sferik
623
60k
Practical Orchestrator
shlominoach
185
10k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
Documentation Writing (for coders)
carmenintech
63
4.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Git: the NoSQL Database
bkeepers
PRO
423
64k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
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_