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

Trying State Manegemant without Redux(updated)

Nokogiri
October 25, 2019

Trying State Manegemant without Redux(updated)

Reduxを利用せずに、React の Context と Hooksで状態管理してみる話

Nokogiri

October 25, 2019
Tweet

More Decks by Nokogiri

Other Decks in Programming

Transcript

  1. Trying
    StateManagement
    without Redux
    updated

    View full-size slide

  2. Taiki Nishi
    kintone։ൃνʔϜ
    ɾϑϩϯτ΋όοΫΤϯυ΋
    ɾि̍ͰSlashνʔϜ
    ɾwww.nkgr.app
    ɾझຯɿ೫໦ࡔ46
    ɹɹ Nokogiri(@nkgrnkgr)

    View full-size slide

  3. ReduxΛར༻ͤͣʹɺ
    React ͷ Context ͱ HooksͰ
    ঢ়ଶ؅ཧͯ͠ΈΔ
    ͱ͍͏࿩

    View full-size slide

  4. Redux is Կʁ
    ɾϞμϯͳJSΞϓϦͷෳࡶͳঢ়ଶ؅ཧΛ༧ଌՄೳʹ͢Δػߏ
    ɾ୯Ұσʔλϑϩʔ
    View͔Βൃߦ͞ΕͨActionΛDispacherͰॲཧ͠ɺReducer͕Actionͱݱࡏͷ
    StateΛݩʹ৽͍͠StateΛฦ͢
    ɾActionΛ࣮ߦ͢Δ͜ͱͰͲͷΑ͏ͳ஋Λߋ৽ͦ͠ͷ݁Ռ஋͕Ͳ͏ͳΔͷ͔એ
    ݴతʹॻ͘͜ͱ͕Ͱ͖Δ

    View full-size slide

  5. Redux is Կʁ
    ɾpropsόέπϦϨʔͷճආ
    ɾClassComponent -> ؔ਺Componet΁ͷҠߦ΋͠΍͍͢
    ɾRedux Devtool ɺRedux-SagaͳͲपลϥΠϒϥϦΛؚΊΤίγεςϜ͕
    Ͱ͖͍ͯΔ
    → React Redux ͸మ൘

    View full-size slide

  6. Redux࠷ߴ͡ΌΜ
    ͍΍ReduxͰ͍͍͡ΌΜ

    View full-size slide

  7. ͳͥ Redux Λ࢖Θͳ͍͔ʁ
    Redux ͷσϝϦοτ
    ɾهࡌ͕৑௕
    ɾॳظڭҭίετߴΊ

    View full-size slide

  8. ͳͥ Redux Λ࢖Θͳ͍͔ʁ
    • ΞϓϦͷಛੑʹΑͬͯ͸Redux͸৑௕͗͢Δ͜ͱ͕͋Δ
    • HooksͰؔ਺ComponentͰ΋StateΛ࢖͑ΔΑ͏ʹͳͬͨ
    • ContextΛ࢖ͬͯɺωετͨ͠ίϯϙʔωϯτͰ΋Globalͳ஋
    ʹΞΫηεͰ͖Δ
    • useReducerͱ͍͏Hooks΋͋Γಉ͡Α͏ͳ࣮૷͸Ͱ͖ͦ͏
    • Hooks͕ग़Δલ͸recomposeΛ࢖ͬͯߴ֊ؔ਺Λ࢖ͬͯͨ
    → ͦ͜·ͰෳࡶͰͳ͍ΞϓϦͰ͸ɺReduxͳ͠Ͱ΋ӡ༻Ͱ͖Δ
    ͷͰ͸ʁ

    View full-size slide

  9. ContextͱHooksΛ࢖ͬͨState؅ཧ

    View full-size slide

  10. ContextͱHooksΛ࢖ͬͨState؅ཧ
    Context is Կʁ
    • ίϯϙʔωϯτπϦʔʹରͯ͠άϩʔόϧͱΈͳͤΔ
    • ೚ҙͷ஋ΛValueͱͯ͠อ࣋Մೳ
    • https://ja.reactjs.org/docs/context.html
    • APIs
    • React.createContext
    • Context.Provider

    View full-size slide

  11. ContextͱHooksΛ࢖ͬͨState؅ཧ
    Context is Կʁ

    View full-size slide

  12. ContextͱHooksΛ࢖ͬͨState؅ཧ
    Hooks is Կʁ
    • React 16.8 Ͱ௥Ճ͞Εͨ৽ػೳ
    • useXXX ͱ͍͏ͷ͕ಛ௃
    • Stateͷ؅ཧͳͲReactͷػೳΛClassΛ࢖Θͣʹॻ͚Δ
    ɹhttps://ja.reactjs.org/docs/hooks-intro.html
    • APIs
    • useState
    • useContext
    • useEffect
    • useReducer

    View full-size slide

  13. ContextͱHooksΛ࢖ͬͨState؅ཧ
    Hooks - useContext
    • const {value} = useContext(HogeContext)
    • Ҿ਺Ͱ౉͢Context͔ΒvalueΛऔΓग़ͤΔ

    View full-size slide

  14. ContextͱHooksΛ࢖ͬͨState؅ཧ
    Hooks - useState
    • const [value, setValue] = useState(initialValue)
    • valueͱͦΕΛมߋՄೳͳؔ਺Λ໭Γ஋ʹ࣋ͭ

    View full-size slide

  15. Context ͱ useStateΛ
    ૊Έ߹Θͤͯ
    State؅ཧͯ͠ΈΔ

    View full-size slide

  16. ContextͱHooksΛ࢖ͬͨState؅ཧ
    ContextͰStateͱؔ਺Λ؅ཧ
    • ContextͷValue͸೚ҙͷ஋Λ؅ཧͰ͖Δ
    • ValueͰ͸stateͱͦΕΛมߋՄೳͳؔ਺Λ؅ཧ

    View full-size slide

  17. ContextͱHooksΛ࢖ͬͨState؅ཧ
    ContextͰStateͱؔ਺Λ؅ཧ

    View full-size slide

  18. ͜ΕͰόέπϦϨʔͳ͠Ͱ
    GlobalStateʹΞΫηεͰ͖Δ

    View full-size slide

  19. ContextͱHooksΛ࢖ͬͨState؅ཧ
    طଘͷRedux͔Βͷஔ͖׵͑͸ʁ
    • ࠓ·ͰContainerComponentͰ΍͍ͬͯͨ
    mapStateToPropsɺmapDispatchToPropsΛuseContext
    ͔ΒऔΓग़ͨ͠useStateͷ໭Γ஋ʹஔ͖׵͑Δ

    View full-size slide

  20. ContextͱHooksΛ࢖ͬͨState؅ཧ
    طଘͷRedux͔Βͷஔ͖׵͑͸ʁ
    • ReduxͰ͸componentͷpropsʹ͜Μͳײ͡Ͱ߹੒͍ͯͨ͠

    View full-size slide

  21. • εοΩϦʂ
    ContextͱHooksΛ࢖ͬͨState؅ཧ
    طଘͷRedux͔Βͷஔ͖׵͑͸ʁ

    View full-size slide

  22. ContextͱHooksΛ࢖ͬͨState؅ཧ
    Stateͷมߋ؅ཧΛݫີʹ͍ͨ͠ʁ
    • useStateͷ୅ΘΓʹuseReducerΛ࢖͑͹Αͦ͞͏

    View full-size slide

  23. ContextͱHooksΛ࢖ͬͨState؅ཧ
    const [state, dispatch] = useReducer(reducer, initialSate)
    (state, action) => newState ͱ͍͏ܕͷϦσϡʔα (reducer) Λड͚
    औΓɺݱࡏͷ state Λ dispatch ϝιουͱϖΞʹͯ͠ฦ͠·͢ɻ
    Hooks - useReducer

    View full-size slide

  24. ContextͱHooksΛ࢖ͬͨState؅ཧ
    Providerଆͷ࣮૷
    Hooks - useReducer

    View full-size slide

  25. ContextͱHooksΛ࢖ͬͨState؅ཧ
    Consumerଆʢར༻ଆͷ࣮૷ʣ
    Hooks - useReducer

    View full-size slide

  26. Reduxͳ͠Ͱঢ়ଶ؅ཧͰ͖ͦ͏

    View full-size slide

  27. ݒ೦
    • ͦ΋ͦ΋useReducer͸هࡌͷ৑௕͞Λղܾ͠ͳ͍
    • Redux-thunk, Redux-SagaͷΑ͏ͳඇಉظॲཧΛαϙʔ
    τ͢ΔϥΠϒϥϦͱ͔͸·ͩͳͦ͞͏
    • ReduxDevTool࢖͑ͳ͍
    • Context͸ຊདྷstyle themeͳͲ؅ཧ͢Δ΋ͷ
    • ConsumerΛར༻͢Δίϯϙʔωϯτ͸Providerͷมߋ
    Λड͚Δͱ࠶ඳը͞ΕΔͷͰɺύϑΥʔϚϯεʹӨڹ͕
    ͋Δ

    View full-size slide

  28. ݁࿦
    • هࡌͷ৑௕ੑΛճආ͢Δ͜ͱ͸Ͱ͖Δ
    • ReduxͷΤίγεςϜʹ͸͍Εͳ͍ͷ͸ͭΒ͍
    • ΞϓϦέʔγϣϯͷαΠζײ΍ෳࡶ͞ʹΑͬͯ͸͋Γ
    ͔΋

    View full-size slide

  29. ࢀߟϥΠϒϥϦ
    ContextΛ࢖͏ϥΠϒϥϦ1
    react-redux
    • Consumerͷه๏͸ Hooks͕ೖΔલͷॻ͖ํ
    • const { store : { dispatch } } = useContext(ReactReduxContext)

    View full-size slide

  30. ࢀߟϥΠϒϥϦ
    ContextΛ࢖͏ϥΠϒϥϦ2
    React Tracked
    • Super fast React global/shared state with context and hooks
    • Pure ReactͩͱύϑΥʔϚϯε໰୊͕͋ΔͷͰͦΕΛղܾ͠ɺ͞Βʹ؆ܿʹॻ͚Δ

    View full-size slide

  31. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View full-size slide