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

Transcript

1. 1.

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

2. 2.

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

   Redux sottar_ About me sottar
3. 3.

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

4. 4.

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

5. 5.

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

6. 6.

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

7. 7.

   component ઃܭ

8. 8.

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

9. 9.

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

   • Presentational component • view ͷΈΛѻ͏ component • react ͷΈͰ׬݁ͤ͞Δ
10. 10.

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

11. 11.

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

12. 12.

    component ઃܭ Home.js (Container component)

13. 13.

    component ઃܭ HomeContents.js (Presentational Component)

14. 14.

    Store ઃܭ

15. 15.

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

16. 16.

    ͜͜Ͱ͍͏ Store ઃܭͱ͸

17. 17.

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

    View Ҏ֎
18. 18.

    Rails style

19. 19.

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

20. 20.

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

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

    Domain style

22. 22.

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

23. 23.

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

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

    Ducks

25. 25.

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

26. 26.

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

27. 27.

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

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

    Ducks modules/item.js

29. 29.

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

30. 30.

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

31. 31.

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