Reduxの細かい話 #react_fukuoka

React勉強会@福岡 vol.1 - connpass
https://rakko.connpass.com/event/113051/

Transcript

1. 3FEVYͷࡉ͔͍
   ࿩
   ۚ
   3FBDUษڧձ!෱ԬWPM
   !QJSPTJLJDL
   

   View Slide

2. ࣗݾ঺հ
   w !QJSPTJLJDL
   w ݀Ҫ޺޾
   w 3FBDUೖ໳ʢᠳӭࣾʣஶऀ
   w εϚϒϥͷ࿅श͍͕ͨ͠

   εϓϥτΡʔϯ͕·ͩ๩͍͠
   

   View Slide

3. ࿩͢͜ͱ
   w 3FEVYͷ
   w ʮ஌͍ͬͯΔਓ͸஌͍ͬͯΔɺ஌Βͳ͍ਓ͸֮͑ͯͶʯ
   w ͱ͍͏஌ݟʹ͍ͭͯ࿩͠·͢
   w ʮࡉ͔͍ʯͱ͍͏ͱඍົͳؾ͕ͨ͠ͷͰʁ෇͚·ͨ͠
   w ʮେ૚ͳ࿩͡Όͳ͍ʯͱ͍͏ҙຯ߹͍͔΋͠Εͳ͍
   w Α͏͸খωλͰ͢
   

   View Slide

4. ͳΜͰʁ
   w 3FEVY͸͍ͩͿރΕ͍ͯΔ͕ɺ
   w ੲ͔Β΍ͬͯΔਓͱ࠷ۙ͸͡ΊͨਓͰ

   ஌ࣝͷ։͖͕େ͖͍ؾ͕͢Δ
   w ͦͷ஌ࣝͷ։͖ΛຒΊΔ΋ͷ΋͋Μ·Γͳ͍ؾ͕͢Δ
   w ͳͷͰɺ࠷࣭ۙ໰͞Εͨ͜ͱ΁ͷΞϯαʔ΍

   ͜Ε஌ͬͯͨΒศརͱ͍͏͜ͱΛ࿩͠·͢
   w ஌͍ͬͯΔਓʹͱͬͯ͸

   ʮ౰ͨΓલ͡ΌΜʯΈ͍ͨͳ࿩͔΋͠Εͳ͍͕ྃ͝ঝ͍ͩ͘͞
   

   View Slide

5. ໨࣍
   w EJTQBUDIͷฦΓ஋
   w SFEVYUIVOLͷXJUI&YUSB"SHVNFOU
   

   View Slide

6. EJTQBUDIͷฦΓ஋
   

   View Slide

7. EJTQBUDIͷฦΓ஋
   w EJTQBUDI͸ฦΓ஋Λฦ͍ͯ͠Δ
   w αϯϓϧίʔυ౳Ͱར༻͞Ε͍ͯΔͷΛ

   ͋·Γݟ͔͚ͳ͍͕ɻ
   w ฦΓ஋͸EJTQBUDIͨ͠"DUJPOΛॲཧͨ͠

   .JEEMFXBSFʹΑͬͯมΘΔ
   w .JEEMFXBSF͕ແ͍PS

   Ͳͷ.JEEMFXBSF΋ॲཧ͠ͳ͔ͬͨ৔߹
   w "DUJPOΛฦ͢
   

   View Slide

8. SFEVYUIVOLͷ৔߹ɿ
   EJTQBUDIͨؔ͠਺ͷ݁ՌΛฦ͢
   

   View Slide

9. Ͳ͏͍͏࣌ʹศར͔ʁ
   w SFEVYUIVOLͷ৔߹
   w UIVOLΞΫγϣϯͷதͰ

   ผͷUIVOLΞΫγϣϯΛEJTQBUDI͢Δ৔߹
   w ݺͼग़ͨ͠UIVOLΞΫγϣϯͷ݁ՌΛݟͯ

   ৼΔ෣͍Λม͑Δ͜ͱ͕Ͱ͖Δ
   

   View Slide

10. αϯϓϧίʔυɿ
    σʔλΛऔಘ͢ΔΞΫγϣϯ
    

    View Slide

11. αϯϓϧίʔυɿ
    6*Λදࣔ͢ΔͨΊͷΞΫγϣϯ
    υϝΠϯϞσϧͱ6*ͷ4UBUFɾ"DUJPOΛ

    ͖ͬͪΓ෼͚Δ͜ͱ͕Ͱ͖Δ
    

    View Slide

12. w SFEVYUIVOLҎ֎͸෼͔Βͳ͍Ͱ͢CPX
    w ࢖͍ͬͯΔ.JEEMFXBSFͷ

    EJTQBUDIͷฦΓ஋Λௐ΂Δͱͳʹ͔ൃݟ͕͋Δ͔΋ʂ
    

    View Slide

13. SFEVYUIVOLͷ
    XJUI&YUSB"SHVNFOU
    

    View Slide

14. SFEVYUIVOLͷ
    XJUI&YUSB"SHVNFOU
    w UIVOL.JEEMFXBSFXJUI&YUSB"SHVNFOU BSHVNFOU
    
    w UIVOLΞΫγϣϯͷୈҾ਺ʹ

    ೚ҙͷ஋Λ౉͢͜ͱ͕Ͱ͖Δ
    

    View Slide

15. BQQMZ.JEEMFXBSF͢Δଆͷίʔυ
    

    View Slide

16. BQQMZ.JEEMFXBSF͢Δଆͷίʔυ
    

    View Slide

17. BDUJPOଆͷίʔυ
    

    View Slide

18. BDUJPOଆͷίʔυ
    

    View Slide

19. Կ͕͏Ε͍͠ͷ͔ʁ
    w ςετ͕গ͠γϯϓϧʹͳΔ
    w UIVOLΞΫγϣϯͷৼΔ෣͍ͷ֦ு͕༰қʹͳΔ
    

    View Slide

20. Α͋͘ΔUIVOLΞΫγϣϯͷίʔυྫ
    

    View Slide

21. Α͋͘ΔUIVOLΞΫγϣϯͷίʔυྫ
    BQJUTʹґଘ
    

    View Slide

22. KFTUNPDLΛ࢖ͬͯ୯ମςετ
    KFTUNPDLͰؔ਺Λ
    KFTUGOʹࠩ͠ସ͑Δ
    

    View Slide

23. &YUSB"SHVNFOU͔ΒBQJΛ౉͢ɿ
    BQQMZ.JEEMFXBSFଆͷίʔυ
    

    View Slide

24. &YUSB"SHVNFOU͔ΒBQJΛ౉͢ɿ
    BDUJPOଆͷίʔυ
    

    View Slide

25. &YUSB"SHVNFOU͔ΒBQJΛ౉͢ɿ
    BDUJPOଆͷίʔυ
    BQJUT΁ͷґଘʢJNQPSUจʣ͕ແ͘ͳΔ
    

    View Slide

26. मਖ਼ޙͷςετίʔυ
    

    View Slide

27. मਖ਼ޙͷςετίʔυ
    

    View Slide

28. मਖ਼ޙͷςετίʔυ
    KFTUNPDLෆཁ
    ςετ͕ͪΐͬͱγϯϓϧʹ
    

    View Slide

29. ৼΔ෣͍ͷ֦ு͕༰қʹͳΔ
    w &YUSB"SHVNFOUͷBQJͷܕΛ۩৅Ͱ͸ͳ͘

    ந৅ʢΠϯλϑΣʔεʣʹ͢Δ͜ͱͰɺ
    w UIVOLΞΫγϣϯΛมߋͤͣʹৼΔ෣͍Λ֦ுͰ͖Δ
    

    View Slide

30. BQQMZ.JEEMFXBSFଆͷίʔυɿ
    BQJͷܕΛந৅ʢΠϯλϑΣʔεʣʹ͢Δ
    

    View Slide

31. BQQMZ.JEEMFXBSFଆͷίʔυɿ
    BQJͷΠϯλϑΣʔεΛ࣮૷
    BDUJPOΛม͑ͣʹৼΔ෣͍Λ֦ுͰ͖Δ
    ྫɿ
    3FTU"1*͔Β(SBQI2-ʹม͑Δ
    443ͱ$43Ͱσʔλऔಘํ๏Λม͑Δ
    ςετ༻ͷϞοΫ"1*ΫϥΠΞϯτ
    

    View Slide

32. ͓ΘΓ
    w ࣗ෼ʹͱͬͯ౰ͨΓલͰ΋

    ଞऀʹͱͬͯͦ͏ͱ͸ݶΒͳ͍
    w ͨ·ʹυΩϡϝϯτΛݟฦ͢ͱɺ

    ৽͍͠ൃݟ͕͋Δ͔΋
    

    View Slide

33. ͋Γ͕ͱ͏
    ͍͟͝·ͨ͠
    

    View Slide