Trying State Manegemant without Redux(updated)

by Nokogiri

Slide 1

Slide 1 text

Trying StateManagement without Redux updated

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ReduxΛར༻ͤͣʹɺ React ͷ Context ͱ HooksͰ ঢ়ଶ؅ཧͯ͠ΈΔ ͱ͍͏࿩

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

ContextͱHooksΛ࢖ͬͨState؅ཧ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Reduxͳ͠Ͱঢ়ଶ؅ཧͰ͖ͦ͏

Slide 27

Slide 27 text

ݒ೦

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠