Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Redux のディレクトリ構成を考える
sota ohara
February 01, 2018
Programming
2
13k
Redux のディレクトリ構成を考える
sota ohara
February 01, 2018
Tweet
Share
More Decks by sota ohara
See All by sota ohara
Implement prerendering w/ puppeteer
sottar
1
130
create own CMS from scratch
sottar
2
8.3k
Let’s try to hack AST of JavaScript
sottar
1
1.3k
フロントエンドエンジニアが伝えたい最近の事情
sottar
28
17k
複数人で高速に開発するためのnpmモジュール
sottar
5
2.3k
new version of context in React 16.3
sottar
3
1.2k
2ヶ月半でサービスをリリースした話し
sottar
2
1.9k
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
sottar
9
4.8k
Other Decks in Programming
See All in Programming
Hatena Engineer Seminar #23「新卒研修で気軽に『ありがとう』を伝え合える Slack アプリを開発した話」
slashnephy
0
350
Functional Data Engineering - A Blueprint for adopting functional principles in data pipeline
vananth22
0
190
Hasura の Relationship と権限管理
karszawa
0
180
domain層のモジュール化 / MoT TechTalk #15
mot_techtalk
0
120
Writing Greener Java Applications
hollycummins
0
350
Ruby Pattern Matching
bkuhlmann
0
610
Qiita Night PHP 2023
fuwasegu
0
11k
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
320
ECテックカンファレンス2023
kspace
1
360
Zynq MP SoC で楽しむエッジコンピューティング ~RTLプログラミングのススメ~
ryuz88
0
380
Spring BootとKubernetesで実現する今どきのDevOps入門
xblood
0
390
PHPアプリケーションにおけるアーキテクチャメトリクスについて / Architecture Metrics in PHP Applications
isanasan
1
270
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
263
18k
WebSockets: Embracing the real-time Web
robhawkes
58
6k
5 minutes of I Can Smell Your CMS
philhawksworth
198
18k
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
214
12k
Rails Girls Zürich Keynote
gr2m
87
12k
Learning to Love Humans: Emotional Interface Design
aarron
263
38k
The MySQL Ecosystem @ GitHub 2015
samlambert
240
11k
The Power of CSS Pseudo Elements
geoffreycrofte
52
4.3k
Rebuilding a faster, lazier Slack
samanthasiow
69
7.5k
Building Your Own Lightsaber
phodgson
96
4.9k
The Invisible Side of Design
smashingmag
292
48k
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_