$30 off During Our Annual Pro Sale. View Details »

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

sota ohara
February 01, 2018

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

sota ohara

February 01, 2018
Tweet

More Decks by sota ohara

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  7. component ઃܭ

    View Slide

  8. component ઃܭ
    Container component ͱ

    Presentational component Λ෼཭ͤ͞Δ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  14. Store ઃܭ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  18. Rails style

    View Slide

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

    View Slide

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

    View Slide

  21. Domain style

    View Slide

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

    View Slide

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

    ● actions ͱ reducers ͸ 1ର1 Ͱ࡞Δ͜ͱଟ͍

    ● middleware ͸ configureStore.js Ͱ௥Ճ͢Δ

    ● action types ͸ actions.js ಺ʹॻ͘

    View Slide

  24. Ducks

    View Slide

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

    View Slide

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

    View Slide

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

    ● σΟϨΫτϦɺϑΝΠϧ਺͕গͳͯ͘؆ܿ

    ● ҰͭͷϑΝΠϧͷهड़ྔ͕ଟ͘ͳΔ

    View Slide

  28. Ducks
    modules/item.js

    View Slide

  29. ॏཁͳ͜ͱ͸…
    ڀۃతʹ͸Ͳͷํ๏ͰσΟϨΫτϦߏ੒Λߦͳͬͯ΋ྑ͍͕

    action ͱ reducer Λ෼཭ͯ͠ߟ͑Δ΂͖Ͱ͸ͳ͍ɺ

    ͱ͍͏ߟ͑ํ͕ॏཁ
    https://redux.js.org/docs/faq/CodeStructure.html#code-structure

    View Slide

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

    View Slide

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

    View Slide