Container Componentは必要なのか

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

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