次はたぶん挫折しないredux(react-redux社内勉強会資料)

33ef4c1ebe619115b552db9a9f9a3509?s=47 sadnessOjisan
February 25, 2019

 次はたぶん挫折しないredux(react-redux社内勉強会資料)

react-reduxの社内勉強資料のうち、公開できる箇所を公開します。

スライド上では、課題の解説はあまりしていません。
課題の回答・解説は以下のレポジトリをご参照ください。

https://github.com/sadnessOjisan/todo_react
https://github.com/sadnessOjisan/react-brother-bothering-update-example
https://github.com/sadnessOjisan/redux-count-handson
https://github.com/sadnessOjisan/react-redux-count-handson
https://github.com/sadnessOjisan/react-redux-todo

33ef4c1ebe619115b552db9a9f9a3509?s=128

sadnessOjisan

February 25, 2019
Tweet

Transcript

  1. ࣍͸ͨͿΜ࠳ં͠ͳ͍3FEVY 3FBDU3FEVYࣾ಺ษڧձ Ҫख ༏ଠ ࢁޱ ༟࢘ தଜ๕߂ ؠԼଠ ೔໺ᖒ׻໵ Ԭాݰ࠸౉ลو໌

    ాதݡथ  
  2. ͸͡Ίʹ 2

  3. ͜ͷߨ࠲ͷҐஔ෇͚ • 3FBDUߨ࠲ • ͳͥɺ3FBDU͕ඞཁʹͳͬͨͷ͔Λղઆ͢Δճ • ඇಉظॲཧߨ࠲ • $BMMCBDL 1SPNJTF

    "TZOD "XBJUͰ"1*ͷ'FUDIΛؤுΔճ • ؀ڥߏஙߨ࠲ • /1. #BCFM XFCQBDLͷઃఆΛղઆ͢Δճ • 3FEVYߨ࠲ • 3FBDUΛར༻ͨ͠େن໛։ൃߨ࠲ • 3FEVDFSͷ෼ׂ΍NJEEMFXBSFͷ࢖͍ํΛֶͿɻ 3
  4. ձ৔ͷ஫ҙ • "TJB2VFTUࣾ͞ΜͷޚްҙʹΑΓɺձ৔Λఏڙͯ͠௖͖·ͨ͠ɻ • r ͸ϑϦʔεϖʔεͱͳΔͨΊɺ͜ͷ࣌ؒͰҰ౓ɺன৯ͷٳܜͱ͠·͢ɻ • τΠϨ͸ɺձ৔ग़ͨ൶ͷ޲͜͏ͷ֊ஈΛొͬͯ̒֊ଆ͕ঁࢠτΠϨɺ̐֊ଆ͕உࢠτΠϨ Ͱ͢ɻ 4

    EV 廊下 階段 会場 受付
  5. 5BCMFPG$POUFOUT  ͸͡Ίʹ  ࠲ֶ3FEVYΛֶͿϞνϕʔγϣϯʹ͍ͭͯ B ͳͥ"JS͸3FBDUΛ࠾༻ͨ͠ͷ͔ͳͥࢲͨͪ͸3FBDU3FEVYΛֶͿͷ͔ C ͳͥ3FEVYΛֶͿͷ͔3FBDU୯ମͰར༻͢ΔͱԿ͕ਏ͘ͳΔͷ͔ D

    3FEVYͰঢ়ଶΛ؅ཧ͢ΔͨΊʹ஌Δ΂͖֓೦  ϋϯζΦϯ3FEVYͰΧ΢ϯτػೳΛ࡞Δ  ϥϯν  ࠲ֶ3FBDU͔Β3FEVYΛར༻͢Δʹ͸Ͳ͏͢Ε͹͍͍͔ B SFBDUSFEVYͰొ৔͢Δ֓೦  ϋϯζΦϯ3FBDU3FEVYͰΧ΢ϯτΞϓϦΛ࡞Δ  ϋϯζΦϯ3FBDU3FEVYͰ5PEPΞϓϦΛ࡞Δ 5
  6. ࣄલ४උ ࣄલʹ఻͍͑ͯ·͕ͨ͠ɺ΋͠४උ͕Ͱ͖͍ͯͳ͍ํ͸ɺͪ͜Βͷ४උ Λ͓ئ͍͠·͢ɻϋϯζΦϯ·Ͱʹ༻ҙ͍ͯͩ͘͠͞ɻ .VTU • (JU • (JU)VCͷΞΧ΢ϯτ(JUUFS΁ͷϩάΠϯ #FUUFS •

    74$PEF 'MPX-BOHVBHF4VQQPSUͷFYUFOTJPO 6
  7. 74$PEFͰͷ։ൃΛਪ঑͠·͢ u ߴػೳͳΤσΟλ͸ɺܕ৘ใΛಡΈࠐΈɺࣗಈͰิ׬΍ఏҊΛͯ͠ ͘Ε·͢ɻ u αϯϓϧίʔυ͸ɺิ׬͕ޮ͖΍͘͢ͳΔΑ͏ʹɺώϯτ΍ղ౴ʹ ͨ͘͞Μܕ஫ऍΛೖΕ͍ͯ·͢ɻ u ͦΕΒ͸ɺ'MPXαϙʔτͷ͋ΔΤσΟλΛ࢖͏͜ͱͰܕΛ௥͍͔͚ ΒΕ·͢ɻ

    u $PEF4BOE#PYͰ΋͋Δఔ౓͸ܕΛಡΈऔͬͯ͘Ε·͢ɻ 7
  8. ར༻͢Διʔείʔυ 8 "QQ໊ 63- આ໌ UPEP@SFBDU IUUQTHJUIVCDPNTBEOFTT0KJTBOUPEP@ SFBDU લճͷϋϯζΦϯͰ։ൃͨ͠UPEPΞϓϦͷճ ౴Ͱ͢ɻࠓ೔͸͜ΕΛSFEVYԽ͢Δ͜ͱ͕࠷

    ऴ໨ඪͰ͢ɻ SFBDUCSPUIFSCPUIFSJOHVQEBUFFYBNQMF IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU CSPUIFSCPUIFSJOHVQEBUFFYBNQMF ܑఋίϯϙʔωϯτΛSFEVYͳ͠Ͱߋ৽͢Δ ͱΊΜͲ͍͘͞ྫ SFEVYDPVOUIBOETPO IUUQTHJUIVCDPNTBEOFTT0KJTBOSFEVY DPVOUIBOETPO SFEVYͰ؆୯ͳঢ়ଶ؅ཧΛ͠·͢ʢΧ΢ϯ τʣ SFBDUSFEVYDPVOUIBOETPO IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU SFEVYDPVOUIBOETPO SFEVYͰ؅ཧ͍ͯ͠ΔΧ΢ϯτTUBUFΛSFBDU ͔ΒΞΫηεɾߋ৽Ͱ͖ΔΑ͏ʹ͠·͢ɻ SFBDUSFEVYUPEP IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU SFEVYUPEP UPEPϦετΛSFEVYԽͨ͠΋ͷ ͦΕͧΕɺ׬੒ܗ΍಺෦࢓༷ &4%PD Λ/FUMJGZʹσϓϩΠ͍ͯ͠·͢ɻ ϦϯΫ͸ɺ֤ϨϙδτϦͷ3&"%.&ʹॻ͍ͯ͋Γ·͢ɻ
  9. ࠓ೔ͷ໨ඪ ①SFBDUSFEVYͷ࢖͍ํΛ֮͑Δʂ ②SFBDUͱSFBDUSFEVYͷҧ͍Λ஌Δʂ ③SFBDUͰ࡞ΒΕͨ5PEPΞϓϦΛɺSFBDUSFEVYͰஔ͖׵͑Δʂ 9

  10. ࠓ೔ͷࢀՃऀͷಛ௃ u 3FBDUܦݧऀ u ʢͱ͍͏ΑΓɺઌ݄ܦݧͯ͠΋ΒͬͨͷͰɾɾɾʣ u SFBDUSFEVYΛฉ͍ͨ͜ͱ͕͋Δ u SFBDUSFEVYʹ࠳ંͨ͜͠ͱ͕͋Δ SFEVYʹ࠳ંͨ͜͠ͱ͕͋ΔํΛ

    ϝΠϯλʔήοτͱͨ͠ษڧձͰ͢ɻ 10
  11. SFBDUSFEVYͷͭ·͖ͮϙΠϯτ u ొ৔ਓ෺͕ଟ͍ u SFBDUSFEVY΍SFEVY͕ཁٻ͢Δؔ਺͕ɺͳͥඞཁʹͳΔ͔Θ͔Γʹ ͍͘ Ø FY ఆٛࣗମ͸SFEVYͱؔ܎͕ͳ͍ͨͩͷؔ਺ͱͳΔ΋ͷ͕ଟ͍ u

    最小限を動かすフェイズに至れなく、検証しながら壊しながら学ぶというこ とが難しい Ø "Λ࡞ΔͨΊʹ͸#͕ඞཁ͕ͩɺ#Λಈ͔ͨ͢Ίʹ͸"ͷϝιου͕ඞཁͩ 11
  12. SFBDUSFEVY͸Ͳ͏ֶ΂͹͍͍͔ u SFEVYͱSFBDUSFEVY͸ઈରʹ෼ֶ͚ͯͿ Ø SFEVYͱSFBDUSFEVY͸ผͩΑʂ Ø SFEVY୯ମ͸SFBDU͕ແͯ͘΋ಈ͘Αʂ u ·ͣ͸֓೦ͱ࢖͍͔͚֮ͨͩ͑ͯ͠·͓͏ʂ u

    ಈ͘͜ͱ͕֬໿͞Ε͍ͯΔαϯϓϧʢެࣜͳͲʣʹܕΛॻ͍ͯΈΔ Ø Ͳͷؔ਺͕ɺͲΜͳҾ਺Λཁٻ͠ɺͲΜͳฦΓ஋Λฦ͢΂ֶ͖͔͕΂Δ 12
  13. ࠓ೔ͷڭࡐ΍ਐΊํͷಛ௃ u SFBDUSFEVY͕ɺSFBDUͷͲΜͳͭΒΈΛղফ͔ͨ͠Λղઆ͠·͢ u ߨٛܗࣜͷ࠲ֶ͸গͳΊͰ͢ɻ్தͰΫΠζΛڬΈͳ͕ΒͷϥΠϒ ίʔσΟϯά͕ଟ͍Ͱ͢ɻΈͳ͞Μͱͷձ࿩ΛݩʹߨٛΛਐΊ͍ͯ ͖·͢ɻΘ͔Βͳ͍͜ͱ͕͋Ε͹దٓɺൃݴ͍ͯͩ͘͠͞ɻ u ਖ਼ղྫΛݩʹ֦ு͍ͯ͘͠ϋϯζΦϯΛ༻ҙ͍ͯ͠·͢ɻϝϯλʔ ͕८ճ͢ΔͷͰɺ͜͜Ͱ΋ࣗ༝ʹ࣭໰Λड͚෇͚ΒΕ·͢ɻ

    13 Έͳ͞ΜͷཧղͷͨΊɺԁ׈ͳӡӦͷͨΊʹɺ ԕྀͳ࣭͘໰͍ͯͩ͘͠͞ @
  14. ΋͠ϋϯζΦϯͰ٧·ͬͨΒʁ u Բͤͣɺ࣭໰͍ͯͩ͘͠͞ɻࠓ೔ͷϝϯλʔ͸ɺൺֱతੑ͕֨ྑ͍ ਓ͕ͨͪଟΊͰ͢ɻ u αϯϓϧίʔυͷܕఆٛΛ௥ͬͯΈ͍ͯͩ͘͞ɻͲ͜ʹԿΛೖΕͨ ΒͲ͏ಈ͔͘ΛɺίϝϯτͱܕͰఆ͍ٛͯ͠·͢ɻ u ܕ͸ͦΕͧΕɺ&4%PDͱ'MPXͰهड़ͨ͠ϒϥϯνΛͭ༻ҙ͍ͯ͠ ·͢ɻ'MPXʹۤखҙ͕ࣝ͋Ε͹ɺίϝϯτ΍ɺ&4%PDͷΈΛ௥ͬͯ

    ͍ͩ͘͞ɻ 14
  15. ܕͷಡΈํ 15 u ܕ͸ม਺΍Ҿ਺͕ॴଐ͢Δάϧʔϓͷ͜ͱ Ͱ͢ɻ u IPHF ͰIPHFܕΛม਺΍Ҿ਺ʹએݴ͢Δ ͜ͱ͕Ͱ͖·͢ɻ u

    DPOTU G BSHOVNCFS TUSJOH\^ ͸ɺOVNCFSܕΛҾ਺ʹɺTUSJOHܕͷฦΓ ஋GΛఆ͍ٛͯ͠·͢ɻ u ܕ͕͋Ε͹ɺͲΜͳؔ਺ʹͲΜͳม਺Λ౉ ͤ͹͍͍͔͕Θ͔ΔͷͰɺίʔυΛཧղ͠ ΍͘͢ͳΓ·͢ɻ カーソルを合わせると、型 の定義が表示されます。 型の上で「コマンドキー + クリック」すると 型の定義元にジャンプできます。
  16. 5BCMFPG$POUFOUT  ͸͡Ίʹ  ࠲ֶ3FEVYΛֶͿϞνϕʔγϣϯʹ͍ͭͯ B ͳͥ"JS͸3FBDUΛ࠾༻ͨ͠ͷ͔ͳͥࢲͨͪ͸3FBDU3FEVYΛֶͿͷ͔ C ͳͥ3FEVYΛֶͿͷ͔3FBDU୯ମͰར༻͢ΔͱԿ͕ਏ͘ͳΔͷ͔ D

    3FEVYͰঢ়ଶΛ؅ཧ͢ΔͨΊʹ஌Δ΂͖֓೦  ϋϯζΦϯ3FEVYͰΧ΢ϯτػೳΛ࡞Δ  ϥϯν  ࠲ֶ3FBDU͔Β3FEVYΛར༻͢Δʹ͸Ͳ͏͢Ε͹͍͍͔ B SFBDUSFEVYͰొ৔͢Δ֓೦  ϋϯζΦϯ3FBDU3FEVYͰΧ΢ϯτΞϓϦΛ࡞Δ  ϋϯζΦϯ3FBDU3FEVYͰ5PEPΞϓϦΛ࡞Δ 16
  17. 3FEVYΛֶͿϞνϕʔγϣϯ 17

  18. ฐࣾΛऔΓר͘"QQ։ൃ؀ڥ 18 ػೳɾॊೈੑɾ։ൃ଎౓ʹର͢Δ ཁٻ΍೉қ౓͕ߴ͘ͳ͍ͬͯΔ ͜Ε·Ͱͷ։ൃ ϝσΟΞ։ൃ اը΍ಛू୯ҐͰͷػೳཁ݅ ʹ஧࣮ͳ։ൃ ίϯςϯπΛૌٻ͢ΔͨΊͷ ੩తͳ8FCϖʔδ

    ࠷ۙ૿͑ͭͭ͋Δ։ൃ 4BB4։ൃ ࢖͍΍͢͞Λߟྀ͠ɺܭଌ͠ͳ͕ ΒΤϯϋϯεΛ܁Γฦ͢։ൃ ಈతͰߴػೳͰͨ͘͞Μͷঢ়ଶ΍ ෼ذΛ࣋ͬͨෳࡶͳ"QQ
  19. 19 ͖ͼ͠ʔ

  20. ͦ͜Ͱ3FBDUΛ࢖ͬͨϑϩϯτΤϯυ։ൃ u 3FBDUͬͯͲΜͳϥΠϒϥϦʁ u 6*Λએݴతʹॻ͚Δʢ%FDMBUJWFʣ u UIを宣言すれば、状態やデータを勝手にレンダリングしてくれるよ! (React will efficiently

    update and render just the right components when your data changes.) u 6*Λύʔπ͝ͱʹ࡞͍ͬͯ͘ $PNQPOFOU#BTFE u UIのパーツを作って、それを組み合わせてページを作るよ! (Build encapsulated components that manage their own state, then compose them to make complex UIs.) 20 G TUBUF 6*ͱͳΔੈքͰɺύʔπΛ૊Έ߹Θͤͯ։ൃʂ
  21. 3FBDU͸શͯΛղܾ͢Δۜͷ஄ؙ ͔΋͠Εͳ͍ u 6*Λએݴ͢Δ͜ͱͰɺ൥ࡶͳঢ়ଶߋ৽ɺঢ়ଶ͔Βͷ6*ੜ੒ΛߦΘͳ ͯ͘͢ΈɺιʔείʔυͷෳࡶੑΛݮΒ͢ u ίϯϙʔωϯτΛ࠶ར༻͢Δ͜ͱͰɺ։ൃ޻਺ΛݮΒͤΔ u ͞ΒʹίϯϙʔωϯτΛ෼ׂ͢Δ͜ͱͰ෼ۀ΋͠΍͘͢ɺೲظΛ୹ ॖͰ͖Δ

    21 3FBDUΛಋೖ͢Δ͜ͱͰɺ ෳࡶͳཁ݅Λγϯϓϧʹߴ଎ʹ։ൃͰ͖Δɾɾɾʁ
  22. 22 খن໛։ൃʹ͓͍ͯͷΈͷ࿩

  23. େن໛ͳ։ൃʹ͓͚Δɺ 6*ͷ໦ߏ଄ͷ؅ཧ͸؆୯Ͱ͸ͳ͍ɻ TUBUF΍ϋϯυϥʔͷ఻ൖ͸ɺ໘౗ʹͳΔ 23

  24. TUBUF΍ϋϯυϥͷόέπϦϨʔ 24 Root ίϯϙʔωϯτ AB2 ABB3 A1 D1 E1 DA2

    DB2 TUBUF
  25. TUBUF΍ϋϯυϥͷόέπϦϨʔ 25 Root ίϯϙʔωϯτ AB2 ABB3 A1 D1 E1 DA2

    DB2 TUBUF A1のstateをABB3に伝えたい
  26. TUBUF΍ϋϯυϥͷόέπϦϨʔ 26 Root ίϯϙʔωϯτ AB2 ABB3 A1 D1 E1 DA2

    DB2 TUBUF A1 A1
  27. TUBUF΍ϋϯυϥͷόέπϦϨʔ 27 Root ίϯϙʔωϯτ AB2 ABB3 A1 D1 E1 DA2

    DB2 TUBUF まあまだ許容範囲
  28. TUBUF΍ϋϯυϥͷόέπϦϨʔ 28 Root ίϯϙʔωϯτ AB2 ABB3 A1 D1 E1 DA2

    DB2 TUBUF ABB3のstateを、ABB3がクリックされ た時に、 E1のstateに応じて更新した い
  29. TUBUF΍ϋϯυϥͷόέπϦϨʔ 29 Root ίϯϙʔωϯτ AB2 ABB3 A1 D1 E1 DA2

    DB2 TUBUF  &ͷTUBUFΛड͚औΔͨΊͷؔ਺'Λఆٛ
  30. TUBUF΍ϋϯυϥͷόέπϦϨʔ 30 Root ίϯϙʔωϯτ AB2 ABB3 A1 D1 E1 DA2

    DB2 TUBUF  &ͷTUBUFΛड͚औΔͨΊͷؔ਺'Λఆٛ  'Λ࣮ߦ͠ɺ&ͷ TUBUFΛϧʔτʹ఻͑Δ E1
  31. TUBUF΍ϋϯυϥͷόέπϦϨʔ 31 Root ίϯϙʔωϯτ AB2 ABB3 A1 D1 E1 DA2

    DB2 TUBUF  &ͷTUBUFΛड͚औΔͨΊͷؔ਺'Λఆٛ  'Λ࣮ߦ͠ɺ&ͷ TUBUFΛϧʔτʹ఻͑Δ E1 E1 E1 E1
  32. ܑఋͷঢ়ଶΛड͚౉͢͠Δྫ 32 url: https://github.com/sadnessOjisan/react-brother-bothering-update-example ヘッダはログイン状態を管理している。 ボディは入力状態を管理している ボディを入力中は、ログアウト機能をロックしたい。 => ボディの親(=ヘッダの親)を兄弟の状態を経由させて渡す必要あり。

  33. TUBUF΍ϋϯυϥͷόέπϦϨʔ 33 Root ίϯϙʔωϯτ AB2 ABB3 A1 D1 E1 DA2

    DB2 TUBUF  &ͷTUBUFΛड͚औΔͨΊͷؔ਺'Λఆٛ  'Λ࣮ߦ͠ɺ&ͷ TUBUFΛϧʔτʹ఻͑Δ E1 E1 E1 E1 なかなかめんどくさい
  34. Ұൠతʹɺܑఋཁૉͷঢ়ଶͷಡΈࠐΈ΍ɺ ঢ়ଶͷߋ৽͸ΊΜͲ͍͘͞ 34

  35. ΫΠζ 35 ઌ΄Ͳͷݱ৅ΛͳΜͱݴ͏Ͱ͠ΐ͏ʁ

  36. 36 QSPQTόέπϦϨʔ

  37. 37 ղܾࡦ͸ʁ

  38. ղܾࡦ u TUBUFΛSPPUίϯϙʔωϯτ͚͕ͩ࣋ͪɺTUBUFͱͦΕΛߋ৽͢Δϋ ϯυϥΛࢠڙίϯϙʔωϯτʹ౉͢ 38 ϝϦοτ • ࢠ͔Β਌ʹ஋΍ϋϯυϥΛ౉͢൥Θ͠͞ Λ׬શʹͳͤ͘Δ σϝϦοτ

    • ਌ίϯϙʔωϯτ͕ΊͪΌͪ͘Όେ͖͘ ͳͬͯ͠·͍ɺ؅ཧ͕େมͦ͏ • όέπϦϨʔͷํ޲͸౷ҰͰ͖Δ͕ɺό έπϦϨʔࣗମ͸ͳ͘ͳ͍ͬͯͳ͍ • ίϯϙʔωϯτͷπϦʔࣗମ͕มΘΔͱɺ मਖ਼͕ࠔ೉
  39. ղܾࡦͷྑ͍ͱ͜Ζ u TUBUFΛ؅ཧ͢Δ৔ॴ͕Օॴʹ౷ҰͰ͖ɺݟ௨͕͠ྑ͘ͳΔɻσʔ λอ؅৔ॴΛ୯Ұʹ͢Δߟ͑ํ͸SFEVYʹ΋௨͡Δ u σʔλͷྲྀΕ͕ํ޲ʹݶఆ͞ΕΔɻίϯϙʔωϯτ͕૿͑ͯ΋ɺ σʔλϑϩʔʹ͸Өڹ͕ͳ͍ʢόέπϦϨʔ͢Ε͹͍͍͚ͩͳͷ Ͱʣɻ୯Ұσʔλϑϩʔ ͷߟ͑ํ͸SFEVYʹ΋௨͡Δ 39

  40. ղܾࡦ u Ͳ͔͜ΒͰ΋TUBUFͱɺߋ৽͢ΔϋϯυϥΛಡΈࠐΉ͜ͱ͕Ͱ͖Δ࢓ ૊ΈΛ࡞Δ 40 SFEVY SFBDUSFEVY

  41. SFBDU SFEVY͕໨ࢦ͢ੈք 41 https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/

  42. SFEVY SFBDUSFEVY͕ͯ͘͠ΕΔ͜ͱ u ΞϓϦέʔγϣϯͷঢ়ଶΛอଘͯ͘͠ΕΔ৔ॴΛఏڙ u ΞϓϦέʔγϣϯͷঢ়ଶΛߋ৽͢Δ࢓૊ΈΛఏڙ u ΞϓϦέʔγϣϯͷঢ়ଶΛ6*ʹ൓ө͢Δ࢓૊ΈΛఏڙ 42

  43. SFEVYͱ͸ u ঢ়ଶ؅ཧΛͯ͘͠ΕΔϥΠϒϥϦ u ঢ়ଶΛTUPSFͱ͍͏৔ॴͰ؅ཧɺSFEVDFSͱ͍͏࢓૊ΈͰঢ়ଶΛߋ৽ ͯ͘͠ΕΔ u ͲΜͳ෩ʹঢ়ଶΛߋ৽ͯ͠΄͍͔͠ɺSFEVDFSʹϝοηʔδΛ఻͑ͯ ͋͛Δ͜ͱͰɺSFEVDFS͕TUPSFΛߋ৽ͯ͘͠ΕΔ 3FBDUͱซ༻͢Ε͹ɺ3FBDUͷTUBUFͱ

    TFU4UBUFͷ໾ׂΛ୲ͬͯ͘ΕΔ 43
  44. SFEVYͰঢ়ଶΛߋ৽͢Δྫ 44 const redux = require("redux"); const initialState = {

    count: 0 }; const reducer = (state = initialState, action) => { switch (action.type) { case "COUNT_UP": return { ...state, count: state.count + 1 }; default: return; } }; const store = redux.createStore(reducer); store.dispatch({ type: "COUNT_UP" });
  45. SFEVYͰঢ়ଶΛߋ৽͢Δྫ 45 const redux = require("redux"); const initialState = {

    count: 0 }; const reducer = (state = initialState, action) => { switch (action.type) { case "COUNT_UP": return { ...state, count: state.count + 1 }; default: return; } }; const store = redux.createStore(reducer); store.dispatch({ type: "COUNT_UP" }); Count数を状態として扱うことを宣言する
  46. SFEVYͰঢ়ଶΛߋ৽͢Δྫ 46 const redux = require("redux"); const initialState = {

    count: 0 }; const reducer = (state = initialState, action) => { switch (action.type) { case "COUNT_UP": return { ...state, count: state.count + 1 }; default: return; } }; const store = redux.createStore(reducer); store.dispatch({ type: "COUNT_UP" }); どういうときに、どういう風に状態を更新 するかを定義する。
  47. SFEVYͰঢ়ଶΛߋ৽͢Δྫ 47 const redux = require("redux"); const initialState = {

    count: 0 }; const reducer = (state = initialState, action) => { switch (action.type) { case "COUNT_UP": return { ...state, count: state.count + 1 }; default: return; } }; const store = redux.createStore(reducer); store.dispatch({ type: "COUNT_UP" }); COUNT_UP という命令が来たら、カウント をアップすることを定義する
  48. SFEVYͰঢ়ଶΛߋ৽͢Δྫ 48 const redux = require("redux"); const initialState = {

    count: 0 }; const reducer = (state = initialState, action) => { switch (action.type) { case "COUNT_UP": return { ...state, count: state.count + 1 }; default: return; } }; const store = redux.createStore(reducer); store.dispatch({ type: "COUNT_UP" }); 上で作った状態と状態更新ルールを持っ た状態管理オブジェクトを作る
  49. SFEVYͰঢ়ଶΛߋ৽͢Δྫ 49 const redux = require("redux"); const initialState = {

    count: 0 }; const reducer = (state = initialState, action) => { switch (action.type) { case "COUNT_UP": return { ...state, count: state.count + 1 }; default: return; } }; const store = redux.createStore(reducer); store.dispatch({ type: "COUNT_UP" }); 状態を保つオブジェクトに対して、状態更 新の命令を送る
  50. SFEVYͷొ৔ਓ෺ u TUPSF u BDUJPO u SFEVDFS 50

  51. TUPSF།Ұͷঢ়ଶͷอ؅৔ॴ u ΞϓϦέʔγϣϯͰ།Ұͷঢ়ଶ؅ཧ৔ॴ u 3FEVYʹ͸ શͯͷঢ়ଶΛTUPSFͷΈ͕؅ཧ͢Δ ͱ͍͏ݪଇ͕͋Δ u ޙड़͢ΔSFEVDFSΛҾ਺ʹɺDSFBUF4UPSF ͱ͍͏ϝιουΛ࣮ߦ͢

    Δ͜ͱͰ࡞Δ͜ͱ͕Ͱ͖Δ 51 const store = redux.createStore(reducer);
  52. SFEVDFSTUPSFΛߋ৽͢Δؔ਺ u ΞϓϦέʔγϣϯͰ།ҰɺTUPSFΛߋ৽Ͱ͖Δ࢓૊Έ u 3FEVYʹ͸ มߋ͸७ਮͳؔ਺͔ΒߦΘΕΔ΂͖ ͱ͍͏ݪଇ͕͋Δ u 3FEVDFS͸ݱࡏͷTUPSFͱޙड़͢ΔBDUJPOΛड͚औΓɺBDUJPOʹԠ͡ ͯ৽͍͠TUPSFΛฦؔ͢਺ɻͨͩͷؔ਺ɻ

    52
  53. SFEVDFSTUPSFΛߋ৽͢Δؔ਺ 53 const reducer = (state = initialState, action) =>

    { switch (action.type) { case ”HOGE": return { ...state, message: ‘パンケーキ’ }; case ”FUGA": return { ...state, message: ‘シフォンケーキ’ }; case "RESET": return initialState; default: return; } }; {type: “HOGE”}を受け取ると、新しいstate として{message: ‘パンケーキを返す’}
  54. SFEVDFSTUPSFΛߋ৽͢Δؔ਺ 54 const reducer = (state = initialState, action) =>

    { switch (action.type) { case ”HOGE": return { ...state, message: ‘パンケーキ’ }; case ”FUGA": return { ...state, message: ‘シフォンケーキ’ }; case "RESET": return initialState; default: return; } }; {type: “FUGA”}を受け取ると、新しいstate として{message: ‘シフォンケーキ’}を返す
  55. BDUJPOߋ৽಺༰ʹ͍ͭͯͷϝοηʔδ u TUPSFʹରͯ͠ɺͲͷΑ͏ͳมߋΛͯ͠΄͍͔͠ॻ͔Εͨϝοηʔδ u \UZQFTUSJOH QBZMPBE NJYFE^ܗࣜͷͨͩͷΦϒδΣΫτ u UZQF͸༷ʑͳΞΫγϣϯͷࣝผࢠɺQBZMPBE͸ߋ৽ͯ͠΄͍͠σʔ λɻUZQF͸ඞਢ͕ͩɺQBZMPBE͸ͳͯ͘΋ྑ͍ɻ

    UZQF΍QBZMPBEͱ ͍͏Ωʔ໊͸׳श u store.dispatch(action) ΛݺͿͱɺSFEVDFS͕࣮ߦ͞ΕΔ ʮBDUJPOΛEJTQBUDI͢Δʯͱදݱ͞ΕΔ ɻͦͷ݁ՌɺBDUJPOΛݩʹ TUPSFΛߋ৽͢Δ͜ͱ͕Ͱ͖Δɻ 55
  56. 5BCMFPG$POUFOUT  ͸͡Ίʹ  ࠲ֶ3FEVYΛֶͿϞνϕʔγϣϯʹ͍ͭͯ B ͳͥ"JS͸3FBDUΛ࠾༻ͨ͠ͷ͔ͳͥࢲͨͪ͸3FBDU3FEVYΛֶͿͷ͔ C ͳͥ3FEVYΛֶͿͷ͔3FBDU୯ମͰར༻͢ΔͱԿ͕ਏ͘ͳΔͷ͔ D

    3FEVYͰঢ়ଶΛ؅ཧ͢ΔͨΊʹ஌Δ΂͖֓೦  ϋϯζΦϯ3FEVYͰΧ΢ϯτػೳΛ࡞Δ  ϥϯν  ࠲ֶ3FBDU͔Β3FEVYΛར༻͢Δʹ͸Ͳ͏͢Ε͹͍͍͔ B SFBDUSFEVYͰొ৔͢Δ֓೦  ϋϯζΦϯ3FBDU3FEVYͰΧ΢ϯτΞϓϦΛ࡞Δ  ϋϯζΦϯ3FBDU3FEVYͰ5PEPΞϓϦΛ࡞Δ 56
  57. ϋϯζΦϯ 57

  58. Χ΢ϯτΞοϓΞϓϦΛϥΠϒίʔσΟϯά͠ ·͢!$PEF4BOE#PY u దٓɺ࣭໰ɾΫΠζΛग़͠·͢ɻ u ਖ਼ղͯ͠΋ಛʹܠ඼͸ग़ͳ͍Ͱ͢ɻ u Έͳ͞Μʹ͸ɺ͜Ε͔Β࡞Δ෺ͷɺػೳ֦ுΛϋϯζΦϯͰߦ͍· ͢ɻ 58

  59. ϋϯζΦϯλΠϜ u ʮΧ΢ϯτμ΢ϯػೳʯΛ࡞͍ͬͯͩ͘͞ u ʮΧ΢ϯτϦηοτػೳʯΛ࡞͍ͬͯͩ͘͞ 59

  60. ϋϯζΦϯதɾɾɾ 60

  61. ౴͑ • SFEVDFSʹ$06/5@%08/ͱ 3&4&5Λఆٛ • ͦΕͧΕɺͨ͋͠ͱͷTUBUF  JOJUJBM4UBUFΛฦͯ͋͛͠Δ • $06/5@%08/ͱ3&4&5Λ

    TUPSFEJTQBUDIͯ͋͛͠Δ 61 const redux = require("redux"); const initialState = { count: 0 }; const reducer = (state = initialState, action) => { switch (action.type) { case "COUNT_UP": return { ...state, count: state.count + 1 }; case "COUNT_DOWN": return { ...state, count: state.count - 1 }; case "RESET": return initialState; default: return; } }; const store = redux.createStore(reducer); store.dispatch({ type: "COUNT_UP" }); console.log("1回COUNT_UPしてみた結果: ", store.getState()); store.dispatch({ type: "COUNT_DOWN" }); store.dispatch({ type: "COUNT_DOWN" }); console.log("2回COUNT_DOWNしてみた結果: ", store.getState()); store.dispatch({ type: "RESET" }); console.log("RESETしてみた結果: ", store.getState()); 回答URL) https://github.com/sadnessOjisan/redux-count-handson
  62. ղ౴ 62 "QQ໊ 63- આ໌ UPEP@SFBDU IUUQTHJUIVCDPNTBEOFTT0KJTBOUPEP@ SFBDU લճͷϋϯζΦϯͰ։ൃͨ͠UPEPΞϓϦͷճ ౴Ͱ͢ɻࠓ೔͸͜ΕΛSFEVYԽ͢Δ͜ͱ͕࠷

    ऴ໨ඪͰ͢ɻ SFBDUCSPUIFSCPUIFSJOHVQEBUFFYBNQMF IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU CSPUIFSCPUIFSJOHVQEBUFFYBNQMF ܑఋίϯϙʔωϯτΛSFEVYͳ͠Ͱߋ৽͢Δ ͱΊΜͲ͍͘͞ྫ SFEVYDPVOUIBOETPO IUUQTHJUIVCDPNTBEOFTT0KJTBOSFEVY DPVOUIBOETPO SFEVYͰ؆୯ͳঢ়ଶ؅ཧΛ͠·͢ʢΧ΢ϯ τʣ SFBDUSFEVYDPVOUIBOETPO IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU SFEVYDPVOUIBOETPO SFEVYͰ؅ཧ͍ͯ͠ΔΧ΢ϯτTUBUFΛSFBDU ͔ΒΞΫηεɾߋ৽Ͱ͖ΔΑ͏ʹ͠·͢ɻ SFBDUSFEVYUPEP IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU SFEVYUPEP UPEPϦετΛSFEVYԽͨ͠΋ͷ ͦΕͧΕɺ׬੒ܗ΍಺෦࢓༷ &4%PD Λ/FUMJGZʹσϓϩΠ͍ͯ͠·͢ɻ ϦϯΫ͸ɺ֤ϨϙδτϦͷ3&"%.&ʹॻ͍ͯ͋Γ·͢ɻ
  63. ϥϯνλΠϜʂ ʂ ʂ 63

  64. 5BCMFPG$POUFOUT  ͸͡Ίʹ  ࠲ֶ3FEVYΛֶͿϞνϕʔγϣϯʹ͍ͭͯ B ͳͥ"JS͸3FBDUΛ࠾༻ͨ͠ͷ͔ͳͥࢲͨͪ͸3FBDU3FEVYΛֶͿͷ͔ C ͳͥ3FEVYΛֶͿͷ͔3FBDU୯ମͰར༻͢ΔͱԿ͕ਏ͘ͳΔͷ͔ D

    3FEVYͰঢ়ଶΛ؅ཧ͢ΔͨΊʹ஌Δ΂͖֓೦  ϋϯζΦϯ3FEVYͰΧ΢ϯτػೳΛ࡞Δ  ϥϯν  ࠲ֶ3FBDU͔Β3FEVYΛར༻͢Δʹ͸Ͳ͏͢Ε͹͍͍͔ B SFBDUSFEVYͰొ৔͢Δ֓೦  ϋϯζΦϯ3FBDU3FEVYͰΧ΢ϯτΞϓϦΛ࡞Δ  ϋϯζΦϯ3FBDU3FEVYͰ5PEPΞϓϦΛ࡞Δ 64
  65. 3FBDU͔Β3FEVYΛ࢖͏ͨΊʹ͸ Ͳ͏͢Ε͹͍͍͔ 65

  66. SFBDUSFEVY u Official React bindings for Redux. (https://react-redux.js.org/introduction/quick-start) u コンポーネントから

    redux の store を参照したり、action を dispatch するこ とを可能にするライブラリ u react + redux を実現するために必要なライブラリ 66
  67. SFBDU SFEVY͕໨ࢦ͢ੈք 67 https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/

  68. ͦ͜ʹ͸ཧ૝ͷੈք͕ͬɾɾɾ 68

  69. ͔͠͠ɺͨͲΓண͘ͷ͸೉͍͠ɾɾɾ 69

  70. SFBDUSFEVY͕ʂਓʑΛ࠳ંͤ͞Δʂʂʂ 70 人 畜 無 害 そ う な 顔

    を し て い る が 数 え 切 れ な い ほ ど の 人 間 を 挫 折 さ せ て い る
  71. SFBDUSFEVYͷ೉͠͞ u Reactとreduxの接続方法が少なくとも4通りある。特にdispatcherのつなぎ こみが混乱しやすい。 u そもそも、登場人物が多い! u provider, connect, mapStateToProps,

    mapDispatchToProps, dispatch, … u しかし、react-reduxが提供している関数は、providerとconnectのみである 71 えっ、残りの登場人物はどこから登場してきたの?
  72. SFBDUSFEVYͷ೉͠͞ u 登場人物が多い! u provider, connect, mapStateToProps, mapDispatchToProps, dispatch, bindActionCreators,

    … u しかし、react-reduxが提供している関数は、providerとconnectのみである 72 えっ、残りの登場人物はどこから登場してきたの? ͋ͳ͕ͨ࡞ΔͷͰ͢
  73. SFBDUSFEVYͷొ৔ਓ෺Λ੔ཧ͢Δ SFBDUSFEVY • QSPWJEFSSFEVYͷTUPSFΛಡΈࠐΊΔΑ͏ʹͯ͘͠ΕΔ • DPOOFDUDPNQPOFOUͱTUPSFΛܨ͛ͯ͘ΕΔ ࣗ࡞ • BDUJPO$SFBUPSݺͼग़͢͜ͱͰɺBDUJPOΛ࡞ͬͯฦͯ͘͠ΕΔؔ਺ •

    NBQ4UBUF5P1SPQTTUPSFͷTUBUF͔ΒಡΈࠐΉ஋Λબ୒͢Δ • NBQ%JTQBUDI5P1SPQTTUPSFʹର͢ΔEJTQBUDIFSΛબ୒͢Δ 73
  74. SFBDUSFEVY͕΍Δ͜ͱ 74 https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/

  75. SFBDUSFEVY͕΍Δ͜ͱ 75 https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/ Reactが提供

  76. SFBDUSFEVY͕΍Δ͜ͱ 76 https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/ Reduxが提供

  77. SFBDUSFEVY͕΍Δ͜ͱ 77 https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/ react-reduxが提供

  78. SFBDUSFEVY͕΍Δ͜ͱ 78 https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/ providerとconnectが提供

  79. QSPWJEFS u <provider />で囲ったコンポーネント以下では、reduxのstoreにアクセスで きるようになる u 通常、アプリケーションのトップレベルで利用される。 79 ReactDOM.render( <Provider

    store={store}> <TodoView /> </Provider>, document.getElementById("root") );
  80. DPOOFDU u 任意のReactコンポーネントをreduxのstoreと接続するために利用する関数 80 class Component extends React.Component { }

    // Component -> Reactコンポーネント const ConnectedComponent = connect()(Component) // ConnectedComponent -> redux storeと接続されたコンポーネント
  81. DPOOFDU u connect関数は4つの引数を取ることができる • mapStateToProps?: Function • mapDispatchToProps?: Function |

    Object • mergeProps?: Function • options?: Object u connect関数は、コンポーネントを引数に取る関数を返す u connect()が返した関数はコンポーネントを引数に取り、storeにアクセスできるコンポー ネントを作って返してくれるよ! 81 「?」はなくても良いという意味. Maybe Types. Ex) function f1(name:string, age? number) は、 関数f1はstring型 のnameが必要で、number型のageは必要というわけではない あまり使うことはないです。 すくなくとも今は考えなくても良いですー。
  82. DPOOFDUͷ࢖͍͔ͨ  DPOOFDU ͷڍಈ͸ɺ NBQ4UBUF5P1SPQTͱNBQ%JTQBUDI5P1SPQTͷઆ໌ޙɺ ৄ͘͠ਂ۷Γ·͢ʂ connect(mapStateToProps, mapDispatchToProps)(Component) 4UPSFͷͲͷ෦෼Λ࢖͏͔ɺ ͲΜͳΞΫγϣϯΛ࢖͍͍͔ͨઃఆ͢Δ

    3FEVYͱͷ઀ଓͷઃఆΛɺ ίϯϙʔωϯτʹ൓өͤ͞Δॲཧ
  83. BDUJPO$SFBUPS u BDUJPOΛ࡞Δؔ਺ u ͜Ε·Ͱɺstore.dispatch({type: ”SAMPLE_ACTION”})ͳͲͱఆٛͯ͠ ͍͕ͨɺຖճBDUJPOΦϒδΣΫτΛखͰ࡞Δͷେม͡Όͳ͍Ͱ͔͢ʁ u ίϯϙʔωϯτ͔Β؆୯ʹΞΫγϣϯ࡞੒ΛͰ͖ΔΑ͏ʹ͢ΔͨΊʹɺBDUJPOΛ ฦؔ͢਺͸ఆٛͨ͠ํ͕ྑ͍ɻ

    ݺͿ͚ͩͰBDUJPO͕࡞Δ͜ͱ͕Ͱ͖ΔΑ͏ʹͳΔ 83 const checkUser = (userId) => { return { type: CHECK_USER, payload: id }; };
  84. NBQ4UBUF5P1SPQT u DPOOFDUͷୈҰҾ਺ NBQ4UBUF5P1SPQTͱݺ͹Ε͍ͯΔɻ u ͜Ε͸ɺҰൠతʹɺ const mapStateToProps = state

    => ({ hoge: state.fuga, … }) ͱ͍͏ܗͷؔ਺ u ίϯϙʔωϯτ಺ͰɺTUPSFͷͲͷ஋ΛಡΈऔΓ͍͔ͨΛબ୒͢Δػ ೳʢTFMFDUPSͱݺ͹ΕΔ͜ͱ΋ʣɻTUBUFΛTUPSFͱߟ͑Δͱཧղ͠ ΍͍͢ 84
  85. NBQ%JTQBUDI5P1SPQT u connectの第二引数。mapDispatchToPropsと呼ばれている u 一般的には、 const mapDispatchToProps = dispatch =>

    { return {hoge: dispatch(hogeActionCreator())} } と定義される u action creatorを渡すことで、どのactionをdispatchさせるかを定義する 85 dispatchは、ただの引数の名前
  86. DPOOFDUΛਂ۷Δ  TUPSFͱͷ઀ଓΛઃఆ͢Δؔ਺ʢલ൒ʣͱɺ࣮ࡍʹTUPSFͱ઀ଓ ͯ͘͠ΕΔؔ਺ʢޙ൒ʣʹ෼͚ͯߟ͑Δͱཧղ͠΍͍͢Αʂ DPOOFDU NBQ4UBUF5P1SPQT NBQ%JTQBUDI5P1SPQT $PNQPOFOU 4UPSFͷͲͷ෦෼Λ࢖͏͔ɺͲΜͳΞΫγϣϯΛ ࢖͍͍͔ͨઃఆ͢Δ

    3FEVYͱͷ઀ଓͷઃఆΛɺίϯϙʔωϯτ ʹ൓өͤ͞Δॲཧ f()() という書き方は、なにかの設定をしてあげ、 その設定を反映させるみたいなことをしたいとき に、よくあるテクニックです。なんか変な呼び出し 方だよね。
  87. ΫΠζ 87 class Component extends React.Component{ constructor(){ console.log(this.props); } }

    const mapStateToProps = state => { return { hoge: state.hoge, fuga: state.fuga } } const mapDispatchToProps = dispatch => { return { foo: dispatch(foo()) } } export default connect(mapStateToProps)(Component) このコンポーネントはどんな propsが入っているでしょう!
  88. ΫΠζ 88 class Component extends React.Component{ constructor(){ console.log(this.props); } }

    const mapStateToProps = state => { return { hoge: state.hoge, fuga: state.fuga } } const mapDispatchToProps = dispatch => { return { foo: dispatch(foo()) } } export default connect(mapStateToProps,mapDispatchToProps)(Component) このコンポーネントはどんな propsが入っているでしょう!
  89. ΫΠζ 89 class Component extends React.Component{ constructor(){ console.log(this.props); } }

    const mapStateToProps = state => { return { hoge: state.hoge, fuga: state.fuga } } const mapDispatchToProps = dispatch => { return { foo: dispatch(foo()) } } export default connect(null,mapDispatchToProps)(Component) このコンポーネントはどんな propsが入っているでしょう!
  90. ೉͍͠ΫΠζ̐ 90 class Component extends React.Component{ constructor(){ console.log(this.props); } }

    const mapStateToProps = state => { return { hoge: state.hoge, fuga: state.fuga } } const mapDispatchToProps = dispatch => { return { foo: dispatch(foo()) } } export default connect()(Component) このコンポーネントはどんな propsが入っているでしょう!
  91. ࣮͸ɾɾɾ this.props.dispatch({type: ‘Hoge’}) っていうやり方もある・・・ 91

  92. SFBDUSFEVY͕ʂਓʑΛ࠳ંͤ͞Δʂʂʂ 92 人 畜 無 害 そ う な 顔

    を し て い る が 数 え 切 れ な い ほ ど の 人 間 を 挫 折 さ せ て い る
  93. SFBDUSFEVY͕ʂਓʑΛ࠳ંͤ͞Δʂʂʂ 93 人 畜 無 害 そ う な 顔

    を し て い る が 数 え 切 れ な い ほ ど の 人 間 を 挫 折 さ せ て い る
  94. 5BCMFPG$POUFOUT  ͸͡Ίʹ  ࠲ֶ3FEVYΛֶͿϞνϕʔγϣϯʹ͍ͭͯ B ͳͥ"JS͸3FBDUΛ࠾༻ͨ͠ͷ͔ͳͥࢲͨͪ͸3FBDU3FEVYΛֶͿͷ͔ C ͳͥ3FEVYΛֶͿͷ͔3FBDU୯ମͰར༻͢ΔͱԿ͕ਏ͘ͳΔͷ͔ D

    3FEVYͰঢ়ଶΛ؅ཧ͢ΔͨΊʹ஌Δ΂͖֓೦  ϋϯζΦϯ3FEVYͰΧ΢ϯτػೳΛ࡞Δ  ϥϯν  ࠲ֶ3FBDU͔Β3FEVYΛར༻͢Δʹ͸Ͳ͏͢Ε͹͍͍͔ B SFBDUSFEVYͰొ৔͢Δ֓೦  ϋϯζΦϯ3FBDU3FEVYͰΧ΢ϯτΞϓϦΛ࡞Δ  ϋϯζΦϯ3FBDU3FEVYͰ5PEPΞϓϦΛ࡞Δ 94
  95. ϋϯζΦϯ 3FBDU3FEVYͰΧ΢ϯτΞϓϦΛ࡞Δ 95

  96. Χ΢ϯτΞοϓΞϓϦΛϥΠϒίʔσΟϯά͠ ·͢!DPEF4BOE#PY u Χ΢ϯτΞοϓϘλϯΛ࡞Γ·͢ɻ͜Ε͸3FBDU੡6*ίϯϙʔωϯ τ͔ΒɺTUPSFͰ؅ཧ͞Ε͍ͯΔΧ΢ϯτঢ়ଶΛࢀরɾૢ࡞͢ΔΞϓ ϦΛ࡞Δͱ͍͏ҙຯͰ͢ɻ u TUPSF΍SFEVDFS͸໦ߏ଄ʹͳΔͷͰɺͦΕΒΛNPEVMFͱ͍͏୯Ґ Ͱ؅ཧ͠·͢ɻࠓճ͸DPVOU.PEVMFΛ࣋ͭSFBDUSFEVYΞϓϦέʔ γϣϯΛ։ൃ͠·͢ɻ

    96
  97. ϋϯζΦϯλΠϜ u ʮΧ΢ϯτμ΢ϯϘλϯʯΛ࡞͍ͬͯͩ͘͞ u ʮΧ΢ϯτϦηοτϘλϯʯΛ࡞͍ͬͯͩ͘͞ 97

  98. ϋϯζΦϯதɾɾɾ 98

  99. ౴͑ • DPVOUΛTUPSFʹఆٛ • SFEVDFSʹCOUNT_UPͱ COUNT_DOWNのcaseΛఆٛ • ͦΕͧΕʹରԠͨ͠ BDUJPO$SFBUPSΛFYQPSU͢Δ 99

    回答URL) https://github.com/sadnessOjisan/react-redux-count-handson const countUp = (): TCountUpAction => { return { type: COUNT_UP }; }; const countDown = (): TCountDownAction => { return { type: COUNT_DOWN}; }; export const actionCreators = { countUp, countDown }; const initialState = { count: 0 }; // reducer const reducer = (state: TState = initialState, action: TAction) => { switch (action.type) { case COUNT_UP: return { ...state, count: state.count + 1 }; case COUNT_DOWN: return { ...state, count: state.count - 1 }; default: return initialState; } };
  100. ౴͑ • TUPSFͷΧ΢ϯτΛಡΈࠐΉͨΊͷؔ਺ NBQ4UBUF5P1SPQTΛఆٛ • DPVOUͷૢ࡞ΛQSPQT͔ΒͰ͖ΔΑ͏ʹ ͢Δؔ਺NBQ%JTQBUDI5P1SPQTΛఆٛ • DPOOFDUʹNBQ4UBUF5P1SPQTͱ NBQ%JTQBUDI5P1SPQTΛ౉ͯ͠ɺίϯ

    ϙʔωϯτͷத͔ΒTUBUFͱEJTQBUDIFS ʹΞΫηεͰ͖ΔΑ͏ʹͯ͋͛͠Δ 100 回答URL) https://github.com/sadnessOjisan/react-redux-count-handson const mapStateToProps = (state: TStore) => { return { count: state.count }; }; const mapDispatchToProps = (dispatch: Dispatch<*>) => { return { countUp: ()=>dispatch(countUp()), countDown: ()=>dispatch(countDown()) }; }; export default connect( mapStateToProps, mapDispatchToProps )(Counter);
  101. ղ౴ 101 "QQ໊ 63- આ໌ UPEP@SFBDU IUUQTHJUIVCDPNTBEOFTT0KJTBOUPEP@ SFBDU લճͷϋϯζΦϯͰ։ൃͨ͠UPEPΞϓϦͷճ ౴Ͱ͢ɻࠓ೔͸͜ΕΛSFEVYԽ͢Δ͜ͱ͕࠷

    ऴ໨ඪͰ͢ɻ SFBDUCSPUIFSCPUIFSJOHVQEBUFFYBNQMF IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU CSPUIFSCPUIFSJOHVQEBUFFYBNQMF ܑఋίϯϙʔωϯτΛSFEVYͳ͠Ͱߋ৽͢Δ ͱΊΜͲ͍͘͞ྫ SFEVYDPVOUIBOETPO IUUQTHJUIVCDPNTBEOFTT0KJTBOSFEVY DPVOUIBOETPO SFEVYͰ؆୯ͳঢ়ଶ؅ཧΛ͠·͢ʢΧ΢ϯ τʣ SFBDUSFEVYDPVOUIBOETPO IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU SFEVYDPVOUIBOETPO SFEVYͰ؅ཧ͍ͯ͠ΔΧ΢ϯτTUBUFΛSFBDU ͔ΒΞΫηεɾߋ৽Ͱ͖ΔΑ͏ʹ͠·͢ɻ SFBDUSFEVYUPEP IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU SFEVYUPEP UPEPϦετΛSFEVYԽͨ͠΋ͷ ͦΕͧΕɺ׬੒ܗ΍಺෦࢓༷ &4%PD Λ/FUMJGZʹσϓϩΠ͍ͯ͠·͢ɻ ϦϯΫ͸ɺ֤ϨϙδτϦͷ3&"%.&ʹॻ͍ͯ͋Γ·͢ɻ
  102. 5BCMFPGDPOUFOUT  ͸͡Ίʹ  ࠲ֶSFEVYΛֶͿϞνϕʔγϣϯʹ͍ͭͯ B ͳͥBJS͸SFBDUΛ࠾༻ͨ͠ͷ͔ͳͥࢲͨͪ͸SFBDUSFEVYΛֶͿͷ͔ C ͳͥSFEVYΛֶͿͷ͔SFBDU୯ମͰར༻͢ΔͱԿ͕ਏ͘ͳΔͷ͔ D

    SFEVYͰঢ়ଶΛ؅ཧ͢ΔͨΊʹ஌Δ΂͖֓೦  ϋϯζΦϯSFEVYͰΧ΢ϯτػೳΛ࡞Δ  ϥϯν  ࠲ֶSFBDU͔ΒSFEVYΛར༻͢Δʹ͸Ͳ͏͢Ε͹͍͍͔ B SFBDUSFEVYͰొ৔͢Δ֓೦  ϋϯζΦϯSFBDUSFEVYͰΧ΢ϯτΞϓϦΛ࡞Δ  ϋϯζΦϯSFBDUSFEVYͰUPEPΞϓϦΛ࡞Δ 102
  103. ϋϯζΦϯ 3FBDU3FEVYͰ5PEPΞϓϦΛ࡞Δ 103

  104. Ͱ͸ɺࠓ೔ͷ໨ඪʹऔΓֻ͔Γ·͢ 104

  105. SFBDUSFEVYͰ 50%0؅ཧΞϓϦΛ࡞Ζ͏ʂʂ 105

  106. ਐΊํ u Ҏલ࡞੒ͨ͠ɺSFBDU੡UPEP؅ཧΞϓϦΛSFEVYԽͯ͠΋Β͍·͢ɻ u ϨϕϧΛͭ༻ҙ͓ͯ͠Γ·͢ u -WSFBDUΞϓϦέʔγϣϯ͔Βͷελʔτ u -WOQN JOJU͔Β׬શਅͬനελʔτ

    106 https://github.com/sadnessOjisan/react-redux-todo https://github.com/sadnessOjisan/todo_react
  107. ϋϯζΦϯதɾɾɾ 107

  108. ղ౴ 108 "QQ໊ 63- આ໌ UPEP@SFBDU IUUQTHJUIVCDPNTBEOFTT0KJTBOUPEP@ SFBDU લճͷϋϯζΦϯͰ։ൃͨ͠UPEPΞϓϦͷճ ౴Ͱ͢ɻࠓ೔͸͜ΕΛSFEVYԽ͢Δ͜ͱ͕࠷

    ऴ໨ඪͰ͢ɻ SFBDUCSPUIFSCPUIFSJOHVQEBUFFYBNQMF IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU CSPUIFSCPUIFSJOHVQEBUFFYBNQMF ܑఋίϯϙʔωϯτΛSFEVYͳ͠Ͱߋ৽͢Δ ͱΊΜͲ͍͘͞ྫ SFEVYDPVOUIBOETPO IUUQTHJUIVCDPNTBEOFTT0KJTBOSFEVY DPVOUIBOETPO SFEVYͰ؆୯ͳঢ়ଶ؅ཧΛ͠·͢ʢΧ΢ϯ τʣ SFBDUSFEVYDPVOUIBOETPO IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU SFEVYDPVOUIBOETPO SFEVYͰ؅ཧ͍ͯ͠ΔΧ΢ϯτTUBUFΛSFBDU ͔ΒΞΫηεɾߋ৽Ͱ͖ΔΑ͏ʹ͠·͢ɻ SFBDUSFEVYUPEP IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU SFEVYUPEP UPEPϦετΛSFEVYԽͨ͠΋ͷ ͦΕͧΕɺ׬੒ܗ΍಺෦࢓༷ &4%PD Λ/FUMJGZʹσϓϩΠ͍ͯ͠·͢ɻ ϦϯΫ͸ɺ֤ϨϙδτϦͷ3&"%.&ʹॻ͍ͯ͋Γ·͢ɻ
  109. ͓ർΕ༷Ͱͨ͠ʂʂ 109

  110. ͓ർΕ༷Ͱͨ͠ u SFEVYʹঢ়ଶΛҕৡ͠ɺSFBDUੈքͰ6*ʹؔ͢Δϓϩάϥϛϯάʹઐ ೦Ͱ͖ΔΑ͏ʹͳΓ·ͨ͠ɻ u ࠓ೔΍ͬͯ΋Βͬͨ͜ͱ͸࣮຿Ͱ͓͜ͳ͏࡞ۀͱɺ࣮͸͋·ΓมΘ Γ͸͋Γ·ͤΜɻ u ࣮຿ͱͷࠩ෼ઃܭ ෭࡞༻؅ཧ

    SFEVDFSͷ෼ׂ $44ͷهड़͘Β͍ u ࠷ޙʹ෮शͱ࣍ճ༧ࠂ͚ͩͯ͠ɺऴ͑·͠ΐ͏ʂ 110
  111. 8SBQVQ 111

  112. SFEVYͱ͸ͲͷΑ͏ͳ΋ͷ͔ u 状態管理ツール u 破壊的変更が禁止されている(新しいオブジェクトを渡す) 112

  113. SFBDUSFEVYͱ͸ͲͷΑ͏ͳ΋ͷ͔ u Reduxをreactから使えるようにするツール 113

  114. SFEVYSFBDUSFEVYΛ࢖͏خ͠͞ u TJOHMFTUPSFͰ͋ΔͨΊɺΞϓϦέʔγϣϯͷঢ়ଶΛҰՕॴͰ؅ཧ Ͱ͖Δ u ͭ·ΓɺG TUBUF 6*͕ G TUPSF

    6*ͱͳΔ u SFEVYʹ઀ଓͨ͠ DPNQPOFOU͸ɺͲ͔͜ΒͰ΋ BDUJPO$SFBUPS Λ ݺͿ͜ͱͰ TUPSFΛߋ৽͢Δ͜ͱ͕Ͱ͖Δ 114
  115. SFEVY͸ͲͷΑ͏ʹͯ͠࢖͏͔ u TUBUFͱ BDUJPOΛड͚औͬͯ৽͍͠ TUBUFΛฦؔ͢਺ SFEVDFSΛ ఆٛ͢Δ u SFEVDFS͔Β TUPSFΛ࡞Δ

    u TUPSF͔Β BDUJPOΛ EJTQBUDIͯ͠ SFEVDFSΛಈ͔ͯ͠ TUPSFΛ ߋ৽͢Δ 115
  116. ࣍ճ༧ࠂSFBDUΛ࢖ͬͨେن໛։ൃ u SPVUJOH u SFEVDFS෼ׂ u middleware 116

  117. 開催方式 • 講義はしません • 課題を解いて来てもらいます • 自習がメインになります • keyword: redux-logger,

    redux-saga, react-router, combineReducer 117
  118. ͓ർΕ༷Ͱͨ͠ʂʂ 118