Ducksで始める！辛くないReact Redux生活 / Let's start non-painful React Redux Life with Ducks!

Transcript

1. 4NBSUQIPOF
   "QQ
   1SPKFDU
   3FBDU
   ษڧձ
   BU
   ,*5
   '.
   Ҫؔ
   ఓ࿕
   !TBJUPFLV %VDLTͰ࢝ΊΔʂ
   ਏ͘ͳ͍3FBDU
   3FEVYੜ׆
2. Ҫؔ
   ఓ࿕
   
   5BEBP
   *4&,* גࣜձࣾ$JS,JU
   Πϯλʔϯ !TBJUPFLV ۚ୔޻ۀେֶ
   ϝσΟΞ৘ใֶՊ
   ೥
3. ࠓ೔࿩͢͜ͱ  3FEVYͷ͓͞Β͍
    3FBDU
   3FEVYͷ೉͠͞
    %VDLTͱ͸
4. ࠓ೔࿩͞ͳ͍͜ͱ  ঢ়ଶ؅ཧͷඞཁੑ
    .JEEMFXBSFʹ͍ͭͯ
    5ZQF4DSJQUͷಋೖ
5. 3FEVYͷ͓͞Β͍
6. JavaScriptͷΞϓϦέʔγϣϯͰ ঢ়ଶ؅ཧΛ͢ΔͨΊͷϥΠϒϥϦ
7. Component Reducer Store State Action State State Action Event Dispatch
8. ͜Ε͕ͻͱ໨Ͱ෼͔Δਓ✋
9. ๻͸Θ͔Γ·ͤΜͰͨ͠
10. ؆୯ͳΧ΢ϯλʔΞϓϦͰ ͓͞Β͍͠·͠ΐ͏ʂ IUUQTHJUIVCDPNTBJUPFLVSFBDUSFEVYTBNQMF
11. Component Reducer Store State Action State State Action Event Dispatch
12. PO$MJDLͰΠϕϯτൃՐ
13. Component Reducer Store State Action State State Action Event Dispatch
14. "DUJPO
    
    %JTQBUDI "DUJPO
    UZQFΛ࣋ͭΦϒδΣΫτ %JTQBUDI
    "DUJPOΛ4UPSFʹΘͨ͢ "DUJPO$SFBUPS
    "DUJPOΛฦؔ͢਺
15. Component State Action Event Dispatch Reducer Store State Action State
16. 3FEVDFS 4UBUFͱ"DUJPOΛड͚औͬͯ
    ߋ৽͞Εͨ4UBUFΛฦؔ͢਺
17. Component Reducer Store State Action State State Action Event Dispatch
18. 4UPSF 3FEVDFSΛ΋ͱʹ
    4UPSFΛੜ੒ 1SPWJEFSʹ౉͢͜ͱͰ
    ༗ޮԽ
19. $POUBJOFS 4UBUFͱ%JTQBUDIΛ$PNQPOFOUʹ౉͢
20. ׬੒
21. 3FBDU
    3FEVYͷ೉͠͞
22. Component Reducer Store State Action State State Action Event Dispatch
23. ϑϩʔ͕ෳࡶ ʢࠓͷղઆͰղܾͨͭ͠΋Γʣ
24. IUUQTHJUIVCDPN4NBSU1IPOF"QQT1SPKFDU#PPL4FFLFS
25. σΟϨΫτϦߏ଄͕ෳࡶ
26. ΋ͬͱγϯϓϧʹ͍ͨ͠ΑͶ
27. IUUQTHJUIVCDPNFSJLSBTEVDLTNPEVMBSSFEVY
28. %VDLTͱ͸
29. ֤σΟϨΫτϦʹ෼ࢄ͍ͯ͠Δ ActionTypes / Action / Reducer Λ1ͭͷmoduleʹ·ͱΊΔͨΊͷϧʔϧ
30. - ReducerΛdefault export͢Δ - ActionCreatorΛexport͢Δ - ActionType͸ɹɹɹɹɹɹɹ ɹ app-name/reducer/ACTION_TYPEʹ͢Δ ඞਢͷϧʔϧ
31. 4UBUF "DUJPO5ZQFT "DUJPO$SFBUPST 3FEVDFS
33. γϯϓϧ✨
34. ·ͱΊ  3FEVY͸ͭΒΈ͕ଟ͍
     %VDLTʹ͸͍͔ͭ͘ϧʔϧ͕͋Δ
     %VDLTͰγϯϓϧʹӡ༻Մೳ
35. Α͍React ReduxϥΠϑΛʂ