Trying State Manegemant without Redux(updated)

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

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. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠