聞いたことがあるけど何だかわからない人のためのRedux入門

「聞いたことがあるけど何だかわからない人のためのRedux入門」です。
Reduxの主要概念である、
- store
- action
- reducer
について解説しています。

Mentaにてフロントエンドエンジニアを目指す方向けのレッスンを提供しております。
https://menta.work/plan/1608

Transcript

1. 6IHY\ධ㛛 䝁䞁䝉䝥䝖䛛䜙Ꮫ䜃ጞ䜑䜛
2. 䛭䜒䛭䜒6IHY\ 䛳䛶䚸䛺䜣䛰䛳䛡䠛
3. 6IHY\䛾ᙺ๭ —䝰䝎䞁䛺㛤Ⓨ䛷䛿ᚲ㡲䛾䝣䝺䞊䝮䝽䞊䜽 —74%䛺䛹䛾䝸䝑䝏䛺9-䜢స䜛ᢏ⾡䛾Ⓩሙ䛻క 䛔䚸䝣䝻䞁䝖ഃ䛾≧ែ⟶⌮䛜ᚲせ䛻 —䜾䝻䞊䝞䝹䛺7XEXI⟶⌮䜢ᢸᙜ 䈜6LQJOH3DJH$SSOLFDWLRQ䛾␎ 䈜
4. 6IHY\䛜7XEXI䜢⟶⌮䠛 6IEGX䛾7XEXI䛜⫧኱໬䞉」㞧໬ ĺ;IF䜰䝥䝸䜿䞊䝅䝵䞁䛻䛚䛡䜛䚸 䚷䜾䝻䞊䝞䝹䛺≧ែ⟶⌮䛾ᵓ㐀䜔タィ䛜ᚲせ䛻 䝸䝑䝏䛺9-䛾ᐇ⌧ «ከ䛟䛾7XEXI䜢 䝣䝻䞁䝖ഃ䛷ᣢ䛱䚸 ⣲᪩䛟ฟ䛧䛯䛔 䝻䜾䜲䞁᝟ሗ䛾⟶⌮ 䝯䞁䝞䞊䛾୍ぴ 䝯䞁䝞䞊䛾ヲ⣽᝟ሗ  IXG ౛䠅䝏䝱䝑䝖䜰䝥䝸
5. ௻ᴗ䛷䛾౑䜟䜜᪉ Ɣ ఍♫つᶍ䛾」㞧ᛶ䜢ᣢ䛴䜰䝥䝸䛷䛒䜜䜀䜾䝻䞊䝞䝹䛾7XEXI 䜢⟶⌮䛩䜛௙⤌䜏䛜ᚲせ Ɣ 6IEGX䜢᥇⏝䛧䛶䛔䜛௻ᴗ䛾ከ䛟䛷᥇⏝䛥䜜䛶䛔䜛䚹 ĺ6IEGX䜢౑䛖䝣䝻䞁䝖䜶䞁䝗䜶䞁䝆䝙䜰䛷䛒䜜䜀▱䛳䛶 䛚䛝䛯䛔
6. 䛴䜎䜚 6IHY\䛸䛿タィᛮ᝿ 䠘䜰䞊䜻䝔䜽䝏䝱䠚
7. 䜰䞊䜻䝔䜽䝏䝱䛸䛿䠛 ཎᆺ  *PY\䜰䞊䜻䝔䜽䝏䝱 *EGIFSSO䛜ᥦၐ䚹䝕䞊䝍䛾ὶ䜜䜢୍᪉ྥ䛻㝈ᐃ䛧 䝕䞊䝍≧ែ䛾」㞧䛥䜢㍍ῶ䛥䛫䜘䛖䛸䛩䜛タィᛮ᝿ 䚷*PY\䛾ᴫᛕ䛛䜙ὴ⏕䚹 䚷6IEGX䛷⟶⌮䛩䜛≧ែ䜢 䚷䜂䛸䜎䛸䜑䛻䛧䛶6IHY\ 䚷䛷⟶⌮䛩䜛䛣䛸䛻 6IEGX ĺ6IHY\ :YI ĺ:YI\
8. 6IHY\䛾ᵓ㐀 —%GXMSR —7XSVI —6IHYGIV 䛣䜜䜙䛾䠏䛴䜢౑䛔䚸 䝕䞊䝍䝣䝻䞊䛾 ୍᪉ྥᛶ䜢ᐇ⌧䛥䛫䜛 :MI[ 7XSVI 6IHYGIV %GXMSR 'VIEXSV $FWLRQ 9WIV 7XEXI
9. %GXMSR 7XEXI䛾ኚ᭦䛜ᚲせ䛺䝴䞊䝄䞊䛾ධຊ䛜Ⓨ⏕䛧 䛯ሙྜ䛻䚸%GXMSR'VIEXSV䝯䝋䝑䝗䛻ධຊෆᐜ䛜 Ώ䛥䜜%GXMSR䜸䝤䝆䜵䜽䝖䜢⏕ᡂ 9WIV :MI[ %GXMSR 'VIEXSV %((䛾䜰䜽䝅䝵䞁 సᡂ䛚㢪䛔䛧䜎䛩
10. %GXMSR 7XEXI䛾ኚ᭦䛜ᚲせ䛺䝴䞊䝄䞊䛾ධຊ䛜Ⓨ⏕䛧 䛯ሙྜ䛻䚸%GXMSR'VIEXSV䝯䝋䝑䝗䛻ධຊෆᐜ䛜 Ώ䛥䜜%GXMSR䜸䝤䝆䜵䜽䝖䜢⏕ᡂ 9WIV $'' $FWLRQ %GXMSR'VIEXSV䛷స䜙 䜜䛯%GXMSR䜢7XSVI䛻 ㏦ಙ :MI[ %GXMSR 'VIEXSV 7XSVI HMWTEXGL 9WIV
11. %GXMSR ఱ䛾䛯䜑䛾%GXMSR䛺䛾䛛䚸䝷 䝧䝹 8]TI 䜢䛴䛡䛶㏉䛩 ⏕ᡂ䛥䜜䜛%GXMSR䜸䝤䝆䜵䜽䝖
12. 6IHYGIV Ⓨ⾜䠄(MWTEXGL䠅䛥䜜䛯%GXMSR䜢㆑ู䛧䚸 6IHYGIVෆ䛾ᑐᛂ䛩䜛䝯䝋䝑䝗䜢౑䛳䛶᪂䛧䛔 7XEXI䜢⏕ᡂ 9WIV :MI[ 'HOHWH $GG (GLW 6IHYGIV $'' $FWLRQ 1HZ 6WDWH 7XSVI
13. 6IHYGIV䛾౛ 䛆䝹䞊䝹䛇 䞉ᚲ䛪䜲䝭䝳䞊䝍䝤䝹䛻ಖ䛴 䞉๪స⏝䜢㉳䛣䛥䛺䛔 TYVI䛺㛵ᩘ䛻ಖ䛴 䞉䜸䝤䝆䜵䜽䝖⮬య䛾᭩䛝᥮䛘䛿䛧䛺䛔 %GXMSR䛾X]TI䜢ඖ䛻䚸 ᚲせ䛺7XEXI䜢᪂つసᡂ
14. 7XSVI 䜰䝥䝸䜿䞊䝅䝵䞁ෆ䛷䠍䛴Ꮡᅾ䛧䚸䜾䝻䞊䝞䝹䛷⟶ ⌮䛜ᚲせ䛺7XEXI䜢ಖᣢ 6IHYGIV䛛䜙⏕ᡂ䛥䜜䛯7XEXI䛻⨨䛝᥮䛘䜙䜜䜛 7XSVI 6IHYGIV 䈜䜾䝻䞊䝞䝹䛻ಖᣢ䛩䜛ᚲせ䛺 䛔7XEXI䚸⡆༢䛺7XEXI䛿6IEGX䜢 䛭䛾䜎䜎౑䛖ሙྜ䜒 7XEXI 1HZ 6WDWH
15. 7XSVI䛾సᡂ᪉ἲ సᡂ䛧䛯VIHYGIV䜢ඖ䛻䚸 GVIEXI7XSVI䝯䝋䝑䝗䛷సᡂ䛩䜛 䜰䝥䝸䜿䞊䝅䝵䞁䠋7XSVI䜢ᵓᡂ䛩䜛 䜸䝤䝆䜵䜽䝖䛾ᵓ㐀䛜」㞧䛻䛺䛳䛯 ሙྜ䚸6IHYGIV䜢」ᩘ䛾㛵ᩘ䛻ศ ๭䚸7XEXI䜢ศ䛡䛶ฎ⌮䛩䜛䛣䛸䜒ྍ ⬟
16. 6IHY\ᑟධ䛾䝁䞁䝉䝥䝖 䝕䞊䝍䝣䝻䞊䜢୍᪉ྥ䛻䛧䚸༢⣧໬䚹6IEGX䛸䛾 ᙺ๭䜢ศ๭ 6IEGX 䠖:MI[ᢸᙜ 6IHY\䠖7XEXI䛾⟶⌮䞉ኚ᭦ᢸᙜ :MI[ 7XSVI 6IHYGIV %GXMSR 'VIEXSV $FWLRQ 9WIV 7XEXI
17. 䛷䜒䛡䛳䛝䜗䛟 䛹䛖䜔䛳䛶6IEGX䛸⧅䛢䜛䛾䠛
18. 6IHY\䛿⊂❧䛧䛶䛔䜛䛾䛷 ᑓ⏝䛾䝰䝆䝳䞊䝹䜢౑䛖
19. VIEGXVIHY\䝷䜲䝤䝷䝸䛾ᑟධ
20. VIEGXVIHY\䝷䜲䝤䝷䝸 6IEGX䛸6IHY\䜢⤖䜃䛴䛡䜛ᐃ␒䝟䝍䞊䞁䛾䝷䜲䝤 䝷䝸䚹䝁䞁䝔䝘䞊䜢౑䛳䛶6IHY\䛾7XSVI䛸GSRRIGX 䛧䛶䛒䛢䜛 䛛䚸GSRXI\X%4-䜢౑䛳䛯䜚⮬ศ 䛷䛴䛺䛢䜛䛣䛸䜒䛷䛝䜛䚹 䜘䜚Ⰻ䛔᪉ἲ䜢ᶍ⣴䛧䛶䛔䛟
21. 䝁䞁䝔䝘䞊䠄GSRXEMRIV —6IHY\䛾7XSVI䛜⟶⌮䛩䜛7XEXI —7XEXI䜢ኚ᭦䛩䜛䛯䜑䛾%GXMSR䠄(MWTEXGL䠅 ୖグ䠎䛴䜢䚸6IEGX䝁䞁䝫䞊䝛䞁䝖䛻䝥䝻䝟䝔䜱 䠄TVSTW䠅䛸䛧䛶ὶ䛧㎸䜑䜛䜘䛖䛻䛩䜛䛯䜑䛾⟽
22. 6IHY\䛸㐃ᦠ䐟䝁䞁䝔䝘䞊䜢స䜛 GSRXEMRIV%TT'SRXEMRIVNW  6IEGX䝁䞁䝫䞊䝛䞁䝖%TT䛸6IHY\䜢⧅䛞䛯䛔  %TT䛻4VSTW䛸䛧䛶ὶ䛧䛯䛔䚸 䚷ᚲせ䛺7XEXI䛸%GXMSR䜢ྡ๓䜢䛴䛡䛶ᣦᐃ䠄‽ഛ䠅 䚷QET7XEXI8S4VSTW䠖7XSVI䛾䛹䛾7XEXI䛜ᚲせ䛛 䚷QET(MWTEXGL8S4VSTW䠖䛹䛾%GXMSR䜢౑䛖䛛 䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䠄HMWTEXGL䛩䜛䛛䠅  GSRRIGX䛷%TT䛸⧅䛢䚸4VSTW䛸䛧䛶౑䛘䜛䜘䛖䛻 'SRRIGX䝯䝋䝑䝗䛿䝁䞁䝔䝘䜢సᡂ䛩䜛 ĺ௒ᅇ䛿䝣䜯䜲䝹ྡ䛂%TT'SRXEMRIV䛃 䛸䛔䛖䝁䞁䝔䝘䛜⏕ᡂ䛥䜜䛯
23. 6IHY\䛸㐃ᦠ䐠7XSVI䛾సᡂ䛸㐃ᦠ MRHI\NW  సᡂ䞉䜲䞁䝫䞊䝖䛧䛯6IHYGIV䜢ඖ䛻䚸 䚷䚷7XSVI䜢సᡂ䠄GVIEXI7XSVI䝯䝋䝑䝗䜢౑⏝䠅  VIEGXVIHY\䛾4VSZMHIV䛻WXSVI䜢4VSTW䛸䛧䛶Ώ䛩  సᡂ䛧䛯'SRXEMRIV䜢タ⨨䛧䚸7XSVI䛸%TT䜢⧅䛠 䠄䠌䠅䝁䞁䝔䝘䜢䜲䞁䝫䞊䝖
24. 6IHY\䛸㐃ᦠ䐠7XSVI䛾సᡂ䛸㐃ᦠ MRHI\NW  సᡂ䞉䜲䞁䝫䞊䝖䛧䛯6IHYGIV䜢ඖ䛻䚸 䚷䚷7XSVI䜢సᡂ䠄GVIEXI7XSVI䝯䝋䝑䝗䜢౑⏝䠅  VIEGXVIHY\䛾4VSZMHIV䛻WXSVI䜢4VSTW䛸䛧䛶Ώ䛩  సᡂ䛧䛯'SRXEMRIV䜢タ⨨䛧䚸7XSVI䛸%TT䜢⧅䛠 䠄䠌䠅䝁䞁䝔䝘䜢䜲䞁䝫䞊䝖 㐃ᦠ᏶஢䟿
25. 䈜䝁䞁䝫䞊䝛䞁䝖ෆ䛷䛾౑䛔᪉ %TTNW 䚷7XEXI䜒7XEXI䛾᭩䛝᥮䛘䜒 䚷6IHY\ഃ䛷䛾ືస䛻䛺䜛䛯䚷 䜑䚸6IEGX䛿:MI[䛻≉໬䛷 䚷䛝䜛䜘䛖䛻 &RQWDLQHU䛷ᣦᐃ䞉࿨ྡ䛧䛯VWDWH䛸GLVSDWFK䜢SURSV䛸䛧䛶౑䛖
26. 䛽䚸⡆༢䛷䛧䜗䠛
27. 6IHY\䛳䛶 䝣䜯䜲䝹䜢ศ䛡䛯䜚 ⤖ᵓ」㞧
28. 䛺䛾䛷௦᭰ᡭẁ䛜 ⏕䜎䜜䛴䛴䛒䜚䜎䛩
29. 6IHY\䛾௒ᚋⓗ䛺 —VIGSMPI —VIEGXR 䛺䛹䜒䛖ᑡ䛧ᡭ㍍䛺≧ែ⟶⌮䝷䜲䝤䝷䝸䛜䛒䜛䛾䛷 ౑䜟䛺䛟䛺䜛ྍ⬟ᛶ䜒 6IEGX䛾,SSOW䛻䜒 6IHY\䛸ྠᵝ䛾ᶵ⬟䛒䜚
30. 䜎䛸䜑
31. 6IHY\䛿䜰䞊䜻䝔䜽䝏䝱 䝕䞊䝍䝣䝻䞊䛾୍᪉ྥᛶ 䜾䝻䞊䝞䝹䛺≧ែ䛾⟶⌮
32. 䝣䝻䞁䝖䜶䞁䝗䜢┠ᣦ䛩ே䚸 ⮬స䜰䝥䝸䜢స䜛ே䚸 䝫䞊䝖䝣䜷䝸䜸䜢స䜛ே䚸
33. 䝰䝎䞁䛺㛤Ⓨ䜢䛩䜛ே䛺䜙 ▱䛳䛶䛚䛣䛖
34. 䛒䜚䛜䛸䛖䛤䛦䛔䜎䛧䛯