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

Trying State Manegemant without Redux(updated)

391ed5f8562a797f010ec510b65075d7?s=47 Nokogiri
October 25, 2019

Trying State Manegemant without Redux(updated)

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

391ed5f8562a797f010ec510b65075d7?s=128

Nokogiri

October 25, 2019
Tweet

Transcript

  1. Trying StateManagement without Redux updated

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

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

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

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

    Ͱ͖͍ͯΔ → React Redux ͸మ൘
  6. Redux࠷ߴ͡ΌΜ ͍΍ReduxͰ͍͍͡ΌΜ

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

  8. ͳͥ Redux Λ࢖Θͳ͍͔ʁ • ΞϓϦͷಛੑʹΑͬͯ͸Redux͸৑௕͗͢Δ͜ͱ͕͋Δ • HooksͰؔ਺ComponentͰ΋StateΛ࢖͑ΔΑ͏ʹͳͬͨ • ContextΛ࢖ͬͯɺωετͨ͠ίϯϙʔωϯτͰ΋Globalͳ஋ ʹΞΫηεͰ͖Δ

    • useReducerͱ͍͏Hooks΋͋Γಉ͡Α͏ͳ࣮૷͸Ͱ͖ͦ͏ • Hooks͕ग़Δલ͸recomposeΛ࢖ͬͯߴ֊ؔ਺Λ࢖ͬͯͨ → ͦ͜·ͰෳࡶͰͳ͍ΞϓϦͰ͸ɺReduxͳ͠Ͱ΋ӡ༻Ͱ͖Δ ͷͰ͸ʁ
  9. ContextͱHooksΛ࢖ͬͨState؅ཧ

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

    • APIs • React.createContext • Context.Provider
  11. ContextͱHooksΛ࢖ͬͨState؅ཧ Context is Կʁ

  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
  13. ContextͱHooksΛ࢖ͬͨState؅ཧ Hooks - useContext • const {value} = useContext(HogeContext) •

    Ҿ਺Ͱ౉͢Context͔ΒvalueΛऔΓग़ͤΔ
  14. ContextͱHooksΛ࢖ͬͨState؅ཧ Hooks - useState • const [value, setValue] = useState(initialValue)

    • valueͱͦΕΛมߋՄೳͳؔ਺Λ໭Γ஋ʹ࣋ͭ
  15. Context ͱ useStateΛ ૊Έ߹Θͤͯ State؅ཧͯ͠ΈΔ

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

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

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

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

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

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

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

  23. ContextͱHooksΛ࢖ͬͨState؅ཧ const [state, dispatch] = useReducer(reducer, initialSate) (state, action) =>

    newState ͱ͍͏ܕͷϦσϡʔα (reducer) Λड͚ औΓɺݱࡏͷ state Λ dispatch ϝιουͱϖΞʹͯ͠ฦ͠·͢ɻ Hooks - useReducer
  24. ContextͱHooksΛ࢖ͬͨState؅ཧ Providerଆͷ࣮૷ Hooks - useReducer

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

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

  27. ݒ೦

  28. ݒ೦ • ͦ΋ͦ΋useReducer͸هࡌͷ৑௕͞Λղܾ͠ͳ͍ • Redux-thunk, Redux-SagaͷΑ͏ͳඇಉظॲཧΛαϙʔ τ͢ΔϥΠϒϥϦͱ͔͸·ͩͳͦ͞͏ • ReduxDevTool࢖͑ͳ͍ •

    Context͸ຊདྷstyle themeͳͲ؅ཧ͢Δ΋ͷ • ConsumerΛར༻͢Δίϯϙʔωϯτ͸Providerͷมߋ Λड͚Δͱ࠶ඳը͞ΕΔͷͰɺύϑΥʔϚϯεʹӨڹ͕ ͋Δ
  29. ݁࿦ • هࡌͷ৑௕ੑΛճආ͢Δ͜ͱ͸Ͱ͖Δ • ReduxͷΤίγεςϜʹ͸͍Εͳ͍ͷ͸ͭΒ͍ • ΞϓϦέʔγϣϯͷαΠζײ΍ෳࡶ͞ʹΑͬͯ͸͋Γ ͔΋

  30. ࢀߟϥΠϒϥϦ ContextΛ࢖͏ϥΠϒϥϦ1 react-redux • Consumerͷه๏͸ Hooks͕ೖΔલͷॻ͖ํ • const { store

    : { dispatch } } = useContext(ReactReduxContext)
  31. ࢀߟϥΠϒϥϦ ContextΛ࢖͏ϥΠϒϥϦ2 React Tracked • Super fast React global/shared state

    with context and hooks • Pure ReactͩͱύϑΥʔϚϯε໰୊͕͋ΔͷͰͦΕΛղܾ͠ɺ͞Βʹ؆ܿʹॻ͚Δ
  32. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠