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

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

View Slide

͸͡Ίʹ
2

View Slide

͜ͷߨ࠲ͷҐஔ෇͚
• 3FBDUߨ࠲
• ͳͥɺ3FBDU͕ඞཁʹͳͬͨͷ͔Λղઆ͢Δճ
• ඇಉظॲཧߨ࠲
• $BMMCBDL 1SPNJTF "TZOD "XBJUͰ"1*ͷ'FUDIΛؤுΔճ
• ؀ڥߏஙߨ࠲
• /1. #BCFM XFCQBDLͷઃఆΛղઆ͢Δճ
• 3FEVYߨ࠲
• 3FBDUΛར༻ͨ͠େن໛։ൃߨ࠲
• 3FEVDFSͷ෼ׂ΍NJEEMFXBSFͷ࢖͍ํΛֶͿɻ
3

View Slide

ձ৔ͷ஫ҙ
• "TJB2VFTUࣾ͞ΜͷޚްҙʹΑΓɺձ৔Λఏڙͯ͠௖͖·ͨ͠ɻ
• r ͸ϑϦʔεϖʔεͱͳΔͨΊɺ͜ͷ࣌ؒͰҰ౓ɺன৯ͷٳܜͱ͠·͢ɻ
• τΠϨ͸ɺձ৔ग़ͨ൶ͷ޲͜͏ͷ֊ஈΛొͬͯ̒֊ଆ͕ঁࢠτΠϨɺ̐֊ଆ͕உࢠτΠϨ
Ͱ͢ɻ
4
EV
廊下
階段
会場
受付

View Slide

5BCMFPG$POUFOUT
͸͡Ίʹ
࠲ֶ3FEVYΛֶͿϞνϕʔγϣϯʹ͍ͭͯ
B ͳͥ"JS͸3FBDUΛ࠾༻ͨ͠ͷ͔ͳͥࢲͨͪ͸3FBDU3FEVYΛֶͿͷ͔
C ͳͥ3FEVYΛֶͿͷ͔3FBDU୯ମͰར༻͢ΔͱԿ͕ਏ͘ͳΔͷ͔
D 3FEVYͰঢ়ଶΛ؅ཧ͢ΔͨΊʹ஌Δ΂͖֓೦
ϋϯζΦϯ3FEVYͰΧ΢ϯτػೳΛ࡞Δ
ϥϯν
࠲ֶ3FBDU͔Β3FEVYΛར༻͢Δʹ͸Ͳ͏͢Ε͹͍͍͔
B SFBDUSFEVYͰొ৔͢Δ֓೦
ϋϯζΦϯ3FBDU3FEVYͰΧ΢ϯτΞϓϦΛ࡞Δ
ϋϯζΦϯ3FBDU3FEVYͰ5PEPΞϓϦΛ࡞Δ
5

View Slide

ࣄલ४උ
ࣄલʹ఻͍͑ͯ·͕ͨ͠ɺ΋͠४උ͕Ͱ͖͍ͯͳ͍ํ͸ɺͪ͜Βͷ४උ
Λ͓ئ͍͠·͢ɻϋϯζΦϯ·Ͱʹ༻ҙ͍ͯͩ͘͠͞ɻ
.VTU
• (JU
• (JU)VCͷΞΧ΢ϯτ(JUUFS΁ͷϩάΠϯ
#FUUFS
• 74$PEF 'MPX-BOHVBHF4VQQPSUͷFYUFOTJPO
6

View Slide

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

View Slide

ར༻͢Διʔείʔυ
8
"QQ໊ 63- આ໌
UPEP@SFBDU
IUUQTHJUIVCDPNTBEOFTT0KJTBOUPEP@
SFBDU
લճͷϋϯζΦϯͰ։ൃͨ͠UPEPΞϓϦͷճ
౴Ͱ͢ɻࠓ೔͸͜ΕΛSFEVYԽ͢Δ͜ͱ͕࠷
ऴ໨ඪͰ͢ɻ
SFBDUCSPUIFSCPUIFSJOHVQEBUFFYBNQMF
IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU
CSPUIFSCPUIFSJOHVQEBUFFYBNQMF
ܑఋίϯϙʔωϯτΛSFEVYͳ͠Ͱߋ৽͢Δ
ͱΊΜͲ͍͘͞ྫ
SFEVYDPVOUIBOETPO
IUUQTHJUIVCDPNTBEOFTT0KJTBOSFEVY
DPVOUIBOETPO
SFEVYͰ؆୯ͳঢ়ଶ؅ཧΛ͠·͢ʢΧ΢ϯ
τʣ
SFBDUSFEVYDPVOUIBOETPO
SFEVYDPVOUIBOETPO
SFEVYͰ؅ཧ͍ͯ͠ΔΧ΢ϯτTUBUFΛSFBDU
͔ΒΞΫηεɾߋ৽Ͱ͖ΔΑ͏ʹ͠·͢ɻ
SFBDUSFEVYUPEP
SFEVYUPEP
UPEPϦετΛSFEVYԽͨ͠΋ͷ
ͦΕͧΕɺ׬੒ܗ΍಺෦࢓༷ &4%PD
Λ/FUMJGZʹσϓϩΠ͍ͯ͠·͢ɻ
ϦϯΫ͸ɺ֤ϨϙδτϦͷ3&"%.&ʹॻ͍ͯ͋Γ·͢ɻ

View Slide

ࠓ೔ͷ໨ඪ
①SFBDUSFEVYͷ࢖͍ํΛ֮͑Δʂ
②SFBDUͱSFBDUSFEVYͷҧ͍Λ஌Δʂ
③SFBDUͰ࡞ΒΕͨ5PEPΞϓϦΛɺSFBDUSFEVYͰஔ͖׵͑Δʂ
9

View Slide

ࠓ೔ͷࢀՃऀͷಛ௃
u 3FBDUܦݧऀ
u ʢͱ͍͏ΑΓɺઌ݄ܦݧͯ͠΋ΒͬͨͷͰɾɾɾʣ
u SFBDUSFEVYΛฉ͍ͨ͜ͱ͕͋Δ
u SFBDUSFEVYʹ࠳ંͨ͜͠ͱ͕͋Δ
SFEVYʹ࠳ંͨ͜͠ͱ͕͋ΔํΛ
ϝΠϯλʔήοτͱͨ͠ษڧձͰ͢ɻ
10

View Slide

SFBDUSFEVYͷͭ·͖ͮϙΠϯτ
u ొ৔ਓ෺͕ଟ͍
u SFBDUSFEVY΍SFEVY͕ཁٻ͢Δؔ਺͕ɺͳͥඞཁʹͳΔ͔Θ͔Γʹ
͍͘
Ø FY
ఆٛࣗମ͸SFEVYͱؔ܎͕ͳ͍ͨͩͷؔ਺ͱͳΔ΋ͷ͕ଟ͍
u 最小限を動かすフェイズに至れなく、検証しながら壊しながら学ぶというこ
とが難しい
Ø "Λ࡞ΔͨΊʹ͸#͕ඞཁ͕ͩɺ#Λಈ͔ͨ͢Ίʹ͸"ͷϝιου͕ඞཁͩ
11

View Slide

SFBDUSFEVY͸Ͳ͏ֶ΂͹͍͍͔
u SFEVYͱSFBDUSFEVY͸ઈରʹ෼ֶ͚ͯͿ
Ø SFEVYͱSFBDUSFEVY͸ผͩΑʂ
Ø SFEVY୯ମ͸SFBDU͕ແͯ͘΋ಈ͘Αʂ
u ·ͣ͸֓೦ͱ࢖͍͔͚֮ͨͩ͑ͯ͠·͓͏ʂ
u ಈ͘͜ͱ͕֬໿͞Ε͍ͯΔαϯϓϧʢެࣜͳͲʣʹܕΛॻ͍ͯΈΔ
Ø Ͳͷؔ਺͕ɺͲΜͳҾ਺Λཁٻ͠ɺͲΜͳฦΓ஋Λฦ͢΂ֶ͖͔͕΂Δ
12

View Slide

ࠓ೔ͷڭࡐ΍ਐΊํͷಛ௃
u SFBDUSFEVY͕ɺSFBDUͷͲΜͳͭΒΈΛղফ͔ͨ͠Λղઆ͠·͢
u ߨٛܗࣜͷ࠲ֶ͸গͳΊͰ͢ɻ్தͰΫΠζΛڬΈͳ͕ΒͷϥΠϒ
ίʔσΟϯά͕ଟ͍Ͱ͢ɻΈͳ͞Μͱͷձ࿩ΛݩʹߨٛΛਐΊ͍ͯ
͖·͢ɻΘ͔Βͳ͍͜ͱ͕͋Ε͹దٓɺൃݴ͍ͯͩ͘͠͞ɻ
u ਖ਼ղྫΛݩʹ֦ு͍ͯ͘͠ϋϯζΦϯΛ༻ҙ͍ͯ͠·͢ɻϝϯλʔ
͕८ճ͢ΔͷͰɺ͜͜Ͱ΋ࣗ༝ʹ࣭໰Λड͚෇͚ΒΕ·͢ɻ
13
Έͳ͞ΜͷཧղͷͨΊɺԁ׈ͳӡӦͷͨΊʹɺ
ԕྀͳ࣭͘໰͍ͯͩ͘͠͞ @

View Slide

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

View Slide

ܕͷಡΈํ
15
u ܕ͸ม਺΍Ҿ਺͕ॴଐ͢Δάϧʔϓͷ͜ͱ
Ͱ͢ɻ
u IPHF ͰIPHFܕΛม਺΍Ҿ਺ʹએݴ͢Δ
͜ͱ͕Ͱ͖·͢ɻ
u DPOTU G BSHOVNCFS
TUSJOH\^
͸ɺOVNCFSܕΛҾ਺ʹɺTUSJOHܕͷฦΓ
஋GΛఆ͍ٛͯ͠·͢ɻ
u ܕ͕͋Ε͹ɺͲΜͳؔ਺ʹͲΜͳม਺Λ౉
ͤ͹͍͍͔͕Θ͔ΔͷͰɺίʔυΛཧղ͠
΍͘͢ͳΓ·͢ɻ
カーソルを合わせると、型
の定義が表示されます。
型の上で「コマンドキー + クリック」すると
型の定義元にジャンプできます。

View Slide

5BCMFPG$POUFOUT
͸͡Ίʹ
ϥϯν
16

View Slide

3FEVYΛֶͿϞνϕʔγϣϯ
17

View Slide

ฐࣾΛऔΓר͘"QQ։ൃ؀ڥ
18
ػೳɾॊೈੑɾ։ൃ଎౓ʹର͢Δ
ཁٻ΍೉қ౓͕ߴ͘ͳ͍ͬͯΔ
͜Ε·Ͱͷ։ൃ
ϝσΟΞ։ൃ
اը΍ಛू୯ҐͰͷػೳཁ݅
ʹ஧࣮ͳ։ൃ
ίϯςϯπΛૌٻ͢ΔͨΊͷ
੩తͳ8FCϖʔδ
࠷ۙ૿͑ͭͭ͋Δ։ൃ
4BB4։ൃ
࢖͍΍͢͞Λߟྀ͠ɺܭଌ͠ͳ͕
ΒΤϯϋϯεΛ܁Γฦ͢։ൃ
ಈతͰߴػೳͰͨ͘͞Μͷঢ়ଶ΍
෼ذΛ࣋ͬͨෳࡶͳ"QQ

View Slide

19
͖ͼ͠ʔ

View Slide

ͦ͜Ͱ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*ͱͳΔੈքͰɺύʔπΛ૊Έ߹Θͤͯ։ൃʂ

View Slide

3FBDU͸શͯΛղܾ͢Δۜͷ஄ؙ ͔΋͠Εͳ͍

u 6*Λએݴ͢Δ͜ͱͰɺ൥ࡶͳঢ়ଶߋ৽ɺঢ়ଶ͔Βͷ6*ੜ੒ΛߦΘͳ
ͯ͘͢ΈɺιʔείʔυͷෳࡶੑΛݮΒ͢
u ίϯϙʔωϯτΛ࠶ར༻͢Δ͜ͱͰɺ։ൃ޻਺ΛݮΒͤΔ
u ͞ΒʹίϯϙʔωϯτΛ෼ׂ͢Δ͜ͱͰ෼ۀ΋͠΍͘͢ɺೲظΛ୹
ॖͰ͖Δ
21
3FBDUΛಋೖ͢Δ͜ͱͰɺ
ෳࡶͳཁ݅Λγϯϓϧʹߴ଎ʹ։ൃͰ͖Δɾɾɾʁ

View Slide

22
খن໛։ൃʹ͓͍ͯͷΈͷ࿩

View Slide

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

View Slide

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

View Slide

25
Root
ίϯϙʔωϯτ
AB2
ABB3
A1 D1 E1
DA2 DB2
TUBUF
A1のstateをABB3に伝えたい

View Slide

26
Root
ίϯϙʔωϯτ
AB2
ABB3
A1 D1 E1
DA2 DB2
TUBUF
A1
A1

View Slide

27
Root
ίϯϙʔωϯτ
AB2
ABB3
A1 D1 E1
DA2 DB2
TUBUF
まあまだ許容範囲

View Slide

28
Root
ίϯϙʔωϯτ
AB2
ABB3
A1 D1 E1
DA2 DB2
TUBUF
ABB3のstateを、ABB3がクリックされ
た時に、 E1のstateに応じて更新した
い

View Slide

29
Root
ίϯϙʔωϯτ
AB2
ABB3
A1 D1 E1
DA2 DB2
TUBUF

&ͷTUBUFΛड͚औΔͨΊͷؔ਺'Λఆٛ

View Slide

30
Root
ίϯϙʔωϯτ
AB2
ABB3
A1 D1 E1
DA2 DB2
TUBUF


'Λ࣮ߦ͠ɺ&ͷ
TUBUFΛϧʔτʹ఻͑Δ
E1

View Slide

31
Root
ίϯϙʔωϯτ
AB2
ABB3
A1 D1 E1
DA2 DB2
TUBUF


'Λ࣮ߦ͠ɺ&ͷ
E1
E1
E1
E1

View Slide

ܑఋͷঢ়ଶΛड͚౉͢͠Δྫ
32
url: https://github.com/sadnessOjisan/react-brother-bothering-update-example
ヘッダはログイン状態を管理している。
ボディは入力状態を管理している
ボディを入力中は、ログアウト機能をロックしたい。
=> ボディの親（=ヘッダの親)を兄弟の状態を経由させて渡す必要あり。

View Slide

33
Root
ίϯϙʔωϯτ
AB2
ABB3
A1 D1 E1
DA2 DB2
TUBUF


'Λ࣮ߦ͠ɺ&ͷ
E1
E1
E1
E1
なかなかめんどくさい

View Slide

Ұൠతʹɺܑఋཁૉͷঢ়ଶͷಡΈࠐΈ΍ɺ
ঢ়ଶͷߋ৽͸ΊΜͲ͍͘͞
34

View Slide

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

View Slide

36
QSPQTόέπϦϨʔ

View Slide

37
ղܾࡦ͸ʁ

View Slide

ղܾࡦ
u TUBUFΛSPPUίϯϙʔωϯτ͚͕ͩ࣋ͪɺTUBUFͱͦΕΛߋ৽͢Δϋ
ϯυϥΛࢠڙίϯϙʔωϯτʹ౉͢
38
ϝϦοτ
• ࢠ͔Β਌ʹ஋΍ϋϯυϥΛ౉͢൥Θ͠͞
Λ׬શʹͳͤ͘Δ
σϝϦοτ
• ਌ίϯϙʔωϯτ͕ΊͪΌͪ͘Όେ͖͘
ͳͬͯ͠·͍ɺ؅ཧ͕େมͦ͏
• όέπϦϨʔͷํ޲͸౷ҰͰ͖Δ͕ɺό
έπϦϨʔࣗମ͸ͳ͘ͳ͍ͬͯͳ͍
• ίϯϙʔωϯτͷπϦʔࣗମ͕มΘΔͱɺ
मਖ਼͕ࠔ೉

View Slide

ղܾࡦͷྑ͍ͱ͜Ζ
u TUBUFΛ؅ཧ͢Δ৔ॴ͕Օॴʹ౷ҰͰ͖ɺݟ௨͕͠ྑ͘ͳΔɻσʔ
λอ؅৔ॴΛ୯Ұʹ͢Δߟ͑ํ͸SFEVYʹ΋௨͡Δ
u σʔλͷྲྀΕ͕ํ޲ʹݶఆ͞ΕΔɻίϯϙʔωϯτ͕૿͑ͯ΋ɺ
σʔλϑϩʔʹ͸Өڹ͕ͳ͍ʢόέπϦϨʔ͢Ε͹͍͍͚ͩͳͷ
Ͱʣɻ୯Ұσʔλϑϩʔ ͷߟ͑ํ͸SFEVYʹ΋௨͡Δ
39

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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" });

View Slide

45
count: 0
};
case "COUNT_UP":
default:
return;
}
};
Count数を状態として扱うことを宣言する

View Slide

46
count: 0
};
case "COUNT_UP":
default:
return;
}
};
どういうときに、どういう風に状態を更新
するかを定義する。

View Slide

47
count: 0
};
case "COUNT_UP":
default:
return;
}
};
COUNT_UP という命令が来たら、カウント
をアップすることを定義する

View Slide

48
count: 0
};
case "COUNT_UP":
default:
return;
}
};
上で作った状態と状態更新ルールを持っ
た状態管理オブジェクトを作る

View Slide

49
count: 0
};
case "COUNT_UP":
default:
return;
}
};
状態を保つオブジェクトに対して、状態更
新の命令を送る

View Slide

SFEVYͷొ৔ਓ෺
u TUPSF
u BDUJPO
u SFEVDFS
50

View Slide

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

View Slide

SFEVDFSTUPSFΛߋ৽͢Δؔ਺
u ΞϓϦέʔγϣϯͰ།ҰɺTUPSFΛߋ৽Ͱ͖Δ࢓૊Έ
u 3FEVYʹ͸ มߋ͸७ਮͳؔ਺͔ΒߦΘΕΔ΂͖ ͱ͍͏ݪଇ͕͋Δ
u 3FEVDFS͸ݱࡏͷTUPSFͱޙड़͢ΔBDUJPOΛड͚औΓɺBDUJPOʹԠ͡
ͯ৽͍͠TUPSFΛฦؔ͢਺ɻͨͩͷؔ਺ɻ
52

View Slide

53
case ”HOGE":
return { ...state, message: ‘パンケーキ’ };
case ”FUGA":
return { ...state, message: ‘シフォンケーキ’ };
case "RESET":
return initialState;
default:
return;
}
};
{type: “HOGE”}を受け取ると、新しいstate
として{message: ‘パンケーキを返す’}

View Slide

54
case ”HOGE":
return { ...state, message: ‘パンケーキ’ };
case ”FUGA":
return { ...state, message: ‘シフォンケーキ’ };
case "RESET":
default:
return;
}
};
{type: “FUGA”}を受け取ると、新しいstate
として{message: ‘シフォンケーキ’}を返す

View Slide

BDUJPOߋ৽಺༰ʹ͍ͭͯͷϝοηʔδ
u TUPSFʹରͯ͠ɺͲͷΑ͏ͳมߋΛͯ͠΄͍͔͠ॻ͔Εͨϝοηʔδ
u \UZQFTUSJOH QBZMPBE NJYFE^ܗࣜͷͨͩͷΦϒδΣΫτ
u UZQF͸༷ʑͳΞΫγϣϯͷࣝผࢠɺQBZMPBE͸ߋ৽ͯ͠΄͍͠σʔ
λɻUZQF͸ඞਢ͕ͩɺQBZMPBE͸ͳͯ͘΋ྑ͍ɻ UZQF΍QBZMPBEͱ
͍͏Ωʔ໊͸׳श

u store.dispatch(action) ΛݺͿͱɺSFEVDFS͕࣮ߦ͞ΕΔ
ʮBDUJPOΛEJTQBUDI͢Δʯͱදݱ͞ΕΔ
ɻͦͷ݁ՌɺBDUJPOΛݩʹ
TUPSFΛߋ৽͢Δ͜ͱ͕Ͱ͖Δɻ
55

View Slide

5BCMFPG$POUFOUT
͸͡Ίʹ
ϥϯν
56

View Slide

ϋϯζΦϯ
57

View Slide

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

View Slide

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

View Slide

ϋϯζΦϯதɾɾɾ
60

View Slide

౴͑
• SFEVDFSʹ$06/5@%08/ͱ
3&4&5Λఆٛ
• ͦΕͧΕɺͨ͋͠ͱͷTUBUF
JOJUJBM4UBUFΛฦͯ͋͛͠Δ
• $06/5@%08/ͱ3&4&5Λ
TUPSFEJTQBUDIͯ͋͛͠Δ
61
count: 0
};
case "COUNT_UP":
case "COUNT_DOWN":
return { ...state, count: state.count - 1 };
case "RESET":
default:
return;
}
};
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

View Slide

ղ౴
62
"QQ໊ 63- આ໌
UPEP@SFBDU
SFBDU
ऴ໨ඪͰ͢ɻ
ͱΊΜͲ͍͘͞ྫ
SFEVYDPVOUIBOETPO
DPVOUIBOETPO
τʣ
SFEVYDPVOUIBOETPO
SFBDUSFEVYUPEP
SFEVYUPEP

View Slide

ϥϯνλΠϜʂ ʂ ʂ
63

View Slide

5BCMFPG$POUFOUT
͸͡Ίʹ
ϥϯν
64

View Slide

3FBDU͔Β3FEVYΛ࢖͏ͨΊʹ͸
Ͳ͏͢Ε͹͍͍͔
65

View Slide

SFBDUSFEVY
u Official React bindings for Redux.
(https://react-redux.js.org/introduction/quick-start)
u コンポーネントから redux の store を参照したり、action を dispatch するこ
とを可能にするライブラリ
u react + redux を実現するために必要なライブラリ
66

View Slide

SFBDUSFEVY͕໨ࢦ͢ੈք
67

View Slide

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

View Slide

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

View Slide

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

View Slide

SFBDUSFEVYͷ೉͠͞
u Reactとreduxの接続方法が少なくとも4通りある。特にdispatcherのつなぎ
こみが混乱しやすい。
u そもそも、登場人物が多い！
u provider, connect, mapStateToProps, mapDispatchToProps, dispatch, …
u しかし、react-reduxが提供している関数は、providerとconnectのみである
71
えっ、残りの登場人物はどこから登場してきたの？

View Slide

SFBDUSFEVYͷ೉͠͞
u 登場人物が多い！
u provider, connect, mapStateToProps, mapDispatchToProps, dispatch,
bindActionCreators, …
u しかし、react-reduxが提供している関数は、providerとconnectのみである
72
えっ、残りの登場人物はどこから登場してきたの？
͋ͳ͕ͨ࡞ΔͷͰ͢

View Slide

SFBDUSFEVYͷొ৔ਓ෺Λ੔ཧ͢Δ
SFBDUSFEVY
• QSPWJEFSSFEVYͷTUPSFΛಡΈࠐΊΔΑ͏ʹͯ͘͠ΕΔ
• DPOOFDUDPNQPOFOUͱTUPSFΛܨ͛ͯ͘ΕΔ
ࣗ࡞
• BDUJPO$SFBUPSݺͼग़͢͜ͱͰɺBDUJPOΛ࡞ͬͯฦͯ͘͠ΕΔؔ਺
• NBQ4UBUF5P1SPQTTUPSFͷTUBUF͔ΒಡΈࠐΉ஋Λબ୒͢Δ
• NBQ%JTQBUDI5P1SPQTTUPSFʹର͢ΔEJTQBUDIFSΛબ୒͢Δ
73

View Slide

SFBDUSFEVY͕΍Δ͜ͱ
74

View Slide

75
Reactが提供

View Slide

76
Reduxが提供

View Slide

77
react-reduxが提供

View Slide

78
providerとconnectが提供

View Slide

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

,
document.getElementById("root")
);

View Slide

DPOOFDU
u 任意のReactコンポーネントをreduxのstoreと接続するために利用する関数
80
class Component extends React.Component {
}
// Component -> Reactコンポーネント
const ConnectedComponent = connect()(Component)
// ConnectedComponent -> redux storeと接続されたコンポーネント

View Slide

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は必要というわけではない
あまり使うことはないです。
すくなくとも今は考えなくても良いですー。

View Slide

DPOOFDUͷ࢖͍͔ͨ

DPOOFDU
ͷڍಈ͸ɺ NBQ4UBUF5P1SPQTͱNBQ%JTQBUDI5P1SPQTͷઆ໌ޙɺ
ৄ͘͠ਂ۷Γ·͢ʂ
connect(mapStateToProps, mapDispatchToProps)(Component)
4UPSFͷͲͷ෦෼Λ࢖͏͔ɺ
ͲΜͳΞΫγϣϯΛ࢖͍͍͔ͨઃఆ͢Δ
3FEVYͱͷ઀ଓͷઃఆΛɺ
ίϯϙʔωϯτʹ൓өͤ͞Δॲཧ

View Slide

BDUJPO$SFBUPS
u BDUJPOΛ࡞Δؔ਺
u ͜Ε·Ͱɺstore.dispatch({type: ”SAMPLE_ACTION”})ͳͲͱఆٛͯ͠
͍͕ͨɺຖճBDUJPOΦϒδΣΫτΛखͰ࡞Δͷେม͡Όͳ͍Ͱ͔͢ʁ
u ίϯϙʔωϯτ͔Β؆୯ʹΞΫγϣϯ࡞੒ΛͰ͖ΔΑ͏ʹ͢ΔͨΊʹɺBDUJPOΛ
ฦؔ͢਺͸ఆٛͨ͠ํ͕ྑ͍ɻ
ݺͿ͚ͩͰBDUJPO͕࡞Δ͜ͱ͕Ͱ͖ΔΑ͏ʹͳΔ
83
const checkUser = (userId) => {
return { type: CHECK_USER, payload: id };
};

View Slide

NBQ4UBUF5P1SPQT
u DPOOFDUͷୈҰҾ਺ NBQ4UBUF5P1SPQTͱݺ͹Ε͍ͯΔɻ
u ͜Ε͸ɺҰൠతʹɺ
const mapStateToProps = state => ({ hoge: state.fuga, … })
ͱ͍͏ܗͷؔ਺
u ίϯϙʔωϯτ಺ͰɺTUPSFͷͲͷ஋ΛಡΈऔΓ͍͔ͨΛબ୒͢Δػ
ೳʢTFMFDUPSͱݺ͹ΕΔ͜ͱ΋ʣɻTUBUFΛTUPSFͱߟ͑Δͱཧղ͠
΍͍͢
84

View Slide

NBQ%JTQBUDI5P1SPQT
u connectの第二引数。mapDispatchToPropsと呼ばれている
u 一般的には、
const mapDispatchToProps = dispatch => {
return {hoge: dispatch(hogeActionCreator())}
}
と定義される
u action creatorを渡すことで、どのactionをdispatchさせるかを定義する
85
dispatchは、ただの引数の名前

View Slide

DPOOFDUΛਂ۷Δ

TUPSFͱͷ઀ଓΛઃఆ͢Δؔ਺ʢલ൒ʣͱɺ࣮ࡍʹTUPSFͱ઀ଓ
ͯ͘͠ΕΔؔ਺ʢޙ൒ʣʹ෼͚ͯߟ͑Δͱཧղ͠΍͍͢Αʂ
DPOOFDU NBQ4UBUF5P1SPQT NBQ%JTQBUDI5P1SPQT
$PNQPOFOU

4UPSFͷͲͷ෦෼Λ࢖͏͔ɺͲΜͳΞΫγϣϯΛ
࢖͍͍͔ͨઃఆ͢Δ
3FEVYͱͷ઀ଓͷઃఆΛɺίϯϙʔωϯτ
ʹ൓өͤ͞Δॲཧ
f()() という書き方は、なにかの設定をしてあげ、
その設定を反映させるみたいなことをしたいとき
に、よくあるテクニックです。なんか変な呼び出し
方だよね。

View Slide

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

View Slide

ΫΠζ
88
constructor(){
}
}
return {
hoge: state.hoge,
fuga: state.fuga
}
}
return {
}
}
export default connect(mapStateToProps,mapDispatchToProps)(Component)

View Slide

ΫΠζ
89
constructor(){
}
}
return {
hoge: state.hoge,
fuga: state.fuga
}
}
return {
}
}
export default connect(null,mapDispatchToProps)(Component)

View Slide

೉͍͠ΫΠζ̐
90
constructor(){
}
}
return {
hoge: state.hoge,
fuga: state.fuga
}
}
return {
}
}
export default connect()(Component)

View Slide

࣮͸ɾɾɾ
this.props.dispatch({type: ‘Hoge’})
っていうやり方もある・・・
91

View Slide

92
人
畜
無
害
そ
う
な
顔
を
し
て
い
る
が
数
え
切
れ
な
い
ほ
ど
の
人
間
を
挫
折
さ
せ
て
い
る

View Slide

93
人
畜
無
害
そ
う
な
顔
を
し
て
い
る
が
数
え
切
れ
な
い
ほ
ど
の
人
間
を
挫
折
さ
せ
て
い
る

View Slide

5BCMFPG$POUFOUT
͸͡Ίʹ
ϥϯν
94

View Slide

ϋϯζΦϯ
3FBDU3FEVYͰΧ΢ϯτΞϓϦΛ࡞Δ
95

View Slide

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

View Slide

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

View Slide

ϋϯζΦϯதɾɾɾ
98

View Slide

౴͑
• 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
};
count: 0
};
// reducer
const reducer = (state: TState = initialState, action: TAction) => {
case COUNT_UP:
case COUNT_DOWN:
return { ...state, count: state.count - 1 };
default:
}
};

View Slide

౴͑
• 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);

View Slide

ղ౴
101
"QQ໊ 63- આ໌
UPEP@SFBDU
SFBDU
ऴ໨ඪͰ͢ɻ
ͱΊΜͲ͍͘͞ྫ
SFEVYDPVOUIBOETPO
DPVOUIBOETPO
τʣ
SFEVYDPVOUIBOETPO
SFBDUSFEVYUPEP
SFEVYUPEP

View Slide

5BCMFPGDPOUFOUT
͸͡Ίʹ
࠲ֶSFEVYΛֶͿϞνϕʔγϣϯʹ͍ͭͯ
B ͳͥBJS͸SFBDUΛ࠾༻ͨ͠ͷ͔ͳͥࢲͨͪ͸SFBDUSFEVYΛֶͿͷ͔
C ͳͥSFEVYΛֶͿͷ͔SFBDU୯ମͰར༻͢ΔͱԿ͕ਏ͘ͳΔͷ͔
D SFEVYͰঢ়ଶΛ؅ཧ͢ΔͨΊʹ஌Δ΂͖֓೦
ϋϯζΦϯSFEVYͰΧ΢ϯτػೳΛ࡞Δ
ϥϯν
࠲ֶSFBDU͔ΒSFEVYΛར༻͢Δʹ͸Ͳ͏͢Ε͹͍͍͔
ϋϯζΦϯSFBDUSFEVYͰΧ΢ϯτΞϓϦΛ࡞Δ
ϋϯζΦϯSFBDUSFEVYͰUPEPΞϓϦΛ࡞Δ
102

View Slide

ϋϯζΦϯ
3FBDU3FEVYͰ5PEPΞϓϦΛ࡞Δ
103

View Slide

Ͱ͸ɺࠓ೔ͷ໨ඪʹऔΓֻ͔Γ·͢
104

View Slide

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

View Slide

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

View Slide

ϋϯζΦϯதɾɾɾ
107

View Slide

ղ౴
108
"QQ໊ 63- આ໌
UPEP@SFBDU
SFBDU
ऴ໨ඪͰ͢ɻ
ͱΊΜͲ͍͘͞ྫ
SFEVYDPVOUIBOETPO
DPVOUIBOETPO
τʣ
SFEVYDPVOUIBOETPO
SFBDUSFEVYUPEP
SFEVYUPEP

View Slide

͓ർΕ༷Ͱͨ͠ʂʂ
109

View Slide

͓ർΕ༷Ͱͨ͠
u SFEVYʹঢ়ଶΛҕৡ͠ɺSFBDUੈքͰ6*ʹؔ͢Δϓϩάϥϛϯάʹઐ
೦Ͱ͖ΔΑ͏ʹͳΓ·ͨ͠ɻ
u ࠓ೔΍ͬͯ΋Βͬͨ͜ͱ͸࣮຿Ͱ͓͜ͳ͏࡞ۀͱɺ࣮͸͋·ΓมΘ
Γ͸͋Γ·ͤΜɻ
u ࣮຿ͱͷࠩ෼ઃܭ ෭࡞༻؅ཧ SFEVDFSͷ෼ׂ $44ͷهड़͘Β͍
u ࠷ޙʹ෮शͱ࣍ճ༧ࠂ͚ͩͯ͠ɺऴ͑·͠ΐ͏ʂ
110

View Slide

8SBQVQ
111

View Slide

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

View Slide

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

View Slide

SFEVYSFBDUSFEVYΛ࢖͏خ͠͞
u TJOHMFTUPSFͰ͋ΔͨΊɺΞϓϦέʔγϣϯͷঢ়ଶΛҰՕॴͰ؅ཧ
Ͱ͖Δ
u ͭ·ΓɺG TUBUF
6*͕ G TUPSF
6*ͱͳΔ
u SFEVYʹ઀ଓͨ͠ DPNQPOFOU͸ɺͲ͔͜ΒͰ΋ BDUJPO$SFBUPS Λ
ݺͿ͜ͱͰ TUPSFΛߋ৽͢Δ͜ͱ͕Ͱ͖Δ
114

View Slide

SFEVY͸ͲͷΑ͏ʹͯ͠࢖͏͔
u TUBUFͱ BDUJPOΛड͚औͬͯ৽͍͠ TUBUFΛฦؔ͢਺ SFEVDFSΛ
ఆٛ͢Δ
u SFEVDFS͔Β TUPSFΛ࡞Δ
u TUPSF͔Β BDUJPOΛ EJTQBUDIͯ͠ SFEVDFSΛಈ͔ͯ͠ TUPSFΛ
ߋ৽͢Δ
115

View Slide

࣍ճ༧ࠂSFBDUΛ࢖ͬͨେن໛։ൃ
u SPVUJOH
u SFEVDFS෼ׂ
u middleware
116

View Slide

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

View Slide

͓ർΕ༷Ͱͨ͠ʂʂ
118

View Slide

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

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

sadnessOjisan

More Decks by sadnessOjisan

Other Decks in Technology

Featured

Transcript