Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Container Componentは必要なのか

E5ab6eb9fc8de68bf1610c7ad0c86155?s=47 texdeath
September 02, 2019

Container Componentは必要なのか

Container Componentが提唱されてから随分と長い時間が経ちました。
Redux Hooks APIもリリースされ設計を見直すよいタイミングなので、初心に立ち返って、Container Componentが必要なタイミングを考えてみました。

E5ab6eb9fc8de68bf1610c7ad0c86155?s=128

texdeath

September 02, 2019
Tweet

Transcript

  1. Container Component͸ඞཁͳͷ͔ גࣜձࣾICS ৿ా উॣ ྩ࿨ݩ೥9݄2೔

  2. ࣗݾ঺հ ৿ా উॣ (΋Γͨ ·͞ͱ͠) @texdeath લ৬: Ϡϑʔגࣜձࣾ → ݱ৬:

    גࣜձࣾICS ϑϩϯτΤϯυΤϯδχΞ ීஈ͸React / Vue / Node.js ͋ͨΓΛॻ͍͍ͯ·͢
  3. Agenda • ͸͡Ίʹʙ͜ͷ࿩Λ͢Δഎܠ • Redux Hooks APIʹ͓͚ΔContainer Component • Container

    Component͕ඞཁͳ৔߹ • ·ͱΊ
  4. ͸͡Ίʹ • Reactͷίϯϙʔωϯτͷ͓࿩Λ͠·͢ • Container Component͕ඞཁͳ͍ͱ͍͏࿩Ͱ͸͋Γ·ͤΜ • ඞཁɾෆඞཁͳ৔໘Λ͔ͬ͠ΓݟۃΊͯ࢖͍ͬͯ͜͏ͱ͍͏ ࿩Ͱ͢

  5. Container Component ࡞ͬͯ·͔͢ʁ

  6. ͜ͷ࿩Λ͢Δഎܠ • ۀ຿ͰReact + Reduxͷ૊Έ߹ΘͤͰSPAΛ࡞Δ͜ͱ͕ଟ͍ • ReduxͷσʔλόΠϯσΟϯάʹ͸react-reduxΛ࢖༻͍ͯ͠Δ • UIͱΞϓϦέʔγϣϯϩδοΫΛ෼அ͢ΔͨΊɺ Container

    ComponentͱPresentational ComponentΛ ͦΕͧΕ༻ҙ͍ͯ͠Δ
  7. ͜ͷ࿩Λ͢Δഎܠ • ۀ຿ͰReact + Reduxͷ૊Έ߹ΘͤͰSPAΛ࡞Δ͜ͱ͕ଟ͍ • ReduxͷσʔλόΠϯσΟϯάʹ͸react-reduxΛ࢖༻͍ͯ͠Δ • UIͱΞϓϦέʔγϣϯϩδοΫΛ෼அ͢ΔͨΊɺ Container

    ComponentͱPresentational ComponentΛ ͦΕͧΕ༻ҙ͍ͯ͠Δ
  8. ͱΓ͋͑ͣContainerΛͭ͘Δ໰୊ import { connect } from "react-redux"; import AppComponent from

    "../components/AppComponent"; const mapStateToProps = null; const mapDispatchToProps = null; export default connect( mapStateToProps, mapDispatchToProps )(AppComponent);
  9. ͱΓ͋͑ͣContainerΛͭ͘Δ໰୊ import { connect } from "react-redux"; import AppComponent from

    "../components/AppComponent"; const mapStateToProps = null; const mapDispatchToProps = null; export default connect( mapStateToProps, mapDispatchToProps )(AppComponent); state΋action΋౉͞ͳ͍ɺͨͩίϯϙʔωϯτΛϥοϓ͢Δ͚ͩ
  10. ͨͩconnect͢ΔͨΊʹ ଘࡏ͢ΔContainer Component

  11. • Container Componentͷຊདྷͷ໨తɾϝϦοτ͸ɺ • UIͱΞϓϦέʔγϣϯϩδοΫΛ෼ղ • ίʔυྔͷ࡟ݮɺՄಡੑɾϝϯςφϯεੑ޲্ • Presentational ComponentΛ࢖͍ճͤΔΑ͏ʹ͢Δ

    ͷ͸ͣ ຊདྷͷ໨త
  12. • Presentational ComponentͱContainer Component͸ 1:1Ͱ͸ͳ͍ • ఆܕจͷΑ͏ʹmapStateToPropsɺ mapDispatchToPropsɺconnectΛॻ͘ඞཁ͸ͳ͍ • ෆཁʹ࡞ΔͱΉ͠Ζίʔυྔ͕૿͠ɺݟ௨͕͠ѱ͘ͳΔ

    ແବͳίϯϙʔωϯτ͸࡞Βͳ͍
  13. Dan Abramovͷҙݟ Redux࡞ऀͰ͋Δ Dan Abramovͷهࣄ

  14. Dan Abramovͷҙݟ ҙ༁: ɾ݁ߏલ(2015೥͝Ζ)ʹContainer Componentͷ هࣄΛॻ͍͚ͨͲɺࠓ͸ίϯϙʔωϯτͷ෼ׂ͸Φεεϝ͠ͳ͍ ɾඞཁ΋ͳ͍ͷʹContainer Component͕ ઃܭ࣌ʹ૊Έࠐ·Ε͍ͯΔέʔε͕ଟ͍ ɾ͜ͷख๏͕ศརͩͱࢥͬͨཧ༝͸ɺෳࡶͳStateͷϩδοΫΛ

    ίϯϙʔωϯτ͔Β෼཭Ͱ͖ΔͨΊͰ͋Δ ɾࠓ͸Hooks΋͋Δ͠ɺ෼ׂ͠ͳͯ͘΋ಉ͜͡ͱ͕Ͱ͖Δ https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
  15. Redux Hooks APIʹ͓͚Δ Container Component

  16. • 2019೥6݄ʹreact-redux͔ΒRedux Hooks API͕ϦϦʔε • useSelector΍useReducerͱ͍ͬͨؔ਺Λݺͼग़͢͜ͱͰ ίϯϙʔωϯτʹσʔλόΠϯσΟϯά͕Ͱ͖ΔΑ͏ʹͳͬ ͨ • ͜ΕʹΑΓconnectؔ਺Λ࢖Θͳͯ͘΋Α͘ͳͬͨ

    react-redux͕Hooks APIʹରԠ
  17. Hooks APIͰͷσʔλόΠϯσΟϯά export const App: FunctionComponent<Props> = () => {

    const count = useSelector((state: RootState) => state.counter.count); const dispatch = useDispatch(); const incrementCounter = useCallback( () => dispatch({ type: counterTypes.INCREMENT_COUNTER }), [dispatch] ); return ( <Fragment> <div>{count}</div> <button onClick={incrementCounter}>increment</button> </Fragment> ); };
  18. Hooks APIͰͷσʔλόΠϯσΟϯά export const App: FunctionComponent<Props> = () => {

    const count = useSelector((state: RootState) => state.counter.count); const dispatch = useDispatch(); const incrementCounter = useCallback( () => dispatch({ type: counterTypes.INCREMENT_COUNTER }), [dispatch] ); return ( <Fragment> <div>{count}</div> <button onClick={incrementCounter}>increment</button> </Fragment> ); }; ͜ͷ͋ͨΓͷηϨΫλʔ͕ mapStateToProps, mapDispatchToPropsͷ໾ׂΛՌͨ͢
  19. connect͠ͳ͚Ε͹ Container Component͍Βͳ͍ɾɾɾʁ

  20. ඞཁͩͱײͨ͡Β࡞੒͢Ε͹Α͍

  21. • ঢ়ଶͱView͕ີ݁߹ʹͳΔ • ୯ମςετͷ೉қ౓্͕͕Δ • ෳࡶͳίϯϙʔωϯτͷ৔߹ɺ੾Γ෼͚͕೉͘͠ͳΔ • ϝϯςφϯεੑͷ௿Լ Container Component͕ͳ͍ͱԿ͕ࠔΔ͔

    →։ൃΛਐΊ͍ͯ͘͏ͪʹɺඞཁʹͳͬͯ͘Δ͜ͱ΋͋Δ
  22. • ΞϓϦέʔγϣϯ͕ංେԽ͖ͯͨ࣌͠ • ౉͍ͯ͠Δprops͕͔ͳΓଟ͘ͳͬͯ͠·͍ͬͯΔ • View Componentͷ਺͕ඇৗʹଟ͘ɺΑΓγϯϓϧʹͨ͠ ͍ • Reduxґଘ͔ΒίϯϙʔωϯτΛ੾Γ཭ͨ͘͠ͳͬͨ࣌

    Container Component͕ඞཁͳ৔߹
  23. • ΞϓϦέʔγϣϯ͕ංେԽ͖ͯͨ࣌͠ • ౉͍ͯ͠Δprops͕͔ͳΓଟ͘ͳͬͯ͠·͍ͬͯΔ • View Componentͷ਺͕ඇৗʹଟ͘ɺΑΓγϯϓϧʹͨ͠ ͍ • Reduxґଘ͔ΒίϯϙʔωϯτΛ੾Γ཭ͨ͘͠ͳͬͨ࣌

    Container Component͕ඞཁͳ৔߹ →͜͏͍ͬͨέʔεͷ࣌͸ɺσβΠϯύλʔϯͱͯ͠ಋೖΛݕ౼
  24. • ແҙຯͳContainer Component͸࡞Βͳ͍ • Redux Hooks APIΛ࢖͑͹connect͸ແͤ͘Δ • ΞϓϦέʔγϣϯ্ɺඞཁͩͱײͨ࣌͡ʹContainerͷಋ ೖΛݕ౼͢Δ

    ·ͱΊ
  25. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ Copyright 2019 ICS INC. All rights reserved. ৿ా উॣ

    @texdeath ICS MEDIA΍TwitterͰ΋΢ΣϒςΫϊϩδʔͷ৘ใΛൃ৴த ics.media