state management in Reiwa

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

Transcript

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

   View Slide

2. Agenda
   - ϑϩϯτΤϯυʹ͓͚Δঢ়ଶ؅ཧʹ͍ͭͯ
   
   
   - ঢ়ଶ؅ཧͷભҠ
   
   
   - Redux vs Context API
   
   
   - Redux ͱ Recoil
   
   
   - react-query Λঢ়ଶ؅ཧϥΠϒϥϦͱͯ͠࢖͏͢ʍΊ
   
   
   - summary
   

   View Slide

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

   View Slide

4. ϑϩϯτΤϯυʹ͓͚Δঢ়ଶ؅ཧʹ͍ͭͯ
   - ϑϩϯτΤϯυք۾Ͱසൟʹඈͼަ͏ϫʔυʮঢ়ଶ؅ཧʯ
   
   
   - ʮঢ়ଶ؅ཧʯͱ͸ɺSPA։ൃʹ͓͍ͯεςʔτϨεʹUIΛ࣮૷͢Δ্Ͱඞͣൃੜ͢Δ ʮͰ͸ɺ
   Ͳ͜ʹɾͲ͏΍ͬͯঢ়ଶΛ࣋ͭͷ͔ʁʯ
   
   
   

   View Slide

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

   View Slide

6. ϑϩϯτΤϯυʹ͓͚Δঢ়ଶ؅ཧʹ͍ͭͯ
   ͜ͷࠒ͸σʔλΛ੩తͳHTMLʹม׵͢Δ͚ͩͰγϯϓϧͩͬͨ
   
   
   σʔλΛϧʔϓ΍৚݅෼ذɺม਺ຒࠐΛۦ࢖ͯ͠HTMLʹม׵͢Δͱ͍ͬͨ͜ͱ͕ϝΠϯͩͬ
   ͨɻ
   
   
   ͜ͷ ViewͷߏஙʹςϯϓϨʔτΤϯδϯͰ͋Δ jsp΍BladeͳͲͱݴΘΕΔٕज़͕࢖ΘΕ͍ͯͨ
   
   
   όοΫΤϯυͷMVCϑϨʔϜϫʔΫ͝ͱʹҟͳΔςϯϓϨʔτΤϯδϯͷه๏Λशಘ͠ͳ͚Ε
   ͹ͳΒͳ͍ͱ͍͏໰୊΋͋Γͭͭ΋ɺ·͊γϯϓϧͩͬͨɻ
   
   
   =>ͩͬͯ UIͷߏங͕ σʔλͱςϯϓϨʔτΛೖྗ ͱͯ͠ HTMLΛग़ྗ ͢Δ͚ͩͷ ؔ਺తͳ ॲ
   ཧͷΈͰ׬ྃͰ͖͔ͨΒ
   

   View Slide

7. ࣌୅͸SPA΁
   

   View Slide

8. ϑϩϯτΤϯυʹ͓͚Δঢ়ଶ؅ཧʹ͍ͭͯ
   Ϣʔβʔͷϒϥ΢β্ͰಈతʹUI͕มԽ͢Δ ʮUIͷҠΓมΘΓʯ
   
   
   - σʔλΛඇಉظʹड͚औΔ
   
   
   - ϦΞϧλΠϜͳόϦσʔγϣϯ
   
   
   - ϖʔδ಺ͷλϒ੾Γସ͑
   
   
   ͳͥ͜Ε͕ෳࡶ͞Λ࣋ͬͯ͠·͏ͷ͔ʁ
   
   
   => UIΛมԽͤ͞Δʹ͸1ͭલͷDOMͷঢ়ଶʹखΛ͘Θ͑ଓ͚Δ͜ͱʹͳΔ͔Β
   
   
   => DOMͷ଍͠ࢉ΍Ҿ͖ࢉΛڧ੍͍ͤͯ͞ΔɻUIͱϩδοΫ͕ີ݁߹ͳঢ়ଶɻɻɻ
   

   View Slide

9. ঢ়ଶ؅ཧͷભҠ
   

   View Slide

10. ঢ়ଶ؅ཧͷભҠ
    Reactಋೖ (Flux)
    
    
    SPAͷొ৔
    
    
    Reduxͱ
    
    
    Presntational
    
    
    Container Components
    
    
    Hooks౸དྷ
    
    
    connect
    
    
    HOC
    
    
    SWR ͱ react-query
    
    
    

    View Slide

11. Reactಋೖ (Flux)
    - SPA
    
    
    εϚϗͷొ৔
    
    
    - Ծ૝DOMͱ୯Ұσʔλϑϩʔ
    
    
    https://qiita.com/mizchi/items/4d25bc26def1719d52e6
    
    
    ReactͱFluxͷࠜఈʹ͋Δɺ୯Ұํ޲ͷσʔλϑϩʔͱͦΕͰ΋એݴతUIɾVirtual DomʹΑΔ
    ࠩ෼ߋ৽ʹΑͬͯrenderΛ཈੍ՄೳͳΞʔΩςΫνϟ
    

    View 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 Slide

13. Hooks౸དྷ
    ࠓ·Ͱ͸ connectΛ༻͍͍ͯͨɻHOCͷ૊Έํ͕ओྲྀ͕ͩͬͨ͜Ε͕HooksͰྑ͍ͷͰ͸ͱ
    ͍ͬͨٞ࿦͕᷿Ͱ࿩୊ɻ
    
    
    ޙड़͢Δ Context APIͷ׆༻ʹΑΔ୤Reduxͱ͍ͬͨ΋ͷ΋
    
    
    useReducer + useContext Ͱ͞ΑͳΒRedux
    
    
    

    View Slide

14. SWR ͱ react-query
    Next.jsɹͱͷ૊Έ߹ΘͤͰঢ়ଶ؅ཧ΋ΩϟογϡઓུʹΑ࣮ͬͯݱͰ͖ΔΑ͏ʹͳͬͨɻ
    
    
    ʮ෦෼࠶ඳըස౓ʯ͕ߴ͍ΞϓϦέʔγϣϯʹ࠷ద
    
    
    revalidate option Λௐ੔͢Δ͜ͱͰ࢖༻༻్͸ଟذʹ౉Γ·͢ɻʮpolling Λ༻͍ͯҰఆִؒͰ
    ࠷৽ͷσʔλΛऔಘ͢Δʯͱ͍͏ۃ୺ͳ͜ͱ͔ΒʮϖʔδΛϦϩʔυ͠ͳ͍ݶΓɺҰ౓fetch͠
    ͨσʔλΛ࠶ར༻͠ଓ͚Δʯͱ͍͏Ԡ༻΋ՄೳʹͳΔɻ
    
    
    https://zenn.dev/takepepe/articles/state-manegement-in-nextjs-2020
    

    View Slide

15. Redux vs Context API
    

    View Slide

16. ݁ہͲ͏͢Ε͹Α͍ʁ
    
    
    Ͳͬͪ࢖͑͹ྑ͍ʁ
    

    View Slide

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

    View Slide

18. Redux vs Context API
    - ReduxͱContext APIͷҧ͍
    
    
    - ϝΠϯετϨʔδͷ਺
    
    
    - Middlewareͷ༗ແ
    
    
    - ෳࡶ͞
    
    
    - Ͳͷ࣌ͷͲΕΛ࢖͑͹͍͍ͷʁʁ
    

    View Slide

19. Redux vs Context API
    ## Redux͕Φεεϝ(redux-toolkit͸࢖͏લఏ)
    
    
    - ΞϓϦέʔγϣϯͷن໛͕େ͖͍
    
    
    - άϩʔόϧͳstate؅ཧػೳҎ֎ʹ΋ଟ༷ͳػೳ͕΄͍͠(σόοά΍ϩΪϯάͳͲ)
    
    
    - ඇಉظॲཧ͢Δ͜ͱ͕ଟ͍
    
    
    ## Context API͕Φεεϝ
    
    
    - ΞϓϦέʔγϣϯͷن໛͕େ͖͘ͳ͍
    
    
    - άϩʔόϧͳstate؅ཧػೳ͚ͩͰे෼
    
    
    - ඇಉظॲཧ͢Δ͜ͱ͕͋·Γͳ͍
    

    View Slide

20. ReduxͱRecoil
    

    View Slide

21. ਅଧRecoil
    

    View Slide

22. ReduxͱRecoil
    ݸਓతʹ͸Recoil࢖͏Ͱ໰୊ͳ͍ͱࢥͬͯΔɻҎԼൺֱɻ
    
    
    - ঢ়ଶ
    
    
    - ঢ়ଶͷߋ৽
    
    
    - ঢ়ଶมԽͷview΁ͷ఻ൖ
    
    
    - ඇಉظॲཧ
    

    View Slide

23. ReduxͱRecoil
    - ঢ়ଶ
    
    
    લड़ͨ͠Α͏ʹRedux͸Ұͭͷstore
    
    
    Recoil͸ෳ਺ͷখ͞ͳatoms
    

    View Slide

24. ReduxͱRecoil
    - ঢ়ଶͷߋ৽
    
    
    Redux: actionΛdispatch => reducerͰঢ়ଶ͍͡Δ
    
    
    recoil: atoms Λߋ৽͢Δ → Selector ͕ߋ৽͞ΕΔ
    
    
    ͪͳΈʹrecoil͸SelectorΛ༻͍ΔͷͰґଘؔ܎ͷߋ৽ʹ͓͍ͯ ஋͕ඞཁʹͳͬͨ࣌ʹऔಘ͞
    ΕΔͱ͍ͬͨಛ௃΋͋Δɻ
    

    View Slide

25. ReduxͱRecoil
    - ঢ়ଶมԽͷview΁ͷ఻ൖ
    
    
    Redux: ඞཁͳ State ΛऔΓग़ͯ͠ɺมԽ͕͋Ε͹ߋ৽͢Δ
    
    
    react-redux Ͱ͸ಛఆͷ State ͕มߋ͞Εͨ࣌ʹ͚ͩ React Component Λ࠶ඳը͢ΔͨΊʹ
    ʮηϨΫλʔؔ਺ʯΛ༻͍Δɻ
    

    View Slide

26. ReduxͱRecoil
    - ঢ়ଶมԽͷview΁ͷ఻ൖ
    
    
    Recoil: ඞཁͳ atoms/Selector ͷΈ Subscribe ͢Δ
    

    View Slide

27. ReduxͱRecoil
    - ඇಉظॲཧ
    
    
    Redux: start / done / fail ͷঢ়ଶ͸࣋ͨͳ͍ͱμϝ
    
    
    ඇಉظͳactionΛ࡞Δɻ(https://qiita.com/kentac55/items/8333dbc3f65e50400dd7)
    
    
    Recoil: SelectorΛඇಉظʹ͢Δ
    
    
    

    View Slide

28. ReduxͱRecoil
    - ͭ·Γ….?
    
    
    ݸਓతʹ͸Recoil
    
    
    - Reduxಉ༷ͷ୯Ұํ޲σʔλϑϩʔͰͷ࣮૷
    
    
    - Reduxͱൺֱͯ͠ߏ੒͕খ͘͞࢖͍΍͍͢
    
    
    - Hooksͷ૬ੑ
    
    
    - ΧϓηϧԽ
    
    
    ref: https://tech.kitchhike.com/entry/recoil
    
    
    

    View Slide

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

    View Slide

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

    View Slide

31. react-query Λঢ়ଶ؅ཧϥΠϒϥϦͱͯ͠࢖͏
    - https://tkdodo.eu/blog/react-query-as-a-state-manager
    
    
    > React Query͕࣮ࡍʹ͸σʔλϑΣονϥΠϒϥϦͰ͸ͳ͍ɺඇಉظͷঢ়ଶ؅ཧͰ͋Δ
    

    View 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 Slide

33. react-query Λঢ়ଶ؅ཧϥΠϒϥϦͱͯ͠࢖͏
    ൺֱͱͯ͠ग़ͯ͘Δ SWR
    
    
    - key໊ʹؔͯ͠
    
    
    react query ͸key໊ͱurl͕෼͔Ε͍ͯΔ
    
    
    SWR͸͜Ε͕ಉ͡
    
    
    

    View 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 Slide

35. react-query Λঢ়ଶ؅ཧϥΠϒϥϦͱͯ͠࢖͏
    ൺֱͱͯ͠ग़ͯ͘Δ SWR
    
    
    - mutateʹؔͯ͠͸ಉ͔͡ʁ(POST method)
    
    
    react-query ʹ͸ useMutation ͕͋Δ
    
    
    SWR΋ mutate() Λ࣋ͭͷͰՄೳ
    

    View 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 Slide

37. ΋͏ͪΐ͍react-query΍suspense΋
    
    
    ۷ΓԼ͛ͳ͍ͱ͍͚ͳ͍͜ͱ͕
    
    
    ෼͔ͬͨͷͰͪΐͬͱษڧ͖ͯ͠·͢🙇
    

    View 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 Slide

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

    View Slide