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

1bf676e4bd36a48bf616c82d6f52c83a?s=47 sota ohara
February 01, 2018

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

1bf676e4bd36a48bf616c82d6f52c83a?s=128

sota ohara

February 01, 2018
Tweet

Transcript

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

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

    Redux sottar_ About me sottar
  3. ฐࣾͷ JavaScript νϟϯωϧ ݁ߏΈΜͳσΟϨΫτϦߏ੒೰ΜͰΔɻɻ

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

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

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

  7. component ઃܭ

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

  9. component ઃܭ • Container component • react-redux.connect() Λ࢖ͬͯ redux ʹͭͳ͙

    • Presentational component • view ͷΈΛѻ͏ component • react ͷΈͰ׬݁ͤ͞Δ
  10. component ઃܭ • ͜Μͳײ͡ͷσΟϨΫτϦߏ଄

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

  12. component ઃܭ Home.js (Container component)

  13. component ઃܭ HomeContents.js (Presentational Component)

  14. Store ઃܭ

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

  16. ͜͜Ͱ͍͏ Store ઃܭͱ͸

  17. Store ઃܭͱ͸ View Actions Reducers Store Store ઃܭͷൣғ → ͭ·Γ

    View Ҏ֎
  18. Rails style

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

  20. Rails style • rails ͷ scaffold Ͱੜ੒͞ΕΔߏ଄ͱࣅ͍ͯΔ • Redux ͷ

    tutorial ͸͜ͷελΠϧΛ࠾༻ • ໾ׂ͕σΟϨΫτϦ͝ͱʹ෼͔Ε͍ͯΔͷͰΘ͔Γ΍͍͢ • ಉ໊͡લͷϑΝΠϧ͕Ͱ͖ͨΓ͢Δ
  21. Domain style

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

  23. Domain style • υϝΠϯ͝ͱʹσΟϨΫτϦΛ෼͚ɺͦͷͳ͔ʹ actions ͱ reducers Λͭ͘Δͱ͍͏΋ͷ • actions

    ͱ reducers ͸ 1ର1 Ͱ࡞Δ͜ͱଟ͍ • middleware ͸ configureStore.js Ͱ௥Ճ͢Δ • action types ͸ actions.js ಺ʹॻ͘
  24. Ducks

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

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

  27. Ducks • domain style ʹࣅ͍ͯΔ͕ actions ͱ͔ reducers ͱ͔ΛҰͭͷ ϑΝΠϧʹ·ͱΊͪΌ͏΋ͷ

    • σΟϨΫτϦɺϑΝΠϧ਺͕গͳͯ͘؆ܿ • ҰͭͷϑΝΠϧͷهड़ྔ͕ଟ͘ͳΔ
  28. Ducks modules/item.js

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

  30. ৽نͰϓϩδΣΫτ࡞Δͱ͖ʹ͸ࢀߟʹ͍ͯͩ͘͠͞

  31. ϑϩϯτΤϯυΊͪΌͪ͘Όืू͍ͯ͠·͢ ɹ ɹɹɹ sottar_