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

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

F2efbf06e1ada70dc431f6c31a5a399d?s=128

Tadao Iseki

April 26, 2019
Tweet

Transcript

  1. 4NBSUQIPOF"QQ1SPKFDU3FBDUษڧձBU,*5 '.Ҫؔఓ࿕!TBJUPFLV %VDLTͰ࢝ΊΔʂ ਏ͘ͳ͍3FBDU3FEVYੜ׆

  2. Ҫؔఓ࿕5BEBP*4&,* גࣜձࣾ$JS,JUΠϯλʔϯ !TBJUPFLV ۚ୔޻ۀେֶϝσΟΞ৘ใֶՊ೥

  3. ࠓ೔࿩͢͜ͱ  3FEVYͷ͓͞Β͍  3FBDU3FEVYͷ೉͠͞  %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. 3FBDU3FEVYͷ೉͠͞

  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

  32. None
  33. γϯϓϧ✨

  34. ·ͱΊ  3FEVY͸ͭΒΈ͕ଟ͍  %VDLTʹ͸͍͔ͭ͘ϧʔϧ͕͋Δ  %VDLTͰγϯϓϧʹӡ༻Մೳ

  35. Α͍React ReduxϥΠϑΛʂ