次はたぶん挫折しない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

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. 5BCMF
   PG
   $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
   -BOHVBHF
   4VQQPSUͷ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. 5BCMF
    PG
    $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. SFEVDFS
    TUPSFΛߋ৽͢Δؔ਺ u ΞϓϦέʔγϣϯͰ།ҰɺTUPSFΛߋ৽Ͱ͖Δ࢓૊Έ u 3FEVYʹ͸ มߋ͸७ਮͳؔ਺͔ΒߦΘΕΔ΂͖ ͱ͍͏ݪଇ͕͋Δ u 3FEVDFS͸ݱࡏͷTUPSFͱޙड़͢ΔBDUJPOΛड͚औΓɺBDUJPOʹԠ͡ ͯ৽͍͠TUPSFΛฦؔ͢਺ɻͨͩͷؔ਺ɻ 52
53. SFEVDFS
    TUPSFΛߋ৽͢Δؔ਺ 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. SFEVDFS
    TUPSFΛߋ৽͢Δؔ਺ 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 \UZQF
    TUSJOH
    QBZMPBE 
    NJYFE^
    ܗࣜͷͨͩͷΦϒδΣΫτ u UZQF͸༷ʑͳΞΫγϣϯͷࣝผࢠɺQBZMPBE͸ߋ৽ͯ͠΄͍͠σʔ λɻUZQF͸ඞਢ͕ͩɺQBZMPBE͸ͳͯ͘΋ྑ͍ɻ UZQF΍QBZMPBEͱ ͍͏Ωʔ໊͸׳श u store.dispatch(action) ΛݺͿͱɺSFEVDFS͕࣮ߦ͞ΕΔ ʮBDUJPOΛEJTQBUDI͢Δʯͱදݱ͞ΕΔ ɻͦͷ݁ՌɺBDUJPOΛݩʹ TUPSFΛߋ৽͢Δ͜ͱ͕Ͱ͖Δɻ 55
56. 5BCMF
    PG
    $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. 5BCMF
    PG
    $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 • QSPWJEFS
    SFEVYͷTUPSFΛಡΈࠐΊΔΑ͏ʹͯ͘͠ΕΔ • DPOOFDU
    DPNQPOFOUͱTUPSFΛܨ͛ͯ͘ΕΔ ࣗ࡞ • BDUJPO$SFBUPS
    ݺͼग़͢͜ͱͰɺBDUJPOΛ࡞ͬͯฦͯ͘͠ΕΔؔ਺ • NBQ4UBUF5P1SPQT
    TUPSFͷTUBUF͔ΒಡΈࠐΉ஋Λબ୒͢Δ • NBQ%JTQBUDI5P1SPQT
    TUPSFʹର͢Δ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. 5BCMF
    PG
    $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. 5BCMF
     PG
     DPOUFOUT  ͸͡Ίʹ  ࠲ֶ
     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 -W
     SFBDUΞϓϦέʔγϣϯ͔Βͷελʔτ u -W
     OQN 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. 8SBQ
     VQ 111
112. SFEVY
     ͱ͸ͲͷΑ͏ͳ΋ͷ͔ u 状態管理ツール u 破壊的変更が禁止されている（新しいオブジェクトを渡す） 112
113. SFBDUSFEVY
     ͱ͸ͲͷΑ͏ͳ΋ͷ͔ u Reduxをreactから使えるようにするツール 113
114. SFEVYSFBDUSFEVYΛ࢖͏خ͠͞ u TJOHMF
     TUPSF
     Ͱ͋ΔͨΊɺΞϓϦέʔγϣϯͷঢ়ଶΛҰՕॴͰ؅ཧ Ͱ͖Δ 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