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

state management in Reiwa

state management in Reiwa

This is the presentation material for the presentation on "State Management in the Web Front-End Area of 2021~2022".

Avatar for jhcoder

jhcoder

July 24, 2022
Tweet

More Decks by jhcoder

Other Decks in Programming

Transcript

  1. Agenda - ϑϩϯτΤϯυʹ͓͚Δঢ়ଶ؅ཧʹ͍ͭͯ - ঢ়ଶ؅ཧͷભҠ - Redux vs Context API

    - Redux ͱ Recoil - react-query Λঢ়ଶ؅ཧϥΠϒϥϦͱͯ͠࢖͏͢ʍΊ - summary
  2. ϑϩϯτΤϯυʹ͓͚Δঢ়ଶ؅ཧʹ͍ͭͯ Ϣʔβʔͷϒϥ΢β্ͰಈతʹUI͕มԽ͢Δ ʮUIͷҠΓมΘΓʯ - σʔλΛඇಉظʹड͚औΔ - ϦΞϧλΠϜͳόϦσʔγϣϯ - ϖʔδ಺ͷλϒ੾Γସ͑ ͳͥ͜Ε͕ෳࡶ͞Λ࣋ͬͯ͠·͏ͷ͔ʁ

    => UIΛมԽͤ͞Δʹ͸1ͭલͷDOMͷঢ়ଶʹखΛ͘Θ͑ଓ͚Δ͜ͱʹͳΔ͔Β => DOMͷ଍͠ࢉ΍Ҿ͖ࢉΛڧ੍͍ͤͯ͞ΔɻUIͱϩδοΫ͕ີ݁߹ͳঢ়ଶɻɻɻ
  3. ReduxͱPresntational/Container Components ࡞੒͞ΕΔΞϓϦέʔγϣϯͷڊେԽɺFEΩοπΠ Dan AbramovͷʮPresentational and Container Componentsʯ https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 >

    Storeʹ઀ଓ͢ΔContainer Component/Presentational ComponentΛ໌֬ʹ෼͚Δํ਑͕ͦ ͷ࣠ͱͳ͓ͬͯΓɺStoreͱConnect͞Εͨ෦෼ΛߜΔ͜ͱͰؔ৺ࣄ͕෼཭Ͱ͖ɺ࠶ར༻ੑ͕ߴ ·Δ
  4. Redux vs Context API - ReduxͱContext APIͷҧ͍ - ϝΠϯετϨʔδͷ਺ -

    Middlewareͷ༗ແ - ෳࡶ͞ - Ͳͷ࣌ͷͲΕΛ࢖͑͹͍͍ͷʁʁ
  5. Redux vs Context API ## Redux͕Φεεϝ(redux-toolkit͸࢖͏લఏ) - ΞϓϦέʔγϣϯͷن໛͕େ͖͍ - άϩʔόϧͳstate؅ཧػೳҎ֎ʹ΋ଟ༷ͳػೳ͕΄͍͠(σόοά΍ϩΪϯάͳͲ)

    - ඇಉظॲཧ͢Δ͜ͱ͕ଟ͍ ## Context API͕Φεεϝ - ΞϓϦέʔγϣϯͷن໛͕େ͖͘ͳ͍ - άϩʔόϧͳstate؅ཧػೳ͚ͩͰे෼ - ඇಉظॲཧ͢Δ͜ͱ͕͋·Γͳ͍
  6. ReduxͱRecoil - ঢ়ଶͷߋ৽ Redux: actionΛdispatch => reducerͰঢ়ଶ͍͡Δ recoil: atoms Λߋ৽͢Δ

    → Selector ͕ߋ৽͞ΕΔ ͪͳΈʹrecoil͸SelectorΛ༻͍ΔͷͰґଘؔ܎ͷߋ৽ʹ͓͍ͯ ஋͕ඞཁʹͳͬͨ࣌ʹऔಘ͞ ΕΔͱ͍ͬͨಛ௃΋͋Δɻ
  7. ReduxͱRecoil - ঢ়ଶมԽͷview΁ͷ఻ൖ Redux: ඞཁͳ State ΛऔΓग़ͯ͠ɺมԽ͕͋Ε͹ߋ৽͢Δ react-redux Ͱ͸ಛఆͷ State

    ͕มߋ͞Εͨ࣌ʹ͚ͩ React Component Λ࠶ඳը͢ΔͨΊʹ ʮηϨΫλʔؔ਺ʯΛ༻͍Δɻ
  8. ReduxͱRecoil - ඇಉظॲཧ Redux: start / done / fail ͷঢ়ଶ͸࣋ͨͳ͍ͱμϝ

    ඇಉظͳactionΛ࡞Δɻ(https://qiita.com/kentac55/items/8333dbc3f65e50400dd7) Recoil: SelectorΛඇಉظʹ͢Δ
  9. react-query Λঢ়ଶ؅ཧϥΠϒϥϦͱͯ͠࢖͏ > React Query is great at managing async

    state globally in your app, if you let it. Only turn off the refetch f lags if you know that make sense for your use-case, and resist the urge to sync server data to a different state manager. Usually, customizing staleTime is all you need to get a great ux while also being in control of how often background updates happen. ࠶ϑΣονϑϥάΛΦϑʹ͢Ε͹ɺ࢒ͬͨ਺গͳ͍ΫϥΠΞϯτঢ়ଶͷͨΊʹɺRedux΍Recoil ͷผͷঢ়ଶ؅ཧΛ࢖Θͳͯ͘ࡁΉΑ͏ʹͳΔΑͱݴͬͯΔ
  10. react-query Λঢ়ଶ؅ཧϥΠϒϥϦͱͯ͠࢖͏ ൺֱͱͯ͠ग़ͯ͘Δ SWR - SWRͱreact query ͷGlobal State get͚ͩͷΩϟογϡ͚ͩΛߟ͑Ε͹

    => SWR APIͷΩϟογϯάͷΈɻ global stateʹؔͯ͠͸ContextΛ࡞Δඞཁ͕͋Δɻ react-query ͸ RefetchΈ͍ͨͳॻ͖ํ΋Ͱ͖Δ ɺӬԕʹfetchͤͣɺglobal stateΈ͍ͨͳѻ͍ํ΋Ͱ͖ Δɻ ֦ுੑ͕͋Δͱ͍͏ϝϦοτɻ ͜ΕʹΑΓglobal state ʹؔͯ͠ߟ͑ͳͯ͘ྑ͘ͳΔͷ͕ڧ͍
  11. summary - ঢ়ଶ؅ཧϥΠϒϥϦͷબఆ͸ϓϩδΣΫτͷੑ࣭ʹΑͬͯมΘΔ - Redux vs Context API Ͱ͸middlewareΒ΁Μ͕ΩϞʹͳΔ͕ɺRecoil͸set͕ඇಉظͷPromiseΛऔΕΔ ͷͰ

    redux middleware Ͱଟஈ dispatch ͢ΔΈ͍ͨͳ͜ͱ͸Ͱ͖ͦ͏ - ͱͳΔͱ Recoilʹ܉ഋ্͕Δ͔ʁ(͔ͦ͠͠ͷͨΊʹ͸ promise + suspense ͱͳΓͦ͏ɻ) - (ݱࡏsuspense͸css in jsͱͷ૬ੑ͕ѱ͍ͷͰ ੈͷத͕SSR Streamingʹద߹͢Δ·Ͱ·ͬͨํ͕ྑ͍ ͔ʁ) - Ωϟογϡઓུ͕࢖͑ΔͳΒ SWR or react-query - ͔͠͠ SWR͸ globalͳঢ়ଶΛ࣋ͭͱ͖ʹ୯ମͰ͸ݫ͍͠ͷͰ fetchͤͣglobalͳঢ়ଶΛ࣋ͯΔreact- queryͷํ͕ྑ͖͔ʁ