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".

jhcoder

July 24, 2022
Tweet

More Decks by jhcoder

Other Decks in Programming

Transcript

  1. ྩ࿨ͷঢ়ଶ؅ཧ
    2022/07/24
    jhcoder

    View full-size slide

  2. Agenda
    - ϑϩϯτΤϯυʹ͓͚Δঢ়ଶ؅ཧʹ͍ͭͯ


    - ঢ়ଶ؅ཧͷભҠ


    - Redux vs Context API


    - Redux ͱ Recoil


    - react-query Λঢ়ଶ؅ཧϥΠϒϥϦͱͯ͠࢖͏͢ʍΊ


    - summary

    View full-size slide

  3. ϑϩϯτΤϯυʹ͓͚Δঢ়ଶ؅ཧʹ͍ͭͯ

    View full-size slide

  4. ϑϩϯτΤϯυʹ͓͚Δঢ়ଶ؅ཧʹ͍ͭͯ
    - ϑϩϯτΤϯυք۾Ͱසൟʹඈͼަ͏ϫʔυʮঢ়ଶ؅ཧʯ


    - ʮঢ়ଶ؅ཧʯͱ͸ɺSPA։ൃʹ͓͍ͯεςʔτϨεʹUIΛ࣮૷͢Δ্Ͱඞͣൃੜ͢Δ ʮͰ͸ɺ
    Ͳ͜ʹɾͲ͏΍ͬͯঢ়ଶΛ࣋ͭͷ͔ʁʯ


    View full-size slide

  5. SPAओྲྀલͷϑϩϯτΤϯυ

    View full-size slide

  6. ϑϩϯτΤϯυʹ͓͚Δঢ়ଶ؅ཧʹ͍ͭͯ
    ͜ͷࠒ͸σʔλΛ੩తͳHTMLʹม׵͢Δ͚ͩͰγϯϓϧͩͬͨ


    σʔλΛϧʔϓ΍৚݅෼ذɺม਺ຒࠐΛۦ࢖ͯ͠HTMLʹม׵͢Δͱ͍ͬͨ͜ͱ͕ϝΠϯͩͬ
    ͨɻ


    ͜ͷ ViewͷߏஙʹςϯϓϨʔτΤϯδϯͰ͋Δ jsp΍BladeͳͲͱݴΘΕΔٕज़͕࢖ΘΕ͍ͯͨ


    όοΫΤϯυͷMVCϑϨʔϜϫʔΫ͝ͱʹҟͳΔςϯϓϨʔτΤϯδϯͷه๏Λशಘ͠ͳ͚Ε
    ͹ͳΒͳ͍ͱ͍͏໰୊΋͋Γͭͭ΋ɺ·͊γϯϓϧͩͬͨɻ


    =>ͩͬͯ UIͷߏங͕ σʔλͱςϯϓϨʔτΛೖྗ ͱͯ͠ HTMLΛग़ྗ ͢Δ͚ͩͷ ؔ਺తͳ ॲ
    ཧͷΈͰ׬ྃͰ͖͔ͨΒ

    View full-size slide

  7. ࣌୅͸SPA΁

    View full-size slide

  8. ϑϩϯτΤϯυʹ͓͚Δঢ়ଶ؅ཧʹ͍ͭͯ
    Ϣʔβʔͷϒϥ΢β্ͰಈతʹUI͕มԽ͢Δ ʮUIͷҠΓมΘΓʯ


    - σʔλΛඇಉظʹड͚औΔ


    - ϦΞϧλΠϜͳόϦσʔγϣϯ


    - ϖʔδ಺ͷλϒ੾Γସ͑


    ͳͥ͜Ε͕ෳࡶ͞Λ࣋ͬͯ͠·͏ͷ͔ʁ


    => UIΛมԽͤ͞Δʹ͸1ͭલͷDOMͷঢ়ଶʹखΛ͘Θ͑ଓ͚Δ͜ͱʹͳΔ͔Β


    => DOMͷ଍͠ࢉ΍Ҿ͖ࢉΛڧ੍͍ͤͯ͞ΔɻUIͱϩδοΫ͕ີ݁߹ͳঢ়ଶɻɻɻ

    View full-size slide

  9. ঢ়ଶ؅ཧͷભҠ

    View full-size slide

  10. ঢ়ଶ؅ཧͷભҠ
    Reactಋೖ (Flux)


    SPAͷొ৔


    Reduxͱ


    Presntational


    Container Components


    Hooks౸དྷ


    connect


    HOC


    SWR ͱ react-query


    View full-size slide

  11. Reactಋೖ (Flux)
    - SPA


    εϚϗͷొ৔


    - Ծ૝DOMͱ୯Ұσʔλϑϩʔ


    https://qiita.com/mizchi/items/4d25bc26def1719d52e6


    ReactͱFluxͷࠜఈʹ͋Δɺ୯Ұํ޲ͷσʔλϑϩʔͱͦΕͰ΋એݴతUIɾVirtual DomʹΑΔ
    ࠩ෼ߋ৽ʹΑͬͯrenderΛ཈੍ՄೳͳΞʔΩςΫνϟ

    View full-size slide

  12. 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͞Εͨ෦෼ΛߜΔ͜ͱͰؔ৺ࣄ͕෼཭Ͱ͖ɺ࠶ར༻ੑ͕ߴ
    ·Δ


    View full-size slide

  13. Hooks౸དྷ
    ࠓ·Ͱ͸ connectΛ༻͍͍ͯͨɻHOCͷ૊Έํ͕ओྲྀ͕ͩͬͨ͜Ε͕HooksͰྑ͍ͷͰ͸ͱ
    ͍ͬͨٞ࿦͕᷿Ͱ࿩୊ɻ


    ޙड़͢Δ Context APIͷ׆༻ʹΑΔ୤Reduxͱ͍ͬͨ΋ͷ΋


    useReducer + useContext Ͱ͞ΑͳΒRedux


    View full-size slide

  14. SWR ͱ react-query
    Next.jsɹͱͷ૊Έ߹ΘͤͰঢ়ଶ؅ཧ΋ΩϟογϡઓུʹΑ࣮ͬͯݱͰ͖ΔΑ͏ʹͳͬͨɻ


    ʮ෦෼࠶ඳըස౓ʯ͕ߴ͍ΞϓϦέʔγϣϯʹ࠷ద


    revalidate option Λௐ੔͢Δ͜ͱͰ࢖༻༻్͸ଟذʹ౉Γ·͢ɻʮpolling Λ༻͍ͯҰఆִؒͰ
    ࠷৽ͷσʔλΛऔಘ͢Δʯͱ͍͏ۃ୺ͳ͜ͱ͔ΒʮϖʔδΛϦϩʔυ͠ͳ͍ݶΓɺҰ౓fetch͠
    ͨσʔλΛ࠶ར༻͠ଓ͚Δʯͱ͍͏Ԡ༻΋ՄೳʹͳΔɻ


    https://zenn.dev/takepepe/articles/state-manegement-in-nextjs-2020

    View full-size slide

  15. Redux vs Context API

    View full-size slide

  16. ݁ہͲ͏͢Ε͹Α͍ʁ


    Ͳͬͪ࢖͑͹ྑ͍ʁ

    View full-size slide

  17. ݁࿦: ϓϩδΣΫτʹΑΔ

    View full-size slide

  18. Redux vs Context API
    - ReduxͱContext APIͷҧ͍


    - ϝΠϯετϨʔδͷ਺


    - Middlewareͷ༗ແ


    - ෳࡶ͞


    - Ͳͷ࣌ͷͲΕΛ࢖͑͹͍͍ͷʁʁ

    View full-size slide

  19. Redux vs Context API
    ## Redux͕Φεεϝ(redux-toolkit͸࢖͏લఏ)


    - ΞϓϦέʔγϣϯͷن໛͕େ͖͍


    - άϩʔόϧͳstate؅ཧػೳҎ֎ʹ΋ଟ༷ͳػೳ͕΄͍͠(σόοά΍ϩΪϯάͳͲ)


    - ඇಉظॲཧ͢Δ͜ͱ͕ଟ͍


    ## Context API͕Φεεϝ


    - ΞϓϦέʔγϣϯͷن໛͕େ͖͘ͳ͍


    - άϩʔόϧͳstate؅ཧػೳ͚ͩͰे෼


    - ඇಉظॲཧ͢Δ͜ͱ͕͋·Γͳ͍

    View full-size slide

  20. ReduxͱRecoil

    View full-size slide

  21. ਅଧRecoil

    View full-size slide

  22. ReduxͱRecoil
    ݸਓతʹ͸Recoil࢖͏Ͱ໰୊ͳ͍ͱࢥͬͯΔɻҎԼൺֱɻ


    - ঢ়ଶ


    - ঢ়ଶͷߋ৽


    - ঢ়ଶมԽͷview΁ͷ఻ൖ


    - ඇಉظॲཧ

    View full-size slide

  23. ReduxͱRecoil
    - ঢ়ଶ


    લड़ͨ͠Α͏ʹRedux͸Ұͭͷstore


    Recoil͸ෳ਺ͷখ͞ͳatoms

    View full-size slide

  24. ReduxͱRecoil
    - ঢ়ଶͷߋ৽


    Redux: actionΛdispatch => reducerͰঢ়ଶ͍͡Δ


    recoil: atoms Λߋ৽͢Δ → Selector ͕ߋ৽͞ΕΔ


    ͪͳΈʹrecoil͸SelectorΛ༻͍ΔͷͰґଘؔ܎ͷߋ৽ʹ͓͍ͯ ஋͕ඞཁʹͳͬͨ࣌ʹऔಘ͞
    ΕΔͱ͍ͬͨಛ௃΋͋Δɻ

    View full-size slide

  25. ReduxͱRecoil
    - ঢ়ଶมԽͷview΁ͷ఻ൖ


    Redux: ඞཁͳ State ΛऔΓग़ͯ͠ɺมԽ͕͋Ε͹ߋ৽͢Δ


    react-redux Ͱ͸ಛఆͷ State ͕มߋ͞Εͨ࣌ʹ͚ͩ React Component Λ࠶ඳը͢ΔͨΊʹ
    ʮηϨΫλʔؔ਺ʯΛ༻͍Δɻ

    View full-size slide

  26. ReduxͱRecoil
    - ঢ়ଶมԽͷview΁ͷ఻ൖ


    Recoil: ඞཁͳ atoms/Selector ͷΈ Subscribe ͢Δ

    View full-size slide

  27. ReduxͱRecoil
    - ඇಉظॲཧ


    Redux: start / done / fail ͷঢ়ଶ͸࣋ͨͳ͍ͱμϝ


    ඇಉظͳactionΛ࡞Δɻ(https://qiita.com/kentac55/items/8333dbc3f65e50400dd7)


    Recoil: SelectorΛඇಉظʹ͢Δ


    View full-size slide

  28. ReduxͱRecoil
    - ͭ·Γ….?


    ݸਓతʹ͸Recoil


    - Reduxಉ༷ͷ୯Ұํ޲σʔλϑϩʔͰͷ࣮૷


    - Reduxͱൺֱͯ͠ߏ੒͕খ͘͞࢖͍΍͍͢


    - Hooksͷ૬ੑ


    - ΧϓηϧԽ


    ref: https://tech.kitchhike.com/entry/recoil


    View full-size slide

  29. react-query Λঢ়ଶ؅ཧϥΠϒϥϦͱͯ͠࢖͏

    View full-size slide

  30. react-queryͷৄࡉͳॻ͖ํͱ͔͸ׂѪ

    View full-size slide

  31. react-query Λঢ়ଶ؅ཧϥΠϒϥϦͱͯ͠࢖͏
    - https://tkdodo.eu/blog/react-query-as-a-state-manager


    > React Query͕࣮ࡍʹ͸σʔλϑΣονϥΠϒϥϦͰ͸ͳ͍ɺඇಉظͷঢ়ଶ؅ཧͰ͋Δ

    View full-size slide

  32. 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
    ͷผͷঢ়ଶ؅ཧΛ࢖Θͳͯ͘ࡁΉΑ͏ʹͳΔΑͱݴͬͯΔ


    View full-size slide

  33. react-query Λঢ়ଶ؅ཧϥΠϒϥϦͱͯ͠࢖͏
    ൺֱͱͯ͠ग़ͯ͘Δ SWR


    - key໊ʹؔͯ͠


    react query ͸key໊ͱurl͕෼͔Ε͍ͯΔ


    SWR͸͜Ε͕ಉ͡


    View full-size slide

  34. react-query Λঢ়ଶ؅ཧϥΠϒϥϦͱͯ͠࢖͏
    ൺֱͱͯ͠ग़ͯ͘Δ SWR


    - SWRͱreact query ͷGlobal State


    get͚ͩͷΩϟογϡ͚ͩΛߟ͑Ε͹ => SWR


    APIͷΩϟογϯάͷΈɻ


    global stateʹؔͯ͠͸ContextΛ࡞Δඞཁ͕͋Δɻ


    react-query ͸ RefetchΈ͍ͨͳॻ͖ํ΋Ͱ͖Δ ɺӬԕʹfetchͤͣɺglobal stateΈ͍ͨͳѻ͍ํ΋Ͱ͖
    Δɻ


    ֦ுੑ͕͋Δͱ͍͏ϝϦοτɻ


    ͜ΕʹΑΓglobal state ʹؔͯ͠ߟ͑ͳͯ͘ྑ͘ͳΔͷ͕ڧ͍

    View full-size slide

  35. react-query Λঢ়ଶ؅ཧϥΠϒϥϦͱͯ͠࢖͏
    ൺֱͱͯ͠ग़ͯ͘Δ SWR


    - mutateʹؔͯ͠͸ಉ͔͡ʁ(POST method)


    react-query ʹ͸ useMutation ͕͋Δ


    SWR΋ mutate() Λ࣋ͭͷͰՄೳ

    View full-size slide

  36. 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ͷํ͕ྑ͖͔ʁ

    View full-size slide

  37. ΋͏ͪΐ͍react-query΍suspense΋


    ۷ΓԼ͛ͳ͍ͱ͍͚ͳ͍͜ͱ͕


    ෼͔ͬͨͷͰͪΐͬͱษڧ͖ͯ͠·͢🙇

    View full-size slide

  38. Ref
    - https://zenn.dev/takepepe/articles/state-manegement-in-nextjs-2020


    - https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0


    - https://zenn.dev/gagaga/articles/state-management


    - https://zenn.dev/luvmini511/articles/61e8e54853bc13


    - https://mizchi.dev/study-recoil

    View full-size slide

  39. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

    View full-size slide