Trying State Manegemant without Redux(updated)

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