Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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
Slide 30
Slide 30 text
৽نͰϓϩδΣΫτ࡞Δͱ͖ʹࢀߟʹ͍ͯͩ͘͠͞
Slide 31
Slide 31 text
ϑϩϯτΤϯυΊͪΌͪ͘Όืू͍ͯ͠·͢ ɹ ɹɹɹ sottar_