Redux のディレクトリ構成を考える

by sota ohara

Slide 1

Slide 1 text

Redux ͷσΟϨΫτϦߏ੒Λߟ͑Δ גࣜձࣾϝϧΧϦ ϑϩϯτΤϯυΤϯδχΞ େݪᆴଠ

Slide 2

Slide 2 text

େݪ ᆴଠ / sottar גࣜձࣾϝϧΧϦ ϑϩϯτΤϯυΤϯδχΞ mercari NOW, CSTool React, Redux sottar_ About me sottar

Slide 3

Slide 3 text

ฐࣾͷ JavaScript νϟϯωϧ ݁ߏΈΜͳσΟϨΫτϦߏ੒೰ΜͰΔɻɻ

Slide 4

Slide 4 text

ੈͷ Redux ࢖͍΋೰ΜͰΔ https://redux.js.org/docs/faq/CodeStructure.html#code-structure

Slide 5

Slide 5 text

ੈͷ Redux ࢖͍΋೰ΜͰΔ https://redux.js.org/docs/faq/CodeStructure.html#code-structure

Slide 6

Slide 6 text

̎ͭͷ࿦఺ • component ઃܭ • store ઃܭ

Slide 7

Slide 7 text

component ઃܭ

Slide 8

Slide 8 text

component ઃܭ Container component ͱ  Presentational component Λ෼཭ͤ͞Δ

Slide 9

Slide 9 text

component ઃܭ • Container component • react-redux.connect() Λ࢖ͬͯ redux ʹͭͳ͙ • Presentational component • view ͷΈΛѻ͏ component • react ͷΈͰ׬݁ͤ͞Δ

Slide 10

Slide 10 text

component ઃܭ • ͜Μͳײ͡ͷσΟϨΫτϦߏ଄

Slide 11

Slide 11 text

component ઃܭ • ͜Μͳײ͡ͷσΟϨΫτϦߏ଄

Slide 12

Slide 12 text

component ઃܭ Home.js (Container component)

Slide 13

Slide 13 text

component ઃܭ HomeContents.js (Presentational Component)

Slide 14

Slide 14 text

Store ઃܭ

Slide 15

Slide 15 text

Store ઃܭ https://redux.js.org/docs/faq/CodeStructure.html#code-structure Rails-styleɹɹDomain-styleɹɹDucks

Slide 16

Slide 16 text

͜͜Ͱ͍͏ Store ઃܭͱ͸

Slide 17

Slide 17 text

Store ઃܭͱ͸ View Actions Reducers Store Store ઃܭͷൣғ → ͭ·Γ View Ҏ֎

Slide 18

Slide 18 text

Rails style

Slide 19

Slide 19 text

Rails style • ໾ׂ (actions, constants, reducers, containers, components) ͝ͱʹσΟϨΫτϦΛ࡞੒͢Δͱ͍͏΋ͷ

Slide 20

Slide 20 text

Rails style • rails ͷ scaffold Ͱੜ੒͞ΕΔߏ଄ͱࣅ͍ͯΔ • Redux ͷ tutorial ͸͜ͷελΠϧΛ࠾༻ • ໾ׂ͕σΟϨΫτϦ͝ͱʹ෼͔Ε͍ͯΔͷͰΘ͔Γ΍͍͢ • ಉ໊͡લͷϑΝΠϧ͕Ͱ͖ͨΓ͢Δ

Slide 21

Slide 21 text

Domain style

Slide 22

Slide 22 text

Domain style • ػೳ (domain) ͝ͱʹσΟϨΫτϦΛ෼͚ͪΌ͓͏

Slide 23

Slide 23 text

Domain style ● υϝΠϯ͝ͱʹσΟϨΫτϦΛ෼͚ɺͦͷͳ͔ʹ actions ͱ reducers Λͭ͘Δͱ͍͏΋ͷ ● actions ͱ reducers ͸ 1ର1 Ͱ࡞Δ͜ͱଟ͍ ● middleware ͸ configureStore.js Ͱ௥Ճ͢Δ ● action types ͸ actions.js ಺ʹॻ͘

Slide 24

Slide 24 text

Ducks

Slide 25

Slide 25 text

Ducks • {actionTypes, actions, reducer} ΛͦΕͧΕผͷϑΝΠϧʹ ॻ͘ͷ͸໘౗͔ͩΒҰͭʹ·ͱΊͪΌ͓͏ʂ https://github.com/erikras/ducks-modular-redux

Slide 26

Slide 26 text

Ducks • ͳͷͰσΟϨΫτϦߏ੒͸͜Μͳ؆ܿʹ

Slide 27

Slide 27 text

Ducks ● domain style ʹࣅ͍ͯΔ͕ actions ͱ͔ reducers ͱ͔ΛҰͭͷ ϑΝΠϧʹ·ͱΊͪΌ͏΋ͷ ● σΟϨΫτϦɺϑΝΠϧ਺͕গͳͯ͘؆ܿ ● ҰͭͷϑΝΠϧͷهड़ྔ͕ଟ͘ͳΔ

Slide 28

Slide 28 text

Ducks modules/item.js

Slide 29

Slide 29 text

ॏཁͳ͜ͱ͸… ڀۃతʹ͸Ͳͷํ๏ͰσΟϨΫτϦߏ੒Λߦͳͬͯ΋ྑ͍͕  action ͱ reducer Λ෼཭ͯ͠ߟ͑Δ΂͖Ͱ͸ͳ͍ɺ  ͱ͍͏ߟ͑ํ͕ॏཁ https://redux.js.org/docs/faq/CodeStructure.html#code-structure