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

Container Componentは必要なのか

texdeath
September 02, 2019

Container Componentは必要なのか

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

texdeath

September 02, 2019
Tweet

More Decks by texdeath

Other Decks in Programming

Transcript

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

    גࣜձࣾICS ϑϩϯτΤϯυΤϯδχΞ ීஈ͸React / Vue / Node.js ͋ͨΓΛॻ͍͍ͯ·͢
  2. ͱΓ͋͑ͣContainerΛͭ͘Δ໰୊ import { connect } from "react-redux"; import AppComponent from

    "../components/AppComponent"; const mapStateToProps = null; const mapDispatchToProps = null; export default connect( mapStateToProps, mapDispatchToProps )(AppComponent);
  3. ͱΓ͋͑ͣ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΋౉͞ͳ͍ɺͨͩίϯϙʔωϯτΛϥοϓ͢Δ͚ͩ
  4. 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> ); };
  5. 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ͷ໾ׂΛՌͨ͢
  6. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ Copyright 2019 ICS INC. All rights reserved. ৿ా উॣ

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