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

    • useReducerͱ͍͏Hooks΋͋Γಉ͡Α͏ͳ࣮૷͸Ͱ͖ͦ͏ • Hooks͕ग़Δલ͸recomposeΛ࢖ͬͯߴ֊ؔ਺Λ࢖ͬͯͨ → ͦ͜·ͰෳࡶͰͳ͍ΞϓϦͰ͸ɺReduxͳ͠Ͱ΋ӡ༻Ͱ͖Δ ͷͰ͸ʁ
  2. 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
  3. ContextͱHooksΛ࢖ͬͨState؅ཧ const [state, dispatch] = useReducer(reducer, initialSate) (state, action) =>

    newState ͱ͍͏ܕͷϦσϡʔα (reducer) Λड͚ औΓɺݱࡏͷ state Λ dispatch ϝιουͱϖΞʹͯ͠ฦ͠·͢ɻ Hooks - useReducer
  4. ݒ೦ • ͦ΋ͦ΋useReducer͸هࡌͷ৑௕͞Λղܾ͠ͳ͍ • Redux-thunk, Redux-SagaͷΑ͏ͳඇಉظॲཧΛαϙʔ τ͢ΔϥΠϒϥϦͱ͔͸·ͩͳͦ͞͏ • ReduxDevTool࢖͑ͳ͍ •

    Context͸ຊདྷstyle themeͳͲ؅ཧ͢Δ΋ͷ • ConsumerΛར༻͢Δίϯϙʔωϯτ͸Providerͷมߋ Λड͚Δͱ࠶ඳը͞ΕΔͷͰɺύϑΥʔϚϯεʹӨڹ͕ ͋Δ
  5. ࢀߟϥΠϒϥϦ ContextΛ࢖͏ϥΠϒϥϦ2 React Tracked • Super fast React global/shared state

    with context and hooks • Pure ReactͩͱύϑΥʔϚϯε໰୊͕͋ΔͷͰͦΕΛղܾ͠ɺ͞Βʹ؆ܿʹॻ͚Δ