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

Reduxの細かい話 #react_fukuoka

Reduxの細かい話 #react_fukuoka

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

Hiroyuki ANAI

January 25, 2019
Tweet

More Decks by Hiroyuki ANAI

Other Decks in Programming

Transcript

  1. 3FEVYͷࡉ͔͍

    ۚ
    3FBDUษڧձ!෱ԬWPM
    !QJSPTJLJDL

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

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

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

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

    View full-size slide

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

    View full-size slide

  6. EJTQBUDIͷฦΓ஋

    View full-size slide

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

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

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

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

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

  13. SFEVYUIVOLͷ
    XJUI&YUSB"SHVNFOU

    View full-size slide

  14. SFEVYUIVOLͷ
    XJUI&YUSB"SHVNFOU
    w UIVOL.JEEMFXBSFXJUI&YUSB"SHVNFOU BSHVNFOU

    w UIVOLΞΫγϣϯͷୈҾ਺ʹ

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. BDUJPOଆͷίʔυ

    View full-size slide

  18. BDUJPOଆͷίʔυ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    ৽͍͠ൃݟ͕͋Δ͔΋

    View full-size slide

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

    View full-size slide