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
140
Implement prerendering w/ puppeteer
sottar
1
180
create own CMS from scratch
sottar
2
8.7k
Let’s try to hack AST of JavaScript
sottar
1
1.5k
フロントエンドエンジニアが伝えたい最近の事情
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
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
480
GitHub Copilotのススメ
marcy731
1
220
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
180
PHPはいつから死んでいるかの調査
chiroruxx
2
410
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.5k
禅の心を手に入れよ
eltociear
1
280
Elm 0.19.0 Changes
bkuhlmann
0
500
Node.js v22 で変わること
yosuke_furukawa
PRO
11
3.9k
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.1k
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
900
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
1k
Java 22 Overview
kishida
1
190
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
125
8.5k
A designer walks into a library…
pauljervisheath
201
23k
Optimizing for Happiness
mojombo
370
69k
Thoughts on Productivity
jonyablonski
59
3.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.2k
Agile that works and the tools we love
rasmusluckow
325
20k
What's new in Ruby 2.0
geeforr
337
31k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Building Adaptive Systems
keathley
32
1.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
11
1k
BBQ
matthewcrist
80
8.8k
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_