Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

version1-workspace

June 24, 2020
Tweet

More Decks by version1-workspace

Other Decks in Programming

Transcript

  1. 6IHY\ධ㛛
    䝁䞁䝉䝥䝖䛛䜙Ꮫ䜃ጞ䜑䜛

    View full-size slide

  2. 䛭䜒䛭䜒6IHY\
    䛳䛶䚸䛺䜣䛰䛳䛡䠛

    View full-size slide

  3. 6IHY\䛾ᙺ๭
    —䝰䝎䞁䛺㛤Ⓨ䛷䛿ᚲ㡲䛾䝣䝺䞊䝮䝽䞊䜽
    —74%䛺䛹䛾䝸䝑䝏䛺9-䜢స䜛ᢏ⾡䛾Ⓩሙ䛻క
    䛔䚸䝣䝻䞁䝖ഃ䛾≧ែ⟶⌮䛜ᚲせ䛻
    —䜾䝻䞊䝞䝹䛺7XEXI⟶⌮䜢ᢸᙜ
    䈜6LQJOH3DJH$SSOLFDWLRQ䛾␎

    View full-size slide

  4. 6IHY\䛜7XEXI䜢⟶⌮䠛
    6IEGX䛾7XEXI䛜⫧኱໬䞉」㞧໬
    ĺ;IF䜰䝥䝸䜿䞊䝅䝵䞁䛻䛚䛡䜛䚸
    䚷䜾䝻䞊䝞䝹䛺≧ែ⟶⌮䛾ᵓ㐀䜔タィ䛜ᚲせ䛻
    䝸䝑䝏䛺9-䛾ᐇ⌧
    «ከ䛟䛾7XEXI䜢
    䝣䝻䞁䝖ഃ䛷ᣢ䛱䚸
    ⣲᪩䛟ฟ䛧䛯䛔
    䝻䜾䜲䞁᝟ሗ䛾⟶⌮
    䝯䞁䝞䞊䛾୍ぴ
    䝯䞁䝞䞊䛾ヲ⣽᝟ሗ
    IXG
    ౛䠅䝏䝱䝑䝖䜰䝥䝸

    View full-size slide

  5. ௻ᴗ䛷䛾౑䜟䜜᪉
    Ɣ ఍♫つᶍ䛾」㞧ᛶ䜢ᣢ䛴䜰䝥䝸䛷䛒䜜䜀䜾䝻䞊䝞䝹䛾7XEXI
    䜢⟶⌮䛩䜛௙⤌䜏䛜ᚲせ
    Ɣ 6IEGX䜢᥇⏝䛧䛶䛔䜛௻ᴗ䛾ከ䛟䛷᥇⏝䛥䜜䛶䛔䜛䚹
    ĺ6IEGX䜢౑䛖䝣䝻䞁䝖䜶䞁䝗䜶䞁䝆䝙䜰䛷䛒䜜䜀▱䛳䛶
    䛚䛝䛯䛔

    View full-size slide

  6. 䛴䜎䜚
    6IHY\䛸䛿タィᛮ᝿
    䠘䜰䞊䜻䝔䜽䝏䝱䠚

    View full-size slide

  7. 䜰䞊䜻䝔䜽䝏䝱䛸䛿䠛
    ཎᆺ *PY\䜰䞊䜻䝔䜽䝏䝱
    *EGIFSSO䛜ᥦၐ䚹䝕䞊䝍䛾ὶ䜜䜢୍᪉ྥ䛻㝈ᐃ䛧
    䝕䞊䝍≧ែ䛾」㞧䛥䜢㍍ῶ䛥䛫䜘䛖䛸䛩䜛タィᛮ᝿
    䚷*PY\䛾ᴫᛕ䛛䜙ὴ⏕䚹
    䚷6IEGX䛷⟶⌮䛩䜛≧ែ䜢
    䚷䜂䛸䜎䛸䜑䛻䛧䛶6IHY\
    䚷䛷⟶⌮䛩䜛䛣䛸䛻
    6IEGX ĺ6IHY\
    :YI ĺ:YI\

    View full-size slide

  8. 6IHY\䛾ᵓ㐀
    —%GXMSR
    —7XSVI
    —6IHYGIV
    䛣䜜䜙䛾䠏䛴䜢౑䛔䚸
    䝕䞊䝍䝣䝻䞊䛾
    ୍᪉ྥᛶ䜢ᐇ⌧䛥䛫䜛
    :MI[
    7XSVI
    6IHYGIV
    %GXMSR
    'VIEXSV
    $FWLRQ
    9WIV
    7XEXI

    View full-size slide

  9. %GXMSR
    7XEXI䛾ኚ᭦䛜ᚲせ䛺䝴䞊䝄䞊䛾ධຊ䛜Ⓨ⏕䛧
    䛯ሙྜ䛻䚸%GXMSR'VIEXSV䝯䝋䝑䝗䛻ධຊෆᐜ䛜
    Ώ䛥䜜%GXMSR䜸䝤䝆䜵䜽䝖䜢⏕ᡂ
    9WIV :MI[
    %GXMSR
    'VIEXSV
    %((䛾䜰䜽䝅䝵䞁
    సᡂ䛚㢪䛔䛧䜎䛩

    View full-size slide

  10. %GXMSR
    7XEXI䛾ኚ᭦䛜ᚲせ䛺䝴䞊䝄䞊䛾ධຊ䛜Ⓨ⏕䛧
    䛯ሙྜ䛻䚸%GXMSR'VIEXSV䝯䝋䝑䝗䛻ධຊෆᐜ䛜
    Ώ䛥䜜%GXMSR䜸䝤䝆䜵䜽䝖䜢⏕ᡂ
    9WIV
    $''
    $FWLRQ
    %GXMSR'VIEXSV䛷స䜙
    䜜䛯%GXMSR䜢7XSVI䛻
    ㏦ಙ
    :MI[
    %GXMSR
    'VIEXSV
    7XSVI
    HMWTEXGL
    9WIV

    View full-size slide

  11. %GXMSR
    ఱ䛾䛯䜑䛾%GXMSR䛺䛾䛛䚸䝷
    䝧䝹8]TI 䜢䛴䛡䛶㏉䛩
    ⏕ᡂ䛥䜜䜛%GXMSR䜸䝤䝆䜵䜽䝖

    View full-size slide

  12. 6IHYGIV
    Ⓨ⾜䠄(MWTEXGL䠅䛥䜜䛯%GXMSR䜢㆑ู䛧䚸
    6IHYGIVෆ䛾ᑐᛂ䛩䜛䝯䝋䝑䝗䜢౑䛳䛶᪂䛧䛔
    7XEXI䜢⏕ᡂ
    9WIV :MI[
    'HOHWH
    $GG
    (GLW
    6IHYGIV
    $''
    $FWLRQ
    1HZ
    6WDWH
    7XSVI

    View full-size slide

  13. 6IHYGIV䛾౛
    䛆䝹䞊䝹䛇
    䞉ᚲ䛪䜲䝭䝳䞊䝍䝤䝹䛻ಖ䛴
    䞉๪స⏝䜢㉳䛣䛥䛺䛔 TYVI䛺㛵ᩘ䛻ಖ䛴
    䞉䜸䝤䝆䜵䜽䝖⮬య䛾᭩䛝᥮䛘䛿䛧䛺䛔
    %GXMSR䛾X]TI䜢ඖ䛻䚸
    ᚲせ䛺7XEXI䜢᪂つసᡂ

    View full-size slide

  14. 7XSVI
    䜰䝥䝸䜿䞊䝅䝵䞁ෆ䛷䠍䛴Ꮡᅾ䛧䚸䜾䝻䞊䝞䝹䛷⟶
    ⌮䛜ᚲせ䛺7XEXI䜢ಖᣢ
    6IHYGIV䛛䜙⏕ᡂ䛥䜜䛯7XEXI䛻⨨䛝᥮䛘䜙䜜䜛
    7XSVI
    6IHYGIV
    䈜䜾䝻䞊䝞䝹䛻ಖᣢ䛩䜛ᚲせ䛺
    䛔7XEXI䚸⡆༢䛺7XEXI䛿6IEGX䜢
    䛭䛾䜎䜎౑䛖ሙྜ䜒
    7XEXI 1HZ
    6WDWH

    View full-size slide

  15. 7XSVI䛾సᡂ᪉ἲ
    సᡂ䛧䛯VIHYGIV䜢ඖ䛻䚸
    GVIEXI7XSVI䝯䝋䝑䝗䛷సᡂ䛩䜛
    䜰䝥䝸䜿䞊䝅䝵䞁䠋7XSVI䜢ᵓᡂ䛩䜛
    䜸䝤䝆䜵䜽䝖䛾ᵓ㐀䛜」㞧䛻䛺䛳䛯
    ሙྜ䚸6IHYGIV䜢」ᩘ䛾㛵ᩘ䛻ศ
    ๭䚸7XEXI䜢ศ䛡䛶ฎ⌮䛩䜛䛣䛸䜒ྍ

    View full-size slide

  16. 6IHY\ᑟධ䛾䝁䞁䝉䝥䝖
    䝕䞊䝍䝣䝻䞊䜢୍᪉ྥ䛻䛧䚸༢⣧໬䚹6IEGX䛸䛾
    ᙺ๭䜢ศ๭
    6IEGX 䠖:MI[ᢸᙜ
    6IHY\䠖7XEXI䛾⟶⌮䞉ኚ᭦ᢸᙜ
    :MI[
    7XSVI
    6IHYGIV
    %GXMSR
    'VIEXSV
    $FWLRQ
    9WIV
    7XEXI

    View full-size slide

  17. 䛷䜒䛡䛳䛝䜗䛟
    䛹䛖䜔䛳䛶6IEGX䛸⧅䛢䜛䛾䠛

    View full-size slide

  18. 6IHY\䛿⊂❧䛧䛶䛔䜛䛾䛷
    ᑓ⏝䛾䝰䝆䝳䞊䝹䜢౑䛖

    View full-size slide

  19. VIEGXVIHY\䝷䜲䝤䝷䝸䛾ᑟධ

    View full-size slide

  20. VIEGXVIHY\䝷䜲䝤䝷䝸
    6IEGX䛸6IHY\䜢⤖䜃䛴䛡䜛ᐃ␒䝟䝍䞊䞁䛾䝷䜲䝤
    䝷䝸䚹䝁䞁䝔䝘䞊䜢౑䛳䛶6IHY\䛾7XSVI䛸GSRRIGX
    䛧䛶䛒䛢䜛
    䛛䚸GSRXI\X%4-䜢౑䛳䛯䜚⮬ศ
    䛷䛴䛺䛢䜛䛣䛸䜒䛷䛝䜛䚹
    䜘䜚Ⰻ䛔᪉ἲ䜢ᶍ⣴䛧䛶䛔䛟

    View full-size slide

  21. 䝁䞁䝔䝘䞊䠄GSRXEMRIV
    —6IHY\䛾7XSVI䛜⟶⌮䛩䜛7XEXI
    —7XEXI䜢ኚ᭦䛩䜛䛯䜑䛾%GXMSR䠄(MWTEXGL䠅
    ୖグ䠎䛴䜢䚸6IEGX䝁䞁䝫䞊䝛䞁䝖䛻䝥䝻䝟䝔䜱
    䠄TVSTW䠅䛸䛧䛶ὶ䛧㎸䜑䜛䜘䛖䛻䛩䜛䛯䜑䛾⟽

    View full-size slide

  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䛃
    䛸䛔䛖䝁䞁䝔䝘䛜⏕ᡂ䛥䜜䛯

    View full-size slide

  23. 6IHY\䛸㐃ᦠ䐠7XSVI䛾సᡂ䛸㐃ᦠ
    MRHI\NW
    సᡂ䞉䜲䞁䝫䞊䝖䛧䛯6IHYGIV䜢ඖ䛻䚸
    䚷䚷7XSVI䜢సᡂ䠄GVIEXI7XSVI䝯䝋䝑䝗䜢౑⏝䠅
    VIEGXVIHY\䛾4VSZMHIV䛻WXSVI䜢4VSTW䛸䛧䛶Ώ䛩
    సᡂ䛧䛯'SRXEMRIV䜢タ⨨䛧䚸7XSVI䛸%TT䜢⧅䛠
    䠄䠌䠅䝁䞁䝔䝘䜢䜲䞁䝫䞊䝖

    View full-size slide

  24. 6IHY\䛸㐃ᦠ䐠7XSVI䛾సᡂ䛸㐃ᦠ
    MRHI\NW
    సᡂ䞉䜲䞁䝫䞊䝖䛧䛯6IHYGIV䜢ඖ䛻䚸
    䚷䚷7XSVI䜢సᡂ䠄GVIEXI7XSVI䝯䝋䝑䝗䜢౑⏝䠅
    VIEGXVIHY\䛾4VSZMHIV䛻WXSVI䜢4VSTW䛸䛧䛶Ώ䛩
    సᡂ䛧䛯'SRXEMRIV䜢タ⨨䛧䚸7XSVI䛸%TT䜢⧅䛠
    䠄䠌䠅䝁䞁䝔䝘䜢䜲䞁䝫䞊䝖
    㐃ᦠ᏶஢䟿

    View full-size slide

  25. 䈜䝁䞁䝫䞊䝛䞁䝖ෆ䛷䛾౑䛔᪉
    %TTNW
    䚷7XEXI䜒7XEXI䛾᭩䛝᥮䛘䜒
    䚷6IHY\ഃ䛷䛾ືస䛻䛺䜛䛯䚷
    䜑䚸6IEGX䛿:MI[䛻≉໬䛷
    䚷䛝䜛䜘䛖䛻
    &RQWDLQHU䛷ᣦᐃ䞉࿨ྡ䛧䛯VWDWH䛸GLVSDWFK䜢SURSV䛸䛧䛶౑䛖

    View full-size slide

  26. 䛽䚸⡆༢䛷䛧䜗䠛

    View full-size slide

  27. 6IHY\䛳䛶
    䝣䜯䜲䝹䜢ศ䛡䛯䜚
    ⤖ᵓ」㞧

    View full-size slide

  28. 䛺䛾䛷௦᭰ᡭẁ䛜
    ⏕䜎䜜䛴䛴䛒䜚䜎䛩

    View full-size slide

  29. 6IHY\䛾௒ᚋⓗ䛺
    —VIGSMPI
    —VIEGXR
    䛺䛹䜒䛖ᑡ䛧ᡭ㍍䛺≧ែ⟶⌮䝷䜲䝤䝷䝸䛜䛒䜛䛾䛷
    ౑䜟䛺䛟䛺䜛ྍ⬟ᛶ䜒
    6IEGX䛾,SSOW䛻䜒
    6IHY\䛸ྠᵝ䛾ᶵ⬟䛒䜚

    View full-size slide

  30. 6IHY\䛿䜰䞊䜻䝔䜽䝏䝱
    䝕䞊䝍䝣䝻䞊䛾୍᪉ྥᛶ
    䜾䝻䞊䝞䝹䛺≧ែ䛾⟶⌮

    View full-size slide

  31. 䝣䝻䞁䝖䜶䞁䝗䜢┠ᣦ䛩ே䚸
    ⮬స䜰䝥䝸䜢స䜛ே䚸
    䝫䞊䝖䝣䜷䝸䜸䜢స䜛ே䚸

    View full-size slide

  32. 䝰䝎䞁䛺㛤Ⓨ䜢䛩䜛ே䛺䜙
    ▱䛳䛶䛚䛣䛖

    View full-size slide

  33. 䛒䜚䛜䛸䛖䛤䛦䛔䜎䛧䛯

    View full-size slide