Redux tutorial: ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² Redux & React-redux / Π₯Π°Π±Ρ
Π£ΡΠ΅Π±Π½ΠΈΠΊ: Π²Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² React
ΠΠ°Π½Π½ΡΠΉ ΡΡΠ΅Π±Π½ΠΈΠΊ Π½Π΅ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ Π·Π½Π°Π½ΠΈΠΉ React.
ΠΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ ΠΊΠ°ΠΊ Π½Π°ΡΠ½ΡΠΌ
Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π½Π΅Π±ΠΎΠ»ΡΡΡΡ ΠΈΠ³ΡΡ. Π£ Π²Π°Ρ ΠΌΠΎΠΆΠ΅Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡΡ
ΡΠΎΠ±Π»Π°Π·Π½ ΠΏΡΠΎΠΏΡΡΡΠΈΡΡ Π΅Π³ΠΎ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π²Ρ Π½Π΅ ΠΏΠΈΡΠ΅ΡΠ΅ ΠΈΠ³ΡΡ — Π½Π΅ Π΄Π΅Π»Π°ΠΉΡΠ΅ ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΡΠΏΠ΅ΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅.
ΠΠ΅ΡΠΎΠ΄Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Π·Π΄Π΅ΡΡ ΠΈΠ·ΡΡΠΈΡΠ΅, ΠΈΠΌΠ΅ΡΡ ΠΎΡΠ½ΠΎΠ²ΠΎΠΏΠΎΠ»Π°Π³Π°ΡΡΠ΅Π΅
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π»ΡΠ±ΡΡ
React ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Π° ΠΈΡ
ΠΎΡΠ²ΠΎΠ΅Π½ΠΈΠ΅ Π΄Π°ΡΡ Π²Π°ΠΌ
Π³Π»ΡΠ±ΠΎΠΊΠΎΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ React.
ΠΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ°
ΠΡΠΎΡ ΡΡΠ΅Π±Π½ΠΈΠΊ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ Π»ΡΠ΄Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΆΠ΅Π»Π°ΡΡ ΡΡΠΈΡΡΡΡ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅.
ΠΡΠ»ΠΈ ΠΆΠ΅ Π²Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°Π΅ΡΠ΅ ΠΈΠ·ΡΡΠ°ΡΡ ΡΠ΅ΠΎΡΠ΅ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ Ρ Π½ΡΠ»Ρ, ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ
Ρ Π½Π°ΡΠΈΠΌ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΡΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎΠΌ.
Π’Π°ΠΊΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΈ Π΄Π°Π½Π½ΡΠΉ ΡΡΠ΅Π±Π½ΠΈΠΊ Π΄ΠΎΠΏΠΎΠ»Π½ΡΡΡΠΈΠΌΠΈ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°.
Π£ΡΠ΅Π±Π½ΠΈΠΊ ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠ°Π·Π΄Π΅Π»ΠΎΠ²:
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ°. ΠΠ°ΡΡ Π²Π°ΠΌ ΠΎΡΠΏΡΠ°Π²Π½ΡΡ ΡΠΎΡΠΊΡ, ΡΡΠΎΠ±Ρ ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ ΡΡΠ΅Π±Π½ΠΈΠΊΡ.
ΠΠ±Π·ΠΎΡ. ΠΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ Π²Π°Ρ Ρ ΠΎΡΠ½ΠΎΠ²Π°ΠΌΠΈ React: ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ, ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ.
ΠΠ°Π²Π΅ΡΡΠ΅Π½ΠΈΠ΅ ΠΈΠ³ΡΡ. ΠΠ°ΡΡΠΈΡ Π²Π°Ρ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΌ ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π² React.
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Time Travel. ΠΠ°ΡΡ Π²Π°ΠΌ Π±ΠΎΠ»Π΅Π΅ Π³Π»ΡΠ±ΠΎΠΊΠΎΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ² React.
ΠΠ°ΠΌ Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ·ΡΡΠ°ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π²ΡΠ΅ ΡΠ°Π·Π΄Π΅Π»Ρ, ΡΡΠΎΠ±Ρ ΠΈΠ·Π²Π»Π΅ΡΡ ΠΏΠΎΠ»ΡΠ·Ρ ΠΈΠ· ΡΡΠΎΠ³ΠΎ ΡΡΠ΅Π±Π½ΠΈΠΊΠ°.
ΠΠΎΡΡΠ°ΡΠ°ΠΉΡΠ΅ΡΡ Π΄ΠΎΠ±ΡΠ°ΡΡΡΡ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π°Π»ΡΡΠ΅ — Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΡΡΠΎ ΠΎΠ΄Π½Π° ΠΈΠ»ΠΈ Π΄Π²Π΅ Π³Π»Π°Π²Ρ.
ΠΠΎ Π²ΡΠ΅ΠΌΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΈ Π²ΡΡΠ°Π²Π»ΡΡΡ ΠΊΠΎΠ΄, Π½ΠΎ
ΠΌΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ Π½Π°Π±ΠΈΡΠ°ΡΡ Π΅Π³ΠΎ Π²ΡΡΡΠ½ΡΡ. ΠΡΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΡΠ°Π·Π²ΠΈΡΡ ΠΌΡΡΠ΅ΡΠ½ΡΡ
ΠΏΠ°ΠΌΡΡΡ ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π±ΠΎΠ»Π΅Π΅ Π³Π»ΡΠ±ΠΎΠΊΠΎΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΡΡΠ΅Π³ΠΎ.
Π§ΡΠΎ ΠΌΡ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΠΌ?
Π ΡΡΠΎΠΌ ΡΡΠ΅Π±Π½ΠΈΠΊΠ΅ ΠΌΡ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ
ΠΈΠ³ΡΡ Π² ΠΊΡΠ΅ΡΡΠΈΠΊΠΈ-Π½ΠΎΠ»ΠΈΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ React.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ Π·Π΄Π΅ΡΡ: ΠΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ
ΡΠ΅Π·
8 Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ ΠΎΠ±ΡΡΠ°Π»ΠΎΠΊ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΡ React.js | GeekBrains
Π Redux Π΄Π»Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΠΊΡΡΠ³ΠΎΠ·ΠΎΡΠ°.
https://d2xzmw6cctk25h.cloudfront.net/post/1076/og_cover_image/8e7c3877b8f543f785d3b3d7dd6da6f9
React.js ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ Π² 2013 Π³ΠΎΠ΄Ρ ΡΡΠ°Π» ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΌΠ°ΡΡΠΎΠ²ΠΎΠΉ Π°ΡΠ΄ΠΈΡΠΎΡΠΈΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ². Π 2017 Π³ΠΎΠ΄Ρ ΡΡΠΎ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π΄Π²ΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ JavaScript-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠ² (Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ), Π° ΠΏΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌ Π΄Π°Π½Π½ΡΠΌΒ ΠΈ Π²ΠΎΠ²ΡΠ΅Β Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ Π»ΠΈΠ΄Π΅Ρ. Π ΠΎΠ±ΡΠ΅ΠΌ, Π΅ΡΠ»ΠΈ Π²Ρ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ, ΡΠΎ Π²Π°ΠΌ ΡΡΡΠΎΠ³ΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ Ρ ΠΎΡΡ Π±Ρ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Ρ React ΠΈ Π΅Π³ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ. Π Π²Π°ΠΌ Π² ΠΏΠΎΠΌΠΎΡΡ 8 Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ ΡΡΡΠΎΡΠΈΠ°Π»ΠΎΠ².
GitBook ΠΏΠΎ React Π½Π° ΡΡΡΡΠΊΠΎΠΌ
ΠΠ°ΡΠ½ΡΠΌ ΡΒ ΡΡΡΡΠΊΠΎΡΠ·ΡΡΠ½ΠΎΠ³ΠΎ ΡΡΠ΅Π±Π½ΠΈΠΊΠ°, Π²Π΅Π΄Ρ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΠ΅ Π³ΠΈΠΊΠΈ Π²Β Π½Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½Π΅ ΠΏΡΠΎΡΡΠΎ ΠΈΠ³Π½ΠΎΡΠΈΡΡΡΡ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡ Π²Β ΠΈΠ·ΡΡΠ΅Π½ΠΈΠΈ Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΎΠ³ΠΎ ΡΠ·ΡΠΊΠ° Π½Π°Β ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅. ΠΠΏΡΠΎΡΠ΅ΠΌ, ΡΒ ΡΠ°ΠΊΠΈΠΌ ΡΡΠ΅Π±Π½ΠΈΠΊΠΎΠΌ ΠΎΠ½Β Π½Π΅Β ΠΎΡΠΎΠ±ΠΎ-ΡΠΎΒ ΠΈΒ Π½ΡΠΆΠ΅Π½.
ΠΠ΄Π΅ΡΡΒ Π²ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠ°Ρ Π΄Π»Ρ Π½ΠΎΠ²ΠΈΡΠΊΠ° ΡΠ΅ΠΎΡΠΈΡ, ΠΈΠ·Π»ΠΎΠΆΠ΅Π½Π½Π°Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ, ΡΒ ΠΎΠ³ΡΠΎΠΌΠ½ΡΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡΡΠΈΡ ΡΠ°Π±ΠΎΡΡ ΡΒ ΡΠΎΡΠΌΠ°ΠΌΠΈ, ΠΈΒ ΡΠ°ΠΌΠΎΠ΅ Π³Π»Π°Π²Π½ΠΎΠ΅Β β ΠΌΠΈΠ½ΠΈΠΌΡΠΌ Π³ΠΎΠ»ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°.
ΠΡΡΡΡ ΠΏΠΎ React ΠΎΡ Tyler McGinnis
ΠΡ ΡΡΡΡΠΊΠΎΠ³ΠΎ ΡΠ·ΡΠΊΠ° ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΠΌ ΠΊ Ρ Π°ΡΠ΄ΠΊΠΎΡΠ½ΠΎ-Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΎΠΌΡ, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ Π²ΠΈΠ΄Π΅ΠΎΠΊΡΡΡΠ°ΠΌ, Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½Π½ΡΠΌ Π½Π° Π±Π°Π·ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΠΊΠΎΠΌΡΡΠ²ΠΎ Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ React. 48 Π·Π°Π½ΡΡΠΈΠΉ (Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΆΠΈΠ²Π°ΠΉΡΠ΅, Π² ΡΡΠΌΠΌΠ΅ ΡΡΠΎ 287 ΠΌΠΈΠ½ΡΡ), ΠΏΠΎΡΠ²ΡΡΡΠ½Π½ΡΡ Π±Π°Π·ΠΎΠ²ΡΠΌ ΠΏΡΠΈΠ½ΡΠΈΠΏΠ°ΠΌ ΡΠ°Π±ΠΎΡΡ Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ, ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ ΡΠ°Π±Π»ΠΎΠ½Π½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΈ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΈΠΏΠΎΠ²ΡΡ Π·Π°Π΄Π°Ρ. ΠΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΡΡΡΠΊΠΈΠΌ ΡΡΠ΅Π±Π½ΠΈΠΊΠΎΠΌ Π΄Π»Ρ ΠΏΠΎΠ΄ΡΡΠ³ΠΈΠ²Π°Π½ΠΈΡ Π·Π½Π°Π½ΠΈΠΉ Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΎΠ³ΠΎ.
Hacking with React
ΠΠ»Π΅ΠΊΡΡΠΎΠ½Π½Π°Ρ Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π°Ρ ΠΊΠ½ΠΈΠ³Π° ΠΏΠΎ React, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Ρ Π½ΡΠ»Π΅Π²ΡΠΌΠΈ Π·Π½Π°Π½ΠΈΡΠΌΠΈ ΠΏΠΎΠ³ΡΡΠ·ΠΈΡΡΡΡ Π² ΠΌΠΈΡ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ. ΠΠ°ΡΠΈΠ½Π°Π΅ΡΡΡ ΠΎΠ½Π° Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ, Π·Π½Π°ΠΊΠΎΠΌΠΈΡ Ρ JSX, Π° Π΄Π°Π»Π΅Π΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Hacking with React Π²Ρ ΡΠΎΠ·Π΄Π°Π΄ΠΈΡΠ΅ ΡΠ²ΠΎΠΉ ΠΏΠ΅ΡΠ²ΡΠΉ ΠΏΡΠΎΠ΅ΠΊΡ. ΠΠΎ Π½Π΅ Π½Π°Π΄Π΅ΠΉΡΠ΅ΡΡ Π½Π°ΠΉΡΠΈ Π·Π΄Π΅ΡΡ Π²ΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΡΡΡΡ Π²Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΏΠΎ React ΠΈ ΡΠΆ ΡΠ΅ΠΌ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ Π²Π΅Π±Π°. ΠΠ°Π½Π½Π°Ρ ΠΊΠ½ΠΈΠ³Π° ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΏΠΎΠ²Π΅ΡΡ Π½ΠΎΡΡΠ½ΠΎΠ³ΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠ»Π΅Π½ΠΈΡ. ΠΡΡΠ°ΡΠΈ, Π΅ΡΠ»ΠΈ Π²Ρ Π»ΡΠ±ΠΈΡΠ΅Π»Ρ ΠΏΠΎΡΠΈΡΠ°ΡΡ ΠΊΠ½ΠΈΠ³ΠΈ Π²Π½Π΅ Π΄ΠΎΠΌΠ° ΠΈ ΡΠ°Π±ΠΎΡΡ, ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π° Π½Π΅ΡΠΊΡΠΎΠΌΠ½ΡΠ΅ 10$ ΡΠΊΠ°ΡΠ°ΡΡ Π°Π²ΡΠΎΠ½ΠΎΠΌΠ½ΡΡ Π²Π΅ΡΡΠΈΡ ΡΡΠ΅Π±Π½ΠΈΠΊΠ°.
ΠΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΡΡΡΠΎΡΠΈΠ°Π» ΠΏΠΎ React
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Π° ΠΈΡΡΠ΅ΡΠΏΡΠ²Π°ΡΡΠ°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π½Π°ΠΉΡΠΈ Π΅Ρ βΒ ΠΎΠ±ΡΠ°ΡΠΈΡΡΡΡ ΠΊ ΠΏΠ΅ΡΠ²ΠΎΠΈΡΡΠΎΡΠ½ΠΈΠΊΡ, ΡΠΎ Π΅ΡΡΡ ΠΊ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ. ΠΠΎΡΠ΅ΠΌΡ Π΄Π°Π½Π½ΡΠΉ ΡΡΡΠΎΡΠΈΠ°Π» Π½Π΅ Π½Π° ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠΏΠΈΡΠΊΠ΅? ΠΡΡ ΠΏΡΠΎΡΡΠΎ. ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ, Π½Π° ΠΌΠΎΠΉ Π»ΠΈΡΠ½ΡΠΉ Π²Π·Π³Π»ΡΠ΄, ΠΎΠ½ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ·Π±ΡΡΠΎΡΠ΅Π½ Π΄Π»Ρ Π½ΠΎΠ²ΠΈΡΠΊΠ°. ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΎΠΏΡΡ ΡΠ°Π±ΠΎΡΡ Ρ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ Π΅ΡΡ JS-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠΌ, ΡΠΎ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ΄ΠΎΠ±Π½ΠΎ ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΠΎ. ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΠ»ΡΠΊΠΎ Π²ΡΠ΅ΡΠ° ΠΏΠΎΡΡΠΈΠ³Π»ΠΈ ΠΎΡΠ½ΠΎΠ²Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ,Β Π»ΡΡΡΠ΅ Π·Π°Π³Π»ΡΠ½ΠΈΡΠ΅ ΡΡΠ΄Π° ΠΏΠΎΠΏΠΎΠ·ΠΆΠ΅.
Π€ΡΠ½Π΄Π°ΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠ΅ ΠΊΡΡΡΡ ΠΎΡ Egghead
ΠΠ»Π°ΡΡΠΎΡΠΌΠ° Egghead ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π²ΠΈΠ΄Π΅ΠΎΡΡΠΎΠΊΠΈ, ΡΡΠ΅Π΄ΠΈ ΠΊΠΎΡΠΎΡΡΡ Π΅ΡΡΡ ΠΊΠ°ΠΊ ΠΎΠ±ΡΠΈΠΉ Π²Π²ΠΎΠ΄Π½ΡΠΉ ΠΊΡΡΡ ΠΏΠΎ JavaScript, ΡΠ°ΠΊ ΠΈ Π·Π°Π½ΡΡΠΈΡ ΠΏΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΌ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°ΠΌ, Π±ΡΠ΄Ρ ΡΠΎ Angular ΠΈΠ»ΠΈ React. ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΠΊΡΡΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΠ΅ΡΡΠΈΠΌ ΠΏΠΎ ΠΎΠ±ΡΠ΅ΠΌΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π°, ΠΈ ΠΎΠ½ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ 5 Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ ΡΠ°Π·Π΄Π΅Π»ΠΎΠ².
ΠΠ²Π° ΠΈΠ· Π½ΠΈΡ ΠΏΠΎΡΠ²ΡΡΠ΅Π½ΠΎ ΠΎΠ±ΡΠΈΠΌ Π²ΠΎΠΏΡΠΎΡΠ°ΠΌ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Π΄Π²Π° βΒ Π·Π½Π°ΠΊΠΎΠΌΡΡΠ²Ρ Ρ Redux, ΠΈ Π΅ΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·Π΄Π΅Π» ΠΏΠΎΠ²Π΅Π΄Π°Π΅Ρ ΠΎ Π²ΠΎΠΏΡΠΎΡΠ°Ρ ΡΠΎΡΡΠΈΠ½Π³Π° Π² React. Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ° Π²ΡΠΏΡΡΠΊΠ°Π΅Ρ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄Π»Ρ Β«Π·Π°ΡΡΠ°Π²ΠΊΠΈΒ», ΡΠΎ Π½Π° ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΡΠ΅ Π·Π½Π°Π½ΠΈΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°ΡΡΡΠΈΡΡΠ²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ ΠΎΠΏΠ»Π°ΡΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ Pro. ΠΠ΄Π½Π°ΠΊΠΎ Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΎ React ΠΈ Redux Ρ Π²Π°ΡΠΈΡ ΠΈ ΡΡΠΈΡ ΠΊΠΎΡΠΎΡΠΊΠΈΡ Π·Π°Π½ΡΡΠΈΠΉ.
GtiBook ΠΏΠΎ Redux Π½Π° ΡΡΡΡΠΊΠΎΠΌ
Π Π°Π· ΡΠΆ ΡΠ΅ΡΡ Π·Π°ΡΠ»Π° ΠΎ Redux, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΠΎΡΡ ΠΈ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°ΡΡΡΡ React, Π½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎ ΠΎΠ±ΠΈΡΠ°Π΅Ρ Π³Π΄Π΅-ΡΠΎ Π² ΡΡΠΎΠΉ ΠΆΠ΅ ΡΠΊΠΎΡΠΈΡΡΠ΅ΠΌΠ΅, ΡΠΎ Π²Π°ΡΠ΅ΠΌΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ ΡΡΡΡΠΊΠΎΡΠ·ΡΡΠ½ΡΠΉ ΡΡΠ΅Π±Π½ΠΈΠΊ ΠΏΠΎ ΡΡΠΎΠΉ Π΄ΠΈΡΡΠΈΠΏΠ»ΠΈΠ½Π΅. ΠΠ²ΡΠΎΡ ΡΠΎΡ ΠΆΠ΅, Π½ΠΎ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π» Π·Π΄Π΅ΡΡ ΡΠ°ΡΡΡΠΈΡΠ°Π½ Π½Π° Π±ΠΎΠ»Π΅Π΅ ΠΈΡΠΊΡΡΡΠ½Π½ΡΡ ΠΏΡΠ±Π»ΠΈΠΊΡ. ΠΠ΄Π΅ΡΡ Π²Ρ ΠΏΡΠΎΡΠΈΡΠ°Π΅ΡΠ΅ ΠΈ ΠΏΡΠΎ webpack, ΠΈ ΠΏΡΠΎ hot module replacement, ΡΠ΅Π³ΠΎ Π½Π΅ Π±ΡΠ»ΠΎ Π² ΠΏΠ΅ΡΠ²ΠΎΠΉ ΡΠ°ΡΡΠΈ. Π Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π²Ρ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π°Π²ΡΠΎΡΠΎΠΌ ΡΠΎΠ·Π΄Π°Π΄ΠΈΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ±ΠΎΡΠΊΠΈ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ ΠΈΠ· ΡΠ΅ΡΠΈ ΠΠΊΠΎΠ½ΡΠ°ΠΊΡΠ΅ ΠΏΠΎ Π·Π°Π΄Π°Π½Π½ΡΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌ.
React ΠΈ Redux Ρ Cabin
ΠΡΠΎ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΡΡΠΎΡΠΈΠ°Π» ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Ρ Π½ΡΠ»Ρ. ΠΠ°ΡΠΈΠ½Π°Π΅ΡΠ΅ Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ React, Π΅Π³ΠΎ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ, ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΡΠ΅ Redux, ΡΠ°Π±ΠΎΡΠ°Π΅ΡΠ΅ Ρ ΡΠΈΠ»ΡΡΡΠ°ΠΌΠΈ ΠΈ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ Π³ΠΎΡΠΎΠ²ΡΠΉ ΠΏΡΠΎΠ΄ΡΠΊΡ. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎΡΠ΅Π½Ρ ΡΡ ΠΎΠΆΠ° Ρ ΡΡΡΡΠΊΠΎΡΠ·ΡΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠ΅ΠΉ, Π½ΠΎ Π·Π΄Π΅ΡΡ Π±ΠΎΠ»ΡΡΠΈΠΉ Π°ΠΊΡΠ΅Π½Ρ Π΄Π΅Π»Π°Π΅ΡΡΡ Π½Π° Π³ΠΈΠ±ΠΊΠΎΡΡΡ ΠΈ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ. Π Π΅ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π·Π΄Π΅ΡΡ Π±ΡΠ΄Π΅ΡΠ΅ Ρ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡΠΌΠΈ ΠΈΠ· Instagram.
The React Convention
ΠΠ΅ΡΠ΅Π΄ Π²Π°ΠΌΠΈ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΆΡΡΠ½Π°Π» ΠΏΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Ρ React. Π ΡΠΈΠ»Ρ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠΈΒ Π½ΠΎΠ²ΠΈΡΠΊΠ°ΠΌ ΡΡΠ΄Π° Π»ΡΡΡΠ΅ Π½Π΅ ΡΠΎΠ²Π°ΡΡΡΡ. ΠΠ°ΡΠΎ ΠΎΠΏΡΡΠ½ΡΠ΅, Π° ΡΠΎΡΠ½Π΅Π΅, Β«ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΡΠ΅Β» ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π½Π°ΠΉΠ΄ΡΡ Π·Π΄Π΅ΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠ³ΠΎΒ ΠΊΠ°ΠΊ ΠΏΠΎ ΡΠ°Π±Π»ΠΎΠ½Π½ΡΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ½ΡΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΡΠΌ, ΡΠ°ΠΊ ΠΈ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠ°ΠΌ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ. Π ΠΎΠ±ΡΠ΅ΠΌ, Π²ΡΠ΅ΠΌ ΡΠ΅ΠΌ, ΠΊΡΠΎ ΡΠΆΠ΅ Π½Π΅ Π½ΠΎΠ²ΠΈΡΠΎΠΊ Π² React ΠΈ Redux, Π½ΠΎ Π²ΡΡ Π΅ΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΎΠΌΠ½Π΅Π²Π°Π΅ΡΡΡ, ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠ΅ΡΠΈΠΎΠ΄ΠΈΡΠ΅ΡΠΊΠΈ Π·Π°Ρ ΠΎΠ΄ΠΈΡΡ, ΡΠΈΡΠ°ΡΡΒ ΠΈ Π½Π΅ Π·Π°Π±ΡΠ²Π°ΡΡ ΠΏΠ΅ΡΠΈΠΎΠ΄ΠΈΡΠ΅ΡΠΊΠΈ ΠΏΡΠΎΠ²Π΅ΡΡΡΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ.
ΠΠΎΡΡΠΈ 500 React ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² ΠΈ ΡΠ΅ΡΡΡΡΠΎΠ²
ΠΠΎΡΡΠΈ 500 React ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² ΠΈ ΡΠ΅ΡΡΡΡΠΎΠ²
ΠΠΎΡΡΠΈ 500 React ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² ΠΈ ΡΠ΅ΡΡΡΡΠΎΠ²
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π²Π΅ΡΠ΅ΠΉ, ΠΊΠ°ΡΠ°ΡΡΠΈΡ ΡΡ ΡΠΊΠΎΡΠΈΡΡΠ΅ΠΌΡ React. ΠΡΠ΅, ΡΡΠΎ Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ ΠΏΠΎ ΡΠΏΠΈΡΠΊΡ Π½ΠΈΠΆΠ΅, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ.
Β
React
JavaScript Library for building User Interfaces
React General Resources
React Community
React Online Playgrounds
React Tutorials
React General Tutorials
React Hooks
React and TypeScript
React Performance
React Internals
React Interview Questions
React Tools
React Development Tools
React Frameworks
- next.jsΒ β The React Framework
- gatsby.jsΒ β Free and open source framework based on React
- react-adminΒ β Frontend Framework for building B2B applications on top of REST/GraphQL APIs
React Styling
- styled-componentsΒ β Visual primitives for the component age
- emotionΒ β Library designed for writing CSS styles with JavaScript
- radiumΒ β A toolchain for React component styling
- jssΒ β Authoring tool for CSS
React Routing
- react-routerΒ β Declarative routing for React
- naviΒ β Declarative, asynchronous routing for React
- curiΒ β JavaScript router for single-page applications
React Component Libraries
- material-uiΒ β React components for faster and easier web development
- ant-designΒ β A design system with values of Nature and Determinacy
- blueprintΒ β A React-based UI toolkit for the webs
- office-ui-fabric-reactΒ β React components for building Microsoft web experiences
- react-bootstrapΒ β Bootstrap components built with React
- reactstrapΒ β Simple React Bootstrap 4 components
- semantic-ui-reactΒ β The official Semantic-UI-React integration
- react-fontawesomeΒ β Font Awesome 5 component library for React
- reakitΒ β Accessible, Composable and Customizable components for React
- rsuiteΒ β A suite of React components
- atlaskitΒ β Atlassianβs official UI library, built according to the Atlassian Design Guidelines.
- basewebΒ β Base Web is a foundation for initiating, evolving, and unifying web products.
- primereactΒ β A complete UI Framework for React with 50+ components featuring material, bootstrap and custom themes.
React Awesome Components
React for Command Line
- inkΒ β React for interactive command-line apps
- react-blessedΒ β A React renderer for blessed terminal interface library
React Testing
React Libraries
React Integration
React State Management
React AR and VR
- React 360Β β Create exciting 360 and VR experiences using React
- Viro ReactΒ β Platform for rapidly building AR/VR applications using React Native
Forms
Autocomplete
Graphics
Data Managing
Maps
Charts
React Native
Framework for building native apps using React
React Native General Resources
React Native Tutorials
React Native Development Tools
React Native Sample Apps
React Native Boilerplates
React Native Awesome Components
Redux
Predictable State Container for JavaScript Apps
Redux General Resources
Redux Tools
Redux Tutorials
MobX
Simple, scalable state management for JavaScript Apps
MobX General Resources
MobX Tools
MobX Tutorials
GraphQL
Query Language
GraphQL Spec
GraphQL Tools
GraphQL Tutorials
GraphQL Implementations
Server Integration
Database Integration
Relay
Data-Driven React Applications
Relay General Resources
Relay Tutorials
Relay Tools
Apollo
Data stack based on GraphQL
Apollo General Resources
Apollo Tools
Videos
reactjsvideos.com
Important Talks
React.js Conf 2015 Playlist
ReactEurope Conf 2015 Day 1 Playlist
ReactEurope Conf 2015 Day 2 Playlist
ReactRally Conf 2015 Playlist
React.js Conf 2016 Playlist
React Amsterdam 2016 Playlist
ReactEurope Conf 2016 Day 1 Playlist
ReactEurope Conf 2016 Day 2 Playlist
ReactRally Conf 2016 Playlist
React.js Amsterdam 2018 Playlist
Video Tutorials
Demo React Apps
Real React Apps
- kibanaΒ β Your window into the Elastic Stack
- firefox debuggerΒ β The Firefox debugger that works anywhere
- spectrumΒ β Simple, powerful online communities
- mattermostΒ β Open source Slack alternative
- overreactedΒ β Personal blog by Dan Abramov
- winamp2-jsΒ β Winamp 2 reimplemented for the browser
Β
ΠΠ°Π·ΠΎΠ²ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ | React Redux
Π§ΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ React Redux Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅, ΠΌΡ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΎΠ·Π΄Π°Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎ ΡΠΏΠΈΡΠΊΠΎΠΌ Π·Π°Π΄Π°Ρ.
ΠΡΠΈΠΌΠ΅Ρ ΡΠΏΠΈΡΠΊΠ° Todo #
ΠΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° React
ΠΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π»ΠΈ Π½Π°ΡΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° React ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
-
TodoApp
— ΡΡΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π²Ρ ΠΎΠ΄Π° Π΄Π»Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡAddTodo
,TodoList
ΠΈVisibilityFilters
. -
AddTodo
— ΡΡΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²Π²ΠΎΠ΄ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π·Π°Π΄Π°ΡΠΈ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π΅Π³ΠΎ Π² ΡΠΏΠΈΡΠΎΠΊ ΠΏΠΎΡΠ»Π΅ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠΠΎΠ±Π°Π²ΠΈΡΡ Π·Π°Π΄Π°ΡΡΒ»:- ΠΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΡΠΉ Π²Π²ΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π½Π°
onChange
. - ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΡ Β«ΠΠΎΠ±Π°Π²ΠΈΡΡ Π·Π°Π΄Π°ΡΡΒ», ΠΎΠ½ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ (ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ React Redux) Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π·Π°Π΄Π°ΡΠΈ Π² ΠΌΠ°Π³Π°Π·ΠΈΠ½.
- ΠΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΡΠΉ Π²Π²ΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π½Π°
-
TodoList
— ΡΡΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠΏΠΈΡΠΎΠΊ Π·Π°Π΄Π°Ρ:- ΠΠ½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΎΡΡΠΈΠ»ΡΡΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ Π·Π°Π΄Π°Ρ, ΠΊΠΎΠ³Π΄Π° Π²ΡΠ±ΡΠ°Π½ ΠΎΠ΄ΠΈΠ½ ΠΈΠ·
VisibilityFilters
.
- ΠΠ½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΎΡΡΠΈΠ»ΡΡΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ Π·Π°Π΄Π°Ρ, ΠΊΠΎΠ³Π΄Π° Π²ΡΠ±ΡΠ°Π½ ΠΎΠ΄ΠΈΠ½ ΠΈΠ·
-
Todo
— ΡΡΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΎΠ΄ΠΈΠ½ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π·Π°Π΄Π°ΡΠΈ:- ΠΠ½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π·Π°Π΄Π°ΡΠΈ ΠΈ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π·Π°Π΄Π°ΡΠ° Π·Π°Π²Π΅ΡΡΠ΅Π½Π°, Π²ΡΡΠ΅ΡΠΊΠΈΠ²Π°Ρ Π΅Π³ΠΎ.
- ΠΠ½ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ ΡΡΠ°ΡΡΡΠ° Π·Π°Π΄Π°ΡΠΈ ΠΏΡΠΈ
onClick
.
-
VisibilityFilters
ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΏΡΠΎΡΡΠΎΠΉ Π½Π°Π±ΠΎΡ ΡΠΈΠ»ΡΡΡΠΎΠ²: Π²ΡΠ΅ , Π·Π°Π²Π΅ΡΡΠ΅Π½Ρ, ΠΈ Π½Π΅ Π·Π°Π²Π΅ΡΡΠ΅Π½Ρ. Π©Π΅Π»ΡΠΎΠΊ ΠΏΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΠΈΠ· Π½ΠΈΡ ΡΠΈΠ»ΡΡΡΡΠ΅Ρ Π·Π°Π΄Π°ΡΠΈ:- ΠΠ½ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
activeFilter
ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊΠΎΠΉ ΡΠΈΠ»ΡΡΡ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π²ΡΠ±ΡΠ°Π½ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ.ΠΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠΈΠ»ΡΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Ρ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ. - ΠΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅
setFilter
Π΄Π»Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠΈΠ»ΡΡΡΠ°.
- ΠΠ½ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
-
ΠΊΠΎΠ½ΡΡΠ°Π½ΡΡ
ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ Π΄Π°Π½Π½ΡΠ΅ ΠΊΠΎΠ½ΡΡΠ°Π½Ρ Π΄Π»Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. - Π, Π½Π°ΠΊΠΎΠ½Π΅Ρ, ΠΈΠ½Π΄Π΅ΠΊΡ
The Redux Store
Π§Π°ΡΡΡ Redux ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π±ΡΠ»Π° Π½Π°ΡΡΡΠΎΠ΅Π½Π° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ², ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π½Π½ΡΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Redux:
- Store
-
todos
: Π½ΠΎΡΠΌΠ°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ΅Π΄ΡΠΊΡΠΎΡ Π·Π°Π΄Π°Ρ.ΠΠ½ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΊΠ°ΡΡΡbyIds
Π²ΡΠ΅Ρ Π·Π°Π΄Π°Ρ ΠΈallIds
, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠΏΠΈΡΠΎΠΊ Π²ΡΠ΅Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠ². -
visibilityFilters
: ΠΏΡΠΎΡΡΠ°Ρ ΡΡΡΠΎΠΊΠ°Π²ΡΠ΅
,Π·Π°Π²Π΅ΡΡΠ΅Π½Π½ΡΠ΅
ΠΈΠ»ΠΈΠ½Π΅ΠΏΠΎΠ»Π½ΡΠ΅
.
-
- Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ
-
addTodo
ΡΠΎΠ·Π΄Π°Π΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π·Π°Π΄Π°Ρ. ΠΠ½ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΠΎΠ΄Π½Ρ ΡΡΡΠΎΠΊΠΎΠ²ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡcontent
ΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ADD_TODO
Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ Π½Π°Π³ΡΡΠ·ΠΊΠΎΠΉ , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π΅ ΡΠ°ΠΌΠΎΠΈΠ½ΠΊΡΠ΅ΠΌΠ΅Π½ΡΠΈΡΡΡΡΠΈΠΉΡΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡid
ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ -
toggleTodo
ΡΠΎΠ·Π΄Π°Π΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π·Π°Π΄Π°Ρ.ΠΠ½ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΠΎΠ΄Π½Ρ ΡΠΈΡΠ»ΠΎΠ²ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡid
ΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅TOGGLE_TODO
Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ Π½Π°Π³ΡΡΠ·ΠΊΠΎΠΉid
ΡΠΎΠ»ΡΠΊΠΎ -
setFilter
ΡΠΎΠ·Π΄Π°Π΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠΈΠ»ΡΡΡΠ° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ½ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΠΎΠ΄Π½ΠΎΡΡΡΠΎΠΊΠΎΠ²ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡfilter
ΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅SET_FILTER
Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ Π½Π°Π³ΡΡΠ·ΠΊΠΎΠΉ
-
- Π Π΅Π΄ΡΠΊΡΠΎΡΡ
- Π Π΅Π΄ΡΠΊΡΠΎΡ
todos
- ΠΠΎΠ±Π°Π²Π»ΡΠ΅Ρ
id
ΠΊ ΡΠ²ΠΎΠΈΠΌallIds
ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π°Π΄Π°ΡΡ Π² ΡΠ²ΠΎΠ΅ΠΌ ΠΏΠΎΠ»Π΅byIds
ΠΏΠΎΡΠ»Π΅ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡADD_TODO
- ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅Ρ ΠΏΠΎΠ»Π΅
Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΎ
Π΄Π»Ρ Π·Π°Π΄Π°ΡΠΈ ΠΏΠΎΡΠ»Π΅ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡTOGGLE_TODO
- ΠΠΎΠ±Π°Π²Π»ΡΠ΅Ρ
- Π Π΅Π΄ΡΠΊΡΠΎΡ
visibilityFilters
ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ²ΠΎΡ ΡΠ°ΡΡΡ ΠΌΠ°Π³Π°Π·ΠΈΠ½Π° Π² Π½ΠΎΠ²ΡΠΉ ΡΠΈΠ»ΡΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ½ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΠΎΡ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ Π½Π°Π³ΡΡΠ·ΠΊΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡSET_FILTER
- Π Π΅Π΄ΡΠΊΡΠΎΡ
- Π’ΠΈΠΏΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ
- ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠ°ΠΉΠ»
actionTypes.js
Π΄Π»Ρ Ρ ΡΠ°Π½Π΅Π½ΠΈΡ ΠΊΠΎΠ½ΡΡΠ°Π½Ρ ΡΠΈΠΏΠΎΠ² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Π΄Π»Ρ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ
- ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠ°ΠΉΠ»
- Selectors
-
getTodoList
Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΡΠΏΠΈΡΠΎΠΊallIds
ΠΈΠ·todos
store -
getTodoById
Π½Π°Ρ ΠΎΠ΄ΠΈΡ Π·Π°Π΄Π°ΡΡ Π² ΠΌΠ°Π³Π°Π·ΠΈΠ½Π΅, Π·Π°Π΄Π°Π½Π½ΠΎΠΌ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌid
-
getTodos
Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ»ΠΎΠΆΠ½Π΅Π΅. ΠΠ½ Π±Π΅ΡΠ΅Ρ Π²ΡΠ΅id
s ΠΈΠ·allIds
, Π½Π°Ρ ΠΎΠ΄ΠΈΡ ΠΊΠ°ΠΆΠ΄ΡΡ Π·Π°Π΄Π°ΡΡ Π²byIds
ΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΌΠ°ΡΡΠΈΠ² Π·Π°Π΄Π°Ρ -
getTodosByVisibilityFilter
ΡΠΈΠ»ΡΡΡΡΠ΅Ρ Π·Π°Π΄Π°ΡΠΈ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠΈΠ»ΡΡΡΠΎΠΌ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ
-
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΡΠΎΡ CodeSandbox Π΄Π»Ρ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΈ Π½Π΅ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½Π½ΠΎΠ³ΠΎ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ° Redux, ΠΎΠΏΠΈΡΠ°Π½Π½ΠΎΠ³ΠΎ Π²ΡΡΠ΅.
Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΡΡΠΎΡ ΠΌΠ°Π³Π°Π·ΠΈΠ½ ΠΊ Π½Π°ΡΠ΅ΠΌΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ React Redux.
ΠΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΌΠ°Π³Π°Π·ΠΈΠ½Π° #
Π‘Π½Π°ΡΠ°Π»Π° Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΌΠ°Π³Π°Π·ΠΈΠ½
Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌ Π΄Π»Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΡ ΠΎΠ±Π΅ΡΡΡΠ²Π°Π΅ΠΌ Π½Π°ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ API
, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌΠΎΠ³ΠΎ React Redux.
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
import React from ‘react’
import ReactDOM from ‘react-dom’
import TodoApp from ‘./TodoApp’
import {Provider} from ‘react-redux’
import store from ‘./ redux / store ‘
const rootElement = document.getElementById (‘ root ‘)
ReactDOM.render (
,
rootElement
)
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ Π½Π°Ρ
ΡΠ΅ΠΏΠ΅ΡΡ ΠΎΠ±Π΅ΡΠ½ΡΡ
Ρ store
, ΠΏΠ΅ΡΠ΅Π΄Π°Π½Π½ΡΠΌ ΠΊΠ°ΠΊ ΠΎΠΏΠΎΡΠ°.
ΠΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² #
React Redux ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΡΠ½ΠΊΡΠΈΡ connect
Π΄Π»Ρ ΡΡΠ΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΈΠ· Ρ
ΡΠ°Π½ΠΈΠ»ΠΈΡΠ° Redux (ΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΡΡΠ΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ Ρ
ΡΠ°Π½ΠΈΠ»ΠΈΡΠ°).
Π€ΡΠ½ΠΊΡΠΈΡ connect
ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π΄Π²Π° Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠ°, ΠΎΠ±Π° Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠ΅:
mapStateToProps
: Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π· ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ°. ΠΠ½ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ Π²ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ° ΠΈ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡ Π΄Π°Π½Π½ΡΡ , ΠΊΠΎΡΠΎΡΡΠΉ Π½ΡΠΆΠ΅Π½ ΡΡΠΎΠΌΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ.mapDispatchToProps
: ΡΡΠΎΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ ΠΈΠ»ΠΈ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠΌ.- ΠΡΠ»ΠΈ ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΡ, ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ Π²ΡΠ·ΡΠ²Π°ΡΡΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π· ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°. ΠΠ½ ΠΏΠΎΠ»ΡΡΠΈΡ
dispatch
Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠ° ΠΈ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Π΅ΡΠ½ΡΡΡ ΠΎΠ±ΡΠ΅ΠΊΡ, ΠΏΠΎΠ»Π½ΡΠΉ ΡΡΠ½ΠΊΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡdispatch
Π΄Π»Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ. - ΠΡΠ»ΠΈ ΡΡΠΎ ΠΎΠ±ΡΠ΅ΠΊΡ, ΠΏΠΎΠ»Π½ΡΠΉ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Π΅ΠΉ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Π±ΡΠ΄Π΅Ρ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ Π² ΡΡΠ½ΠΊΡΠΈΡ prop, ΠΊΠΎΡΠΎΡΠ°Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ²ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΏΡΠΈ Π²ΡΠ·ΠΎΠ²Π΅. ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅ : ΠΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡ Β«ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΡΡΒ» ΡΠΎΡΠΌΡ.
- ΠΡΠ»ΠΈ ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΡ, ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ Π²ΡΠ·ΡΠ²Π°ΡΡΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π· ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°. ΠΠ½ ΠΏΠΎΠ»ΡΡΠΈΡ
ΠΠ±ΡΡΠ½ΠΎ Π²Ρ Π²ΡΠ·ΡΠ²Π°Π΅ΡΠ΅ connect
ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
Copy
const mapStateToProps = (state, ownProps) => ({
})
const mapDispatchToProps = {
}
const connectToStoSto = connect (
mapStateToProps,
mapDispatchToProps
)
const ConnectedComponent = connectToStore (Component)
connect (
mapStateToProps,
mapDispatchToProps,
MapDispatch) ΠΏΠ΅ΡΠ²ΡΠΉ.ΠΠΌΡ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΠ½ΠΈΡΠΈΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² store
, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½ΠΎΠ²ΡΠ΅ Π·Π°Π΄Π°ΡΠΈ. Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡ
Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Π² ΠΌΠ°Π³Π°Π·ΠΈΠ½. ΠΠΎΡ ΠΊΠ°ΠΊ ΠΌΡ ΡΡΠΎ Π΄Π΅Π»Π°Π΅ΠΌ.
ΠΠ°Ρ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ addTodo
Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ:
Π‘ΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅
import {ADD_TODO} ΠΈΠ· ‘./actionTypes’
let nextTodoId = 0
export const addTodo = content => ({
type: ADD_TODO2, payload: {
id: ++ nextTodoId,
content
}
})
ΠΠ΅ΡΠ΅Π΄Π°Π²Π°Ρ Π΅Π³ΠΎ Π² connect
, Π½Π°Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ Π΅Π³ΠΎ ΠΊΠ°ΠΊ ΠΎΠΏΠΎΡΡ, ΠΈ ΠΎΠ½ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΏΡΠΈ Π΅Π³ΠΎ Π²ΡΠ·ΠΎΠ²Π΅.
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
import {connect} ΠΈΠ· ‘react-redux’
import {addTodo} from ‘../redux/actions’
class AddTodo extends React.Component {
}
export default connect (
null,
{addTodo}
) (AddTodo)
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ
Π·Π°ΠΊΠ»ΡΡΠ΅Π½ Π² ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΡ Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠΌ Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ
. ΠΠ΅ΠΆΠ΄Ρ ΡΠ΅ΠΌ,
ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΠΎΠ΄Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ: Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ addTodo
.
ΠΠ°ΠΌ ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ handleAddTodo
, ΡΡΠΎΠ±Ρ ΠΎΠ½Π° ΠΌΠΎΠ³Π»Π° ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ addTodo
ΠΈ ΡΠ±ΡΠ°ΡΡΠ²Π°ΡΡ Π²Π²ΠΎΠ΄
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
import React from ‘react’
import {connect} from ‘react-redux’
import {addTodo} from ‘../redux/actions’
class AddTodo extends React.Component {
handleAddTodo = () => {
this.props.addTodo (this.state.input)
this.setState ({input: »})
}
render () {
return (
onChange = {e => this.updateInput (e.target.value)}
value = {this.state.input}
/>
ΠΠΎΠ±Π°Π²ΠΈΡΡ Todo
< / button>
)
}
}
ΡΠΊΡΠΏΠΎΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ connect (
null,
{addTodo}
) (AddTodo)
Π’Π΅ΠΏΠ΅ΡΡ Π½Π°Ρ
ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ ΠΊ ΠΌΠ°Π³Π°Π·ΠΈΠ½Ρ.ΠΠΎΠ³Π΄Π° ΠΌΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π·Π°Π΄Π°ΡΡ, ΠΎΠ½Π° ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΏΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°. ΠΡ Π½Π΅ Π²ΠΈΠ΄ΠΈΠΌ ΡΡΠΎΠ³ΠΎ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π΅ΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½Ρ. ΠΡΠ»ΠΈ Ρ Π²Π°Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΎ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ Redux DevTools, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅:
ΠΡ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ ΠΌΠ°Π³Π°Π·ΠΈΠ½ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ
ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ ΡΠΏΠΈΡΠΎΠΊ Π·Π°Π΄Π°Ρ. Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π΅ΠΌΡ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΈΡΠ°ΡΡ Π΄Π°Π½Π½ΡΠ΅ ΠΈΠ· ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°.ΠΡ Π²ΠΊΠ»ΡΡΠ°Π΅ΠΌ Π΅Π³ΠΎ, Π²ΡΠ·ΡΠ²Π°Ρ connect
Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠΌ mapStateToProps
, ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ, ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΠ΅ΠΉ, ΠΊΠ°ΠΊΠ°Ρ ΡΠ°ΡΡΡ Π΄Π°Π½Π½ΡΡ
Π½Π°ΠΌ Π½ΡΠΆΠ½Π° ΠΈΠ· ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°.
ΠΠ°Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ
ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π·Π°Π΄Π°ΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ²ΠΎΠΉΡΡΠ². Π£ Π½Π°Ρ Π΅ΡΡΡ ΡΡΠ° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΈΠ· ΠΏΠΎΠ»Ρ byIds
ΠΈΠ· todos
. ΠΠ΄Π½Π°ΠΊΠΎ Π½Π°ΠΌ ΡΠ°ΠΊΠΆΠ΅ Π½ΡΠΆΠ½Π° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΈΠ· ΠΏΠΎΠ»Ρ allIds
ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠ°Ρ, ΠΊΠ°ΠΊΠΈΠ΅ Π·Π°Π΄Π°ΡΠΈ ΠΈ Π² ΠΊΠ°ΠΊΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ. ΠΠ°ΡΠ° ΡΡΠ½ΠΊΡΠΈΡ mapStateToProps
ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
import {connect} ΠΈΠ· «react-redux»;
const TodoList =
const mapStateToProps = state => {
const {byIds, allIds} = ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅.todos || {};
const todos =
allIds && allIds.length
? allIds.map (id => (byIds? {… byIds [id], id}: null))
: null;
Π²ΠΎΠ·Π²ΡΠ°Ρ {todos};
};
ΡΠΊΡΠΏΠΎΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ (mapStateToProps) (TodoList);
Π ΡΡΠ°ΡΡΡΡ, Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π΄Π΅Π»Π°Π΅Ρ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡΠΎ. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π·Π΄Π΅ΡΡ.
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
export const getTodosState = store => store.todos
export const getTodoList = store =>
getTodosState (store)? getTodosState (ΠΌΠ°Π³Π°Π·ΠΈΠ½).allIds: []
ΡΠΊΡΠΏΠΎΡΡ const getTodoById = (store, id) =>
getTodosState (store)? {… getTodosState (store) .byIds [id], id}: {}
export const getTodos = store =>
getTodoList (store) .map (id => getTodoById (store, id))
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ· «react-redux»;
ΠΈΠΌΠΏΠΎΡΡ {getTodos} ΠΈΠ· «../redux/selectors»;
const TodoList =
ΡΠΊΡΠΏΠΎΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ connect (state => ({todos: getTodos (state)})) (TodoList);
ΠΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ ΠΈΠ½ΠΊΠ°ΠΏΡΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ Π»ΡΠ±ΡΠ΅ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΠ΅ Π·Π°ΠΏΡΠΎΡΡ ΠΈΠ»ΠΈ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΡ Π΄Π°Π½Π½ΡΡ Π² ΡΡΠ½ΠΊΡΠΈΡΡ Π²ΡΠ±ΠΎΡΠ°.ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Reselect Π΄Π»Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ Β«ΠΌΠ΅ΠΌΠΎΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Β» ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΠΏΡΠΎΠΏΡΡΠΊΠ°ΡΡ Π½Π΅Π½ΡΠΆΠ½ΡΡ ΡΠ°Π±ΠΎΡΡ. (Π‘ΠΌ. Π‘ΡΡΠ°Π½ΠΈΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Redux ΠΏΠΎ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄Π½ΡΡ Π΄Π°Π½Π½ΡΡ ΠΈ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ Π² Π±Π»ΠΎΠ³Π΅ Idiomatic Redux: ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ±ΠΎΡΠ° ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² Π΄Π»Ρ ΠΈΠ½ΠΊΠ°ΠΏΡΡΠ»ΡΡΠΈΠΈ ΠΈ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎ ΡΠΎΠΌ, ΠΏΠΎΡΠ΅ΠΌΡ ΠΈ ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°.)
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Π½Π°Ρ
ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ Π² ΠΌΠ°Π³Π°Π·ΠΈΠ½. ΠΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠΏΠΈΡΠΎΠΊ Π·Π°Π΄Π°Ρ, ΡΠΎΠΏΠΎΡΡΠ°Π²ΠΈΡΡ ΠΈΡ
ΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΡ Π·Π°Π΄Π°ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ
.
, Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ, ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡ ΠΈΡ
Π½Π° ΡΠΊΡΠ°Π½Π΅. Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π·Π°Π΄Π°ΡΡ. ΠΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΡΠ²ΠΈΡΡΡΡ Π² Π½Π°ΡΠ΅ΠΌ ΡΠΏΠΈΡΠΊΠ΅ Π΄Π΅Π»!
ΠΠΎΠ΄ΠΊΠ»ΡΡΠΈΠΌ Π΅ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ. ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΌΡ ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π΅ΠΌ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΠΏΠ°ΡΠ·Ρ ΠΈ ΡΠ½Π°ΡΠ°Π»Π° ΡΠ·Π½Π°Π΅ΠΌ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ connect
.
ΠΠ±ΡΠΈΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ Π²ΡΠ·ΠΎΠ²Π° connect
#
Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, Ρ ΠΊΠ°ΠΊΠΈΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ Π²Ρ ΡΠ°Π±ΠΎΡΠ°Π΅ΡΠ΅, ΡΡΡΠ΅ΡΡΠ²ΡΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ Π²ΡΠ·ΠΎΠ²Π° connect
, Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠ΅ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ
ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Ρ Π½ΠΈΠΆΠ΅:
ΠΠ΅ ΠΠΎΠ΄ΠΏΠΈΡΠΊΠ° Π½Π° ΠΠ°Π³Π°Π·ΠΈΠ½ | ΠΠΎΠ΄ΠΏΠΈΡΠΊΠ° Π½Π° ΠΠ°Π³Π°Π·ΠΈΠ½ | |
---|---|---|
ΠΠ΅ Π²Π²ΠΎΠ΄ΠΈΡΡ Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ | connect () (ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ) | connect (mapStateToProps) (ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ) |
connect (null, mapDispatchToProps) (Component) | connect (mapStateToProps, mapDispatchToProps) (Component) |
ΠΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠ²Π°ΡΡΡΡ Π½Π° ΠΌΠ°Π³Π°Π·ΠΈΠ½ ΠΈ Π½Π΅ Π²Π²ΠΎΠ΄ΠΈΡΡ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Π΅ΠΉ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ #
Π±Π΅Π· ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠΎΠ², Π²Π°Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π±ΡΠ΄Π΅Ρ:
- Π½Π΅ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ° es
- ΠΏΠΎΠ»ΡΡΠΈΡ
ΡΠ΅ΠΊΠ²ΠΈΠ·ΠΈΡΠ°.ΠΎΡΠΏΡΠ°Π²ΠΊΠ°
, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π²ΡΡΡΠ½ΡΡ
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
export default connect () (ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ)
ΠΠΎΠ΄ΠΏΠΈΡΠΈΡΠ΅ΡΡ Π½Π° ΠΌΠ°Π³Π°Π·ΠΈΠ½ ΠΈ Π½Π΅ Π²Π²ΠΎΠ΄ΠΈΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Π΅ΠΉ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ #
ΠΡΠ»ΠΈ Π²Ρ Π²ΡΠ·ΡΠ²Π°Π΅ΡΠ΅ connect
ΡΠΎΠ»ΡΠΊΠΎ Ρ mapStateToProps
, Π²Π°Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π±ΡΠ΄Π΅Ρ:
- ΠΏΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅
mapStateToProps
ΠΈΠ·Π²Π»Π΅ΠΊΠ°Π΅Ρ ΠΈΠ· Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ°, ΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΈΡΡ. - ΠΏΠΎΠ»ΡΡΠΈΡ
props.dispatch
, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π²ΡΡΡΠ½ΡΡ
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
const mapStateToProps = ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ => ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅.partOfState
export default connect (mapStateToProps) (Component)
ΠΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠ²Π°ΠΉΡΠ΅ΡΡ Π½Π° Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ ΠΈ Π²Π²ΠΎΠ΄ΠΈΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Π΅ΠΉ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ #
ΠΡΠ»ΠΈ Π²Ρ Π²ΡΠ·ΡΠ²Π°Π΅ΡΠ΅ connect
ΡΠΎΠ»ΡΠΊΠΎ Ρ mapDispatchToProps
, Π²Π°Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π±ΡΠ΄Π΅Ρ:
- not re -render ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ°
- ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Π΅ΠΉ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Π²Π²ΠΎΠ΄ΠΈΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ
mapDispatchToProps
Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ²ΠΎΠΉΡΡΠ², ΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΏΡΠΈ Π²ΡΠ·ΠΎΠ²Π΅
Copy
import {addTodo} from ‘./ actionCreators ‘
export default connect (
null,
{addTodo}
) (ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ)
ΠΠΎΠ΄ΠΏΠΈΡΠΈΡΠ΅ΡΡ Π½Π° ΠΌΠ°Π³Π°Π·ΠΈΠ½ ΠΈ ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π΄Π»Ρ ΠΈΠ½ΡΠ΅ΠΊΡΠΈΠΉ #
ΠΡΠ»ΠΈ Π²Ρ Π²ΡΠ·ΡΠ²Π°Π΅ΡΠ΅ , ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΠ΅ΡΡ ΠΊ
Ρ ΠΏΠΎΠΌΠΎΡΡΡ mapStateToProps
ΠΈ mapDispatchToProps
, Π²Π°Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π±ΡΠ΄Π΅Ρ:
- ΠΏΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅
mapStateToProps
ΠΈΠ·Π²Π»Π΅ΠΊΠ°Π΅Ρ ΠΈΠ· Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ°, ΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΈΡΡ. - ΠΏΠΎΠ»ΡΡΠΈΡ Π²ΡΠ΅Ρ
ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Π΅ΠΉ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Π²Π²ΠΎΠ΄ΠΈΡΠ΅ Ρ
mapDispatchToProps
Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ²ΠΎΠΉΡΡΠ² ΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΏΡΠΈ Π²ΡΠ·ΠΎΠ²Π΅.
Π‘ΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅
import * ΠΊΠ°ΠΊ actionCreators ΠΈΠ· ‘./actionCreators’
const mapStateToProps = state => state.partOfState
export default connect (
mapStateToProps,
actionCreators
) (
) ΠΡΠΈ ΡΠ΅ΡΡΡΠ΅ ΡΠ»ΡΡΠ°Ρ ΠΎΡ Π²Π°ΡΡΠ²Π°ΡΡ
ΡΠ°ΠΌΡΠ΅ ΠΏΡΠΎΡΡΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡ
. Π§ΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ connect
, ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡΠ΅ ΡΠΈΡΠ°ΡΡ Π½Π°Ρ ΡΠ°Π·Π΄Π΅Π» API, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ ΡΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ.
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΠΌ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΡΠ°ΡΡΡ Π½Π°ΡΠ΅Π³ΠΎ
.
ΠΠ°ΠΊ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π·Π°Π΄Π°Ρ? Π£ ΡΠ²Π»Π΅ΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠΈΡΠ°ΡΠ΅Π»Ρ ΡΠΆΠ΅ Π΅ΡΡΡ ΠΎΡΠ²Π΅Ρ. ΠΡΠ»ΠΈ Π²Π°ΡΠ° ΡΡΠ΅Π΄Π° Π½Π°ΡΡΡΠΎΠ΅Π½Π° ΠΈ Π²Ρ Π²ΡΠΏΠΎΠ»Π½ΠΈΠ»ΠΈ Π²ΡΠ΅ Π΄ΠΎ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½ΡΠ°, ΡΠ΅ΠΉΡΠ°Ρ Ρ
ΠΎΡΠΎΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΡΠΎ Π² ΡΡΠΎΡΠΎΠ½Π΅ ΠΈ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ. ΠΠ΅ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΡΡΠΎ ΠΌΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ Π½Π°Ρ
ΠΊ ΠΎΡΠΏΡΠ°Π²ΠΊΠ΅ toggleTodo
Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
Π‘ΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅
import {connect} ΠΈΠ· «react-redux»;
ΠΈΠΌΠΏΠΎΡΡ {toggleTodo} ΠΈΠ· «../redux/actions «;
const Todo =
ΡΠΊΡΠΏΠΎΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ connect (
null,
{toggleTodo}
) (Todo);
Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΡΠΈ Π·Π°Π΄Π°ΡΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠΈΡΡ. ΠΡ ΠΏΠΎΡΡΠΈ Π³ΠΎΡΠΎΠ²Ρ!
ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅ΠΌ Π½Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ VisibilityFilters
.
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ
Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΈΡΠ°ΡΡ ΠΈΠ· Ρ
ΡΠ°Π½ΠΈΠ»ΠΈΡΠ°, ΠΊΠ°ΠΊΠΎΠΉ ΡΠΈΠ»ΡΡΡ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π°ΠΊΡΠΈΠ²Π΅Π½, ΠΈ ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π² Ρ
ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅.Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΠΊΠ°ΠΊ mapStateToProps
, ΡΠ°ΠΊ ΠΈ mapDispatchToProps
. mapStateToProps
Π·Π΄Π΅ΡΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΡΠΎΡΡΡΠΌ ΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ Π΄ΠΎΡΡΡΠΏΠ° ΠΊ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ visibilityFilter
. Π mapDispatchToProps
Π±ΡΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ setFilter
.
Π‘ΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅
import {connect} ΠΈΠ· «react-redux»;
ΠΈΠΌΠΏΠΎΡΡ {setFilter} ΠΈΠ· «../redux/actions»;
const VisibilityFilters =
const mapStateToProps = state => {
return {activeFilter: state.visibilityFilter};
};
ΡΠΊΡΠΏΠΎΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ (
mapStateToProps,
{setFilter}
) (VisibilityFilters);
ΠΠ΅ΠΆΠ΄Ρ ΡΠ΅ΠΌ, Π½Π°ΠΌ ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ Π½Π°Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ
Π΄Π»Ρ ΡΠΈΠ»ΡΡΡΠ°ΡΠΈΠΈ Π·Π°Π΄Π°Ρ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π°ΠΊΡΠΈΠ²Π½ΡΠΌ ΡΠΈΠ»ΡΡΡΠΎΠΌ. Π Π°Π½Π΅Π΅ mapStateToProps
, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π²Π°Π»ΠΈ Π² Π²ΡΠ·ΠΎΠ² ΡΡΠ½ΠΊΡΠΈΠΈ
connect
, Π±ΡΠ» ΠΏΡΠΎΡΡΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠ±ΠΈΡΠ°Π΅Ρ Π²Π΅ΡΡ ΡΠΏΠΈΡΠΎΠΊ Π·Π°Π΄Π°Ρ.ΠΠ°Π²Π°ΠΉΡΠ΅ Π½Π°ΠΏΠΈΡΠ΅ΠΌ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΡΠΈΠ»ΡΡΡΠΎΠ²Π°ΡΡ Π·Π°Π΄Π°ΡΠΈ ΠΏΠΎ ΠΈΡ
ΡΡΠ°ΡΡΡΡ.
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
export const getTodosByVisibilityFilter = (store, visibilityFilter) => {
const allTodos = getTodos (store)
switch (visibilityFilter) {
case VISIBILITY_FILTERS.COMPLETED = 9000Todos to to allTodos to. Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΎ)
case VISIBILITY_FILTERS.INCOMPLETE:
return allTodos.filter (todo =>! todo.completed)
case VISIBILITY_FILTERS.ALL:
ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ:
Π²Π΅ΡΠ½ΡΡΡ allTodos
}
}
Π ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡΡΡ ΠΊ ΠΌΠ°Π³Π°Π·ΠΈΠ½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°:
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
const mapStateToProps = state => {
const {visibilityFilter} = state
const todos = getTodosByVisibilityFilter (state, visibilityFilter)
return {todos}
}
export default connect (mapStateToProps) (TodoList)
ΠΡΠ°ΠΊ, ΠΌΡ Π·Π°ΠΊΠΎΠ½ΡΠΈΠ»ΠΈ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ todo Ρ React Redux.ΠΡΠ΅ Π½Π°ΡΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΡΠ²ΡΠ·Π°Π½Ρ! Π Π°Π·Π²Π΅ ΡΡΠΎ Π½Π΅ Ρ ΠΎΡΠΎΡΠΎ? ππ
Π‘ΡΡΠ»ΠΊΠΈ #
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΠΏΠΎΠΌΠΎΡΡ #
ΠΡΠ½ΠΎΠ²Ρ Redux, Π§Π°ΡΡΡ 1: ΠΠ±Π·ΠΎΡ Redux
- Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Redux ΠΈ ΠΏΠΎΡΠ΅ΠΌΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ
- ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠ°ΡΡΠΈ, ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΡΠΎΡΡΠΎΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Redux
ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ #
ΠΠΎΠ±ΡΠΎ ΠΏΠΎΠΆΠ°Π»ΠΎΠ²Π°ΡΡ Π² ΡΡΠ΅Π±Π½ΠΈΠΊ ΠΏΠΎ ΠΎΡΠ½ΠΎΠ²Π°ΠΌ Redux! ΠΡΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ Π²Π°Ρ Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡΠΌΠΈ, ΠΏΡΠΈΠ½ΡΠΈΠΏΠ°ΠΌΠΈ ΠΈ ΡΠ°Π±Π»ΠΎΠ½Π°ΠΌΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Redux . Π ΡΠΎΠΌΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΠΊΠ°ΠΊ Π²Ρ Π·Π°ΠΊΠΎΠ½ΡΠΈΡΠ΅, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ ΡΠ°ΡΡΠΈ ΡΠΎΡΡΠ°Π²Π»ΡΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Redux, ΠΊΠ°ΠΊ ΠΏΠΎΡΠΎΠΊΠΈ Π΄Π°Π½Π½ΡΡ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Redux ΠΈ Π½Π°ΡΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Redux.
Π ΡΠ°ΡΡΠΈ 1 ΡΡΠΎΠ³ΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π° ΠΌΡ ΠΊΡΠ°ΡΠΊΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Redux, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ ΡΡΠΎ Π·Π° ΡΠ°ΡΡΠΈ, Π° Π² ΡΠ°ΡΡΠΈ 2: ΠΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ Redux ΠΈ ΠΏΠΎΡΠΎΠΊ Π΄Π°Π½Π½ΡΡ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΈ ΡΠ°ΡΡΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ. ΠΈ ΠΊΠ°ΠΊ Π΄Π°Π½Π½ΡΠ΅ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡΡΡ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Redux.
ΠΠ°ΡΠΈΠ½Π°Ρ Ρ ΡΠ°ΡΡΠΈ 3: Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΈ ΡΠ΅Π΄ΡΠΊΡΠΎΡΡ, ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈ Π·Π½Π°Π½ΠΈΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΠ΅Ρ, ΠΊΠ°ΠΊ ΡΡΠΈ ΡΠ°ΡΡΠΈ ΡΠΎΡΠ΅ΡΠ°ΡΡΡΡ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ, ΠΈ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Redux ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅. ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ Π·Π°Π²Π΅ΡΡΠΈΠΌ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Β«Π²ΡΡΡΠ½ΡΡΒ», ΡΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ ΡΠΎΡΠ½ΠΎ Π²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ, ΠΌΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ ΡΠ°Π±Π»ΠΎΠ½Π°Ρ ΠΈ Π°Π±ΡΡΡΠ°ΠΊΡΠΈΡΡ , ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Ρ Redux.ΠΠ°ΠΊΠΎΠ½Π΅Ρ, ΠΌΡ ΡΠ²ΠΈΠ΄ΠΈΠΌ, ΠΊΠ°ΠΊ ΡΡΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΡΡΠΎΠ²Π½Ρ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΡΡΡΡ Π² ΡΠ°Π±Π»ΠΎΠ½Ρ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ Π΄Π»Ρ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² ΡΠ΅Π°Π»ΡΠ½ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ .
ΠΠ°ΠΊ ΡΠΈΡΠ°ΡΡ ΡΡΠΎΡ ΡΡΠ΅Π±Π½ΠΈΠΊ #
Π ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅, Β«ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ReduxΒ» , Π° ΡΠ°ΠΊΠΆΠ΅ , ΠΏΠΎΡΠ΅ΠΌΡ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ ΡΡΠΈ ΡΠ°Π±Π»ΠΎΠ½Ρ . ΠΠ΄Π½Π°ΠΊΠΎ ΡΠΏΡΠ°Π²Π΅Π΄Π»ΠΈΠ²ΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ — ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΉ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ Π² ΡΠ΅Π°Π»ΡΠ½ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ .
ΠΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Π±ΡΠ΄Π΅Ρ ΠΌΠ΅Π½Π΅Π΅ Π»Π°ΠΊΠΎΠ½ΠΈΡΠ½ΡΠΌ, ΡΠ΅ΠΌ ΡΠΎ, ΠΊΠ°ΠΊ ΠΌΡ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΠΊΠΎΠ΄ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ , Π½ΠΎ Π·Π°ΠΏΠΈΡΠ°ΡΡ Π΅Π³ΠΎ ΠΎΡ ΡΡΠΊΠΈ — Π»ΡΡΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± Π½Π°ΡΡΠΈΡΡΡΡ.ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ ΠΏΠΎΠΉΠΌΠ΅ΡΠ΅, ΠΊΠ°ΠΊ Π²ΡΠ΅ ΡΠΎΡΠ΅ΡΠ°Π΅ΡΡΡ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ, ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Redux Toolkit, ΡΡΠΎΠ±Ρ ΡΠΏΡΠΎΡΡΠΈΡΡ ΡΠ°Π±ΠΎΡΡ. Redux Toolkit — ΡΡΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Ρ Redux , ΠΎΠ½ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° Π²ΡΠ΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡΡ , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π² ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅. ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ ΠΏΠΎΠΉΠΌΠ΅ΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ, ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠ΅ Π·Π΄Π΅ΡΡ, Π²Ρ ΠΏΠΎΠΉΠΌΠ΅ΡΠ΅, ΠΊΠ°ΠΊ Π±ΠΎΠ»Π΅Π΅ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Redux Toolkit.
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Redux ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΡΠ΅Π°Π»ΡΠ½ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΡΠΌ .:
ΠΡ ΠΏΠΎΡΡΠ°ΡΠ°Π»ΠΈΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΈ ΠΎΠ±ΡΡΡΠ½Π΅Π½ΠΈΡ ΡΠ΄ΠΎΠ±Π½ΡΠΌΠΈ Π΄Π»Ρ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ², Π½ΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ Π²Ρ ΠΌΡ ΡΠΆΠ΅ Π·Π½Π°Π΅ΠΌ, ΡΡΠΎΠ±Ρ ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ ΡΠΎΡΡΠ΅Π΄ΠΎΡΠΎΡΠΈΡΡΡΡ Π½Π° ΠΎΠ±ΡΡΡΠ½Π΅Π½ΠΈΠΈ ΡΠ°ΠΌΠΎΠ³ΠΎ Redux. Π ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ, ΡΡΠΎ Π²Ρ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ :
. ΠΡΠ»ΠΈ Π²Ρ Π΅ΡΠ΅ Π½Π΅ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ ΡΡΠΈΠΌΠΈ ΡΠ΅ΠΌΠ°ΠΌΠΈ, ΠΌΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ Π²Π°ΠΌ ΡΠ½Π°ΡΠ°Π»Π° ΠΎΡΠ²ΠΎΠΈΡΡ ΠΈΡ , Π° Π·Π°ΡΠ΅ΠΌ Π²Π΅ΡΠ½ΡΡΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ ΠΎ Redux . ΠΡ Π±ΡΠ΄Π΅ΠΌ Π·Π΄Π΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ Π³ΠΎΡΠΎΠ²Ρ!
ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π² Π²Π°ΡΠ΅ΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ React ΠΈ Redux DevTools:
- React DevTools Extension:
- Redux DevTools Extension:
What is Redux? #
ΠΡΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ ΡΡΠ° Π²Π΅ΡΡ «Redux» ΡΡΠΎΠΈΡ Π½Π° ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅.Π§ΡΠΎ ΠΎΠ½ΠΎ Π΄Π΅Π»Π°Π΅Ρ? ΠΠ°ΠΊΠΈΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΡΡΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΌΠ½Π΅ ΡΠ΅ΡΠ°ΡΡ? ΠΠ°ΡΠ΅ΠΌ ΠΌΠ½Π΅ ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ?
Redux — ΡΡΠΎ ΡΠ°Π±Π»ΠΎΠ½ ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ±ΡΡΠΈΠΉ, Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΡ Β«Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠΌΠΈΒ». ΠΠ½ ΡΠ»ΡΠΆΠΈΡ ΡΠ΅Π½ΡΡΠ°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠΌ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΠΎ Π²ΡΠ΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, Ρ ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌΠΈ, Π³Π°ΡΠ°Π½ΡΠΈΡΡΡΡΠΈΠΌΠΈ, ΡΡΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ΅Π΄ΡΠΊΠ°Π·ΡΠ΅ΠΌΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
ΠΠΎΡΠ΅ΠΌΡ Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Redux? #
Redux ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π²Π°ΠΌ ΡΠΏΡΠ°Π²Π»ΡΡΡ Β«Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΠΌΒ» ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ — ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ ΡΠ°ΡΡΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
Π¨Π°Π±Π»ΠΎΠ½Ρ ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌΡΠ΅ Redux, ΡΠΏΡΠΎΡΠ°ΡΡ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠΎΠ³Π΄Π°, Π³Π΄Π΅, ΠΏΠΎΡΠ΅ΠΌΡ ΠΈ ΠΊΠ°ΠΊ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π² Π²Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, ΠΈ ΠΊΠ°ΠΊ Π»ΠΎΠ³ΠΈΠΊΠ° Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ, ΠΊΠΎΠ³Π΄Π° ΡΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄ΡΡ . Redux Π½Π°ΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π²Π°Ρ ΠΊ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΠΏΡΠ΅Π΄ΡΠΊΠ°Π·ΡΠ΅ΠΌΠΎΠ³ΠΎ ΠΈ ΡΠ΅ΡΡΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°, ΡΡΠΎ Π΄Π°Π΅Ρ Π²Π°ΠΌ ΡΠ²Π΅ΡΠ΅Π½Π½ΠΎΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π²Π°ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
ΠΠΎΠ³Π΄Π° ΠΌΠ½Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Redux? #
Redux ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΡΠΏΡΠ°Π²ΠΈΡΡΡΡ Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΎΠ±ΡΠΈΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ, Π½ΠΎ, ΠΊΠ°ΠΊ ΠΈ Π»ΡΠ±ΠΎΠΉ Π΄ΡΡΠ³ΠΎΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ, Ρ Π½Π΅Π³ΠΎ Π΅ΡΡΡ ΠΊΠΎΠΌΠΏΡΠΎΠΌΠΈΡΡΡ.ΠΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½ΡΠΆΠ½ΠΎ ΠΈΠ·ΡΡΠΈΡΡ, ΠΈ Π±ΠΎΠ»ΡΡΠ΅ ΠΊΠΎΠ΄Π°, ΠΊΠΎΡΠΎΡΡΠΉ Π½ΡΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°ΡΡ. ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΊΠΎΡΠ²Π΅Π½Π½ΠΎΡΡΡ Π² Π²Π°Ρ ΠΊΠΎΠ΄ ΠΈ ΠΏΡΠΎΡΠΈΡ Π²Π°Ρ ΡΠΎΠ±Π»ΡΠ΄Π°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ. ΠΡΠΎ ΠΊΠΎΠΌΠΏΡΠΎΠΌΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΡΠ°ΡΠΊΠΎΡΡΠΎΡΠ½ΠΎΠΉ ΠΈ Π΄ΠΎΠ»Π³ΠΎΡΡΠΎΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡΡ.
Redux Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»Π΅Π·Π΅Π½, ΠΊΠΎΠ³Π΄Π°:
- Π£ Π²Π°Ρ Π΅ΡΡΡ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ ΠΌΠ΅ΡΡΠ°Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ
- Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ°ΡΡΠΎ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΡΡΡ Ρ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ
- ΠΠΎΠ³ΠΈΠΊΠ° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ»ΠΎΠΆΠ½ΠΎΠΉ
- ΠΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΊΠΎΠ΄ΠΎΠ²ΡΡ Π±Π°Π·Ρ ΡΡΠ΅Π΄Π½Π΅Π³ΠΎ ΠΈΠ»ΠΈ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΠΈ Π½Π°Π΄ Π½ΠΈΠΌ ΠΌΠΎΠ³ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π»ΡΠ΄ΠΈ
ΠΠ΅ Π²ΡΠ΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΠΌ Π½ΡΠΆΠ΅Π½ Redux.ΠΠ°ΠΉΠ΄ΠΈΡΠ΅ Π²ΡΠ΅ΠΌΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ΄ΡΠΌΠ°ΡΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅, ΠΈ ΡΠ΅ΡΠΈΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠΌΠΎΠ³ΡΡ ΡΠ΅ΡΠΈΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, Π½Π°Π΄ ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π²Ρ ΡΠ°Π±ΠΎΡΠ°Π΅ΡΠ΅.
ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ ΡΠ²Π΅ΡΠ΅Π½Ρ, ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π»ΠΈ Redux Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΡΡΠΈ ΡΠ΅ΡΡΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ:
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Redux #
Redux — ΡΡΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ Π°Π²ΡΠΎΠ½ΠΎΠΌΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JS. ΠΠ΄Π½Π°ΠΊΠΎ ΠΎΠ½ ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΏΠ°ΠΊΠ΅ΡΠ°ΠΌΠΈ:
React-Redux #
Redux ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Ρ Π»ΡΠ±ΠΎΠΉ ΡΡΡΡΠΊΡΡΡΠΎΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΈ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Ρ React. React-Redux — Π½Π°Ρ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΠΏΠ°ΠΊΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΡΠΈΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌ React Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ΠΌ Redux, ΡΡΠΈΡΡΠ²Π°Ρ ΡΠ°ΡΡΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΈ ΠΎΡΠΏΡΠ°Π²Π»ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π΄Π»Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ°.
Redux Toolkit #
Redux Toolkit — ΡΡΠΎ Π½Π°Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ Π΄Π»Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ Π»ΠΎΠ³ΠΈΠΊΠΈ Redux. ΠΠ½ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΏΠ°ΠΊΠ΅ΡΡ ΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅, ΠΏΠΎ Π½Π°ΡΠ΅ΠΌΡ ΠΌΠ½Π΅Π½ΠΈΡ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Redux. Redux Toolkit ΡΡΡΠΎΠΈΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌΡΡ Π½Π°ΠΌΠΈ Π»ΡΡΡΠΈΡ ΠΏΡΠ°ΠΊΡΠΈΠΊ, ΡΠΏΡΠΎΡΠ°Π΅Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π·Π°Π΄Π°Ρ Redux, ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Π΅Ρ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ ΠΈ ΡΠΏΡΠΎΡΠ°Π΅Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Redux.
Redux DevTools Extension #
Redux DevTools Extension ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΈΡΡΠΎΡΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π² Π²Π°ΡΠ΅ΠΌ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ Redux Ρ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΎΡΠ»Π°ΠΆΠΈΠ²Π°ΡΡ Π²Π°ΡΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΌΠΎΡΠ½ΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ², ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ Β«ΠΎΡΠ»Π°Π΄ΠΊΠ° Π²ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈΒ».
ΠΡΠ½ΠΎΠ²Ρ Redux #
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π·Π½Π°Π΅ΡΠ΅, ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Redux, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΊΡΠ°ΡΠΊΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ, ΠΈΠ· ΠΊΠ°ΠΊΠΈΡ ΡΠ°ΡΡΠ΅ΠΉ ΡΠΎΡΡΠΎΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Redux ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
ΠΡΡΠ°Π»ΡΠ½Π°Ρ ΡΠ°ΡΡΡ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ Π½Π° ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΠΎΡΠ²ΡΡΠ΅Π½Π° ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅ Redux (ΠΏΠ°ΠΊΠ΅Ρ redux
).ΠΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ Π΄ΡΡΠ³ΠΈΡ
ΠΏΠ°ΠΊΠ΅ΡΠ°Ρ
, ΡΠ²ΡΠ·Π°Π½Π½ΡΡ
Ρ Redux, Π² ΠΎΡΡΠ°Π²ΡΠ΅ΠΉΡΡ ΡΠ°ΡΡΠΈ ΡΡΠ΅Π±Π½ΠΈΠΊΠ°.
ΠΠ°Π³Π°Π·ΠΈΠ½ Redux #
Π¦Π΅Π½ΡΡΠΎΠΌ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Redux ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΌΠ°Π³Π°Π·ΠΈΠ½ . Β«Π₯ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅Β» — ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Ρ ΡΠ°Π½ΠΈΡΡΡ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ .
Π₯ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ — ΡΡΠΎ ΠΎΠ±ΡΠ΅ΠΊΡ JavaScript Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠ»ΠΈΡΠ°ΡΡ Π΅Π³ΠΎ ΠΎΡ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ°:
- ΠΡ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π½Π°ΠΏΡΡΠΌΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Ρ ΡΠ°Π½ΠΈΡΡΡ Π²Π½ΡΡΡΠΈ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ° Redux.
- ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ, Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π²ΡΠ·Π²Π°ΡΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ — ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΎΡΡΠΎΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ action , ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ Β«ΡΡΠΎ-ΡΠΎ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈΒ», Π° Π·Π°ΡΠ΅ΠΌ ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π² ΠΌΠ°Π³Π°Π·ΠΈΠ½, ΡΡΠΎΠ±Ρ ΡΠΎΠΎΠ±ΡΠΈΡΡ Π΅ΠΌΡ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ.
- ΠΠΎΠ³Π΄Π° Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΎΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ, Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΠ½ΠΊΡΠΈΡ root reducer ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΅ΠΉ Π²ΡΡΠΈΡΠ»ΡΡΡ Π½ΠΎΠ²ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΡΠ°ΡΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ
- ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ ΡΠ²Π΅Π΄ΠΎΠΌΠ»ΡΠ΅Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΈΠΊΠΎΠ² , ΡΡΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π±ΡΠ»ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΎ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ Π½ΠΎΠ²ΡΠΌΠΈ Π΄Π°Π½Π½ΡΠΌΠΈ.
Redux Core Example App #
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Redux-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ — Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅-ΡΡΠ΅ΡΡΠΈΠΊ:
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Redux ΡΠ²Π»ΡΠ΅ΡΡΡ Π°Π²ΡΠΎΠ½ΠΎΠΌΠ½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ JS Π±Π΅Π· Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠ΅ΠΉ, ΡΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ Π½Π°ΠΏΠΈΡΠ°Π½ ΠΏΡΡΠ΅ΠΌ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΊΡΠΈΠΏΡΠ° Π΄Π»Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Redux ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π±Π°Π·ΠΎΠ²ΡΠΉ JS ΠΈ HTML Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°.ΠΠ° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ Redux ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΡΡΠ΅ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ² Redux ΠΈΠ· NPM, Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ°ΠΊΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ, ΠΊΠ°ΠΊ React.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ ΡΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ Π½Π° ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΠ°ΡΡΠΈ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ.
Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΈ ΡΠ΅Π΄ΡΠΊΡΠΎΡΡ #
ΠΠ°ΡΠ½Π΅ΠΌ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π΄Π»Ρ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ:
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
const initialState = {
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅
: 0
}
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΌΡ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΡΡ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°ΡΡ ΠΎΠ΄Π½ΠΎ ΡΠΈΡΠ»ΠΎ Ρ ΡΠ΅ΠΊΡΡΠΈΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ Π½Π°ΡΠ΅Π³ΠΎ ΡΡΠ΅ΡΡΠΈΠΊΠ°.
ΠΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Redux ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΠΌΠ΅ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡ JS Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ Π²Π½ΡΡΡΠΈ ΡΡΠΎΠ³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ°.
ΠΠ°ΡΠ΅ΠΌ ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΡΠ½ΠΊΡΠΈΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ° . Π Π΅Π΄ΡΠΊΡΠΎΡ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ Π΄Π²Π° Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠ°: ΡΠ΅ΠΊΡΡΠ΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅
ΠΈ
Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅
ΠΎΠ±ΡΠ΅ΠΊΡ, ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΠΈΠΉ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ΅Π΄ΡΠ΅Π΅. ΠΠΎΠ³Π΄Π° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Redux Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ, Ρ Π½Π°Ρ Π΅ΡΠ΅ Π½Π΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ,
ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌ initialState
Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ°:
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
function counterReducer (state = initialState, action) {
switch (action.type) {
case ‘counter / incremented’:
return {… ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: state.value + 1}
case ‘counter / incremented’:
return {… ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ .value — 1}
ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ:
ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°
}
}
ΠΠ±ΡΠ΅ΠΊΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π²ΡΠ΅Π³Π΄Π° ΠΈΠΌΠ΅ΡΡ ΠΏΠΎΠ»Π΅ ΡΠΈΠΏΠ°
, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΡΡΠΎΠΊΡ, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΠ΅
Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈΠΌΡ Π΄Π»Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ. Π’ΠΈΠΏ
Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΠΈΡΠ°Π±Π΅Π»ΡΠ½ΡΠΌ ΠΈΠΌΠ΅Π½Π΅ΠΌ, ΡΡΠΎΠ±Ρ
Π»ΡΠ±ΠΎΠΉ, ΠΊΡΠΎ ΡΠΌΠΎΡΡΠΈΡ Π½Π° ΡΡΠΎΡ ΠΊΠΎΠ΄, ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ.Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ
ΡΠ»ΠΎΠ²ΠΎ Β«counterΒ» ΠΊΠ°ΠΊ ΠΏΠ΅ΡΠ²Π°Ρ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π° Π½Π°ΡΠ΅Π³ΠΎ ΡΠΈΠΏΠ° Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, Π° Π²ΡΠΎΡΠ°Ρ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π° — ΡΡΠΎ
ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ Β«ΡΠ»ΡΡΠΈΠ²ΡΠ΅Π³ΠΎΡΡΒ». Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π½Π°Ρ Β«ΡΡΠ΅ΡΡΠΈΠΊΒ» Π±ΡΠ» Β«ΡΠ²Π΅Π»ΠΈΡΠ΅Π½Β», ΠΏΠΎΡΡΠΎΠΌΡ
ΠΌΡ Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΠΌ ΡΠΈΠΏ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΊΠ°ΠΊ Β«ΡΡΠ΅ΡΡΠΈΠΊ / ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΠΌΡΠΉΒ»
.
Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΠΏΠ° Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π»ΠΈΠ±ΠΎ Π²Π΅ΡΠ½ΡΡΡ Π½ΠΎΠ²ΡΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ Π²
Π±ΡΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠΌ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
ΠΈΠ»ΠΈ Π²Π΅ΡΠ½ΡΡΡ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
, Π΅ΡΠ»ΠΈ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡΡ.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΌΡ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌΠΎ , ΠΊΠΎΠΏΠΈΡΡΡ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡ
ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ, Π° Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ Π½Π°ΠΏΡΡΠΌΡΡ.
Store #
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΡΠ½ΠΊΡΠΈΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ°, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡ store ,
Π²ΡΠ·ΠΎΠ² Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Redux createStore
API.
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
const store = Redux.createStore (counterReducer)
ΠΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΠΌ ΡΡΠ½ΠΊΡΠΈΡ reducer Π² createStore
, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΠ½ΠΊΡΠΈΡ reducer
Π΄Π»Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΈ Π΄Π»Ρ ΡΠ°ΡΡΠ΅ΡΠ° Π»ΡΠ±ΡΡ
Π±ΡΠ΄ΡΡΠΈΡ
ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ.
UI #
Π Π»ΡΠ±ΠΎΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠ΅ΠΊΡΡΠ΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π½Π° ΡΠΊΡΠ°Π½Π΅.ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ
ΡΡΠΎ-ΡΠΎ Π΄Π΅Π»Π°Π΅Ρ, ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ ΡΠ²ΠΎΠΈ Π΄Π°Π½Π½ΡΠ΅, Π° Π·Π°ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅ΡΠΈΡΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Ρ ΡΡΠΈΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ.
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
const valueEl = document.getElementById (‘value’)
function render () {
const state = store.getState ()
valueEl.innerHTML = state.value.toString ()
}
render ()
store.subscribe (render)
Π ΡΡΠΎΠΌ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°,
Ρ ΠΎΠ΄Π½ΠΈΠΌ
ΠΡΠ°ΠΊ, ΠΌΡ ΠΏΠΈΡΠ΅ΠΌ ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π·Π½Π°Π΅Ρ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΈΠ· Redux
store Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅ΡΠΎΠ΄Π° store.getState ()
, Π·Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ, ΡΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ Π΅Π³ΠΎ.
ΠΠ°Π³Π°Π·ΠΈΠ½ Redux ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ Π²ΡΠ·Π²Π°ΡΡ store.subscribe ()
ΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ·ΠΎΠ²Π° ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΈΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ Π²ΡΠ·ΡΠ²Π°ΡΡΡΡ
ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π· ΠΌΠ°Π³Π°Π·ΠΈΠ½ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΡΡΡ. ΠΡΠ°ΠΊ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ Π½Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ render
Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΈΠΊΠ° ΠΈ Π·Π½Π°ΡΡ, ΡΡΠΎ
ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΠΌΠ°Π³Π°Π·ΠΈΠ½ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΡΡΡ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Π΄ΠΎ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
Redux — ΡΡΠΎ Π°Π²ΡΠΎΠ½ΠΎΠΌΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°, ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π³Π΄Π΅ ΡΠ³ΠΎΠ΄Π½ΠΎ. ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Ρ Π»ΡΠ±ΡΠΌ ΡΠ»ΠΎΠ΅ΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°.
Dispatching Actions #
ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ Π½Π° Π²Π²ΠΎΠ΄ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΡΠΎΠ·Π΄Π°Π²Π°Ρ ΠΎΠ±ΡΠ΅ΠΊΡΡ action , ΠΊΠΎΡΠΎΡΡΠ΅
ΠΠΏΠΈΡΠΈΡΠ΅, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ, ΠΈ ΠΎΡΠΏΡΠ°Π²ΠΈΠ»ΠΈ ΠΈΡ
Π² ΠΌΠ°Π³Π°Π·ΠΈΠ½. ΠΠΎΠ³Π΄Π° ΠΌΡ Π²ΡΠ·ΡΠ²Π°Π΅ΠΌ store.dispatch (Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅)
,
ΠΌΠ°Π³Π°Π·ΠΈΠ½ Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΠ΅Π΄ΡΠΊΡΠΎΡ, Π²ΡΡΠΈΡΠ»ΡΠ΅Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΈ Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΈΠΊΠΎΠ²
Π΄Π»Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°.
ΠΠΎΠΏΠΈΡ
Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.getElementById (‘ΠΏΡΠΈΡΠ°ΡΠ΅Π½ΠΈΠ΅’). addEventListener (‘ΡΠ΅Π»ΡΠΎΠΊ’, ΡΡΠ½ΠΊΡΠΈΡ () {
store.dispatch ({type: ‘counter / incremented’})
})
document.getElementById (‘Π΄Π΅ΠΊΡΠ΅ΠΌΠ΅Π½Ρ’). addEventListener ( ‘ΡΠ΅Π»ΡΠΎΠΊ’, ΡΡΠ½ΠΊΡΠΈΡ () {
store.dispatch ({ΡΠΈΠΏ: ‘ΡΡΠ΅ΡΡΠΈΠΊ / ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅’})
})
Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ
.getElementById (‘incrementIfOdd’)
.addEventListener (‘ΡΠ΅Π»ΡΠΎΠΊ’, ΡΡΠ½ΠΊΡΠΈΡ () {
if (store.getState (). Value% 2! == 0) {
store.dispatch ({type: ‘counter / incremented’})
Redux Essentials, Π§Π°ΡΡΡ 1: ΠΠ±Π·ΠΎΡ ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ Redux
- Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Redux ΠΈ ΠΏΠΎΡΠ΅ΠΌΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ
- ΠΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ΅ΡΠΌΠΈΠ½Ρ ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ Redux
- ΠΠ°ΠΊ ΠΏΠΎΡΠΎΠΊΠΈ Π΄Π°Π½Π½ΡΡ ΡΠ΅ΡΠ΅Π· ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Redux
ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ #
ΠΠΎΠ±ΡΠΎ ΠΏΠΎΠΆΠ°Π»ΠΎΠ²Π°ΡΡ Π² ΡΡΠ΅Π±Π½ΠΎΠ΅ ΠΏΠΎΡΠΎΠ±ΠΈΠ΅ ΠΏΠΎ Redux Essentials! ΠΡΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ Π²Π°Ρ Ρ Redux ΠΈ Π½Π°ΡΡΠΈΡ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π½Π°ΡΠΈ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΠΈ Π»ΡΡΡΠΈΠ΅ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΈ .Π ΡΠΎΠΌΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π·Π°ΠΊΠΎΠ½ΡΠΈΡΠ΅, Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΠ°ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Redux, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΠΈ ΡΠ°Π±Π»ΠΎΠ½Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΡΠ·Π½Π°Π»ΠΈ Π·Π΄Π΅ΡΡ.
Π Π§Π°ΡΡΠΈ 1 ΡΡΠΎΠ³ΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π° ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ ΠΈ ΡΠ΅ΡΠΌΠΈΠ½Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π·Π½Π°ΡΡ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Redux, Π° Π² Π§Π°ΡΡΠΈ 2: Π‘ΡΡΡΠΊΡΡΡΠ° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Redux ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π±Π°Π·ΠΎΠ²ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ React + Redux, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΠΎΡΠ΅ΡΠ°ΡΡΡΡ ΡΠ°ΡΡΠΈ Π²ΡΠ΅ Π²ΠΌΠ΅ΡΡΠ΅.
ΠΠ°ΡΠΈΠ½Π°Ρ Ρ ΡΠ°ΡΡΠΈ 3: Β«ΠΠ°Π·ΠΎΠ²ΡΠΉ ΠΏΠΎΡΠΎΠΊ Π΄Π°Π½Π½ΡΡ ReduxΒ», ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈ Π·Π½Π°Π½ΠΈΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΊΠ°Π½Π°Π»ΠΎΠ² ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΠ΅ΠΉ Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΡΠ΅Π°Π»ΡΠ½ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ, ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΡΡΠΈ ΡΠ°ΡΡΠΈ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅, ΠΈ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π²Π°ΠΆΠ½ΡΡ ΡΠ°Π±Π»ΠΎΠ½Π°Ρ ΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡΡ . Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Redux.
ΠΠ°ΠΊ ΡΠΈΡΠ°ΡΡ ΡΡΠΎΡ ΡΡΠ΅Π±Π½ΠΈΠΊ #
ΠΡΠ° ΡΡΡΠ°Π½ΠΈΡΠ° Π±ΡΠ΄Π΅Ρ ΠΏΠΎΡΠ²ΡΡΠ΅Π½Π° ΡΠΎΠΌΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π²Π°ΠΌ, , ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Redux, ΠΈ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΉ, ΡΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Redux.
ΠΡ ΠΏΠΎΡΡΠ°ΡΠ°Π»ΠΈΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΈ ΠΎΠ±ΡΡΡΠ½Π΅Π½ΠΈΡ ΡΠ΄ΠΎΠ±Π½ΡΠΌΠΈ Π΄Π»Ρ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ², Π½ΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ Π²Ρ ΡΠΆΠ΅ Π·Π½Π°Π΅ΡΠ΅:
ΠΡΠ»ΠΈ Π²Ρ Π΅ΡΠ΅ Π½Π΅ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ ΡΡΠΈΠΌΠΈ ΡΠ΅ΠΌΠ°ΠΌΠΈ, ΠΌΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ Π²Π°ΠΌ ΠΏΠΎΡΡΠ°ΡΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠ΅ΠΌΡ Π½Π° ΡΠΎ, ΡΡΠΎΠ±Ρ ΡΠ½Π°ΡΠ°Π»Π° ΠΎΡΠ²ΠΎΠΈΡΠ΅ΡΡ Ρ Π½ΠΈΠΌΠΈ, Π° Π·Π°ΡΠ΅ΠΌ Π²Π΅ΡΠ½ΠΈΡΠ΅ΡΡ, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ ΠΎ Redux .ΠΡ Π±ΡΠ΄Π΅ΠΌ Π·Π΄Π΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ Π³ΠΎΡΠΎΠ²Ρ!
Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Π² Π²Π°ΡΠ΅ΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ React ΠΈ Redux DevTools:
- React DevTools Extension:
- Redux DevTools Extension:
What is Redux? #
ΠΡΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ ΡΡΠΎ » Redux «ΡΡΠΎΠΈΡ Π½Π° ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅. Π§ΡΠΎ ΠΎΠ½ΠΎ Π΄Π΅Π»Π°Π΅Ρ? ΠΠ°ΠΊΠΈΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΡΡΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΌΠ½Π΅ ΡΠ΅ΡΠ°ΡΡ? ΠΠ°ΡΠ΅ΠΌ ΠΌΠ½Π΅ ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ?
Redux — ΡΡΠΎ ΡΠ°Π±Π»ΠΎΠ½ ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ±ΡΡΠΈΠΉ, Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΡ Β«Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠΌΠΈΒ». ΠΠ½ ΡΠ»ΡΠΆΠΈΡ ΡΠ΅Π½ΡΡΠ°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠΌ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΠΎ Π²ΡΠ΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, Ρ ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌΠΈ, Π³Π°ΡΠ°Π½ΡΠΈΡΡΡΡΠΈΠΌΠΈ, ΡΡΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ΅Π΄ΡΠΊΠ°Π·ΡΠ΅ΠΌΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
ΠΠΎΡΠ΅ΠΌΡ Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Redux? #
Redux ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π²Π°ΠΌ ΡΠΏΡΠ°Π²Π»ΡΡΡ Β«Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΠΌΒ» ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ — ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ ΡΠ°ΡΡΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
Π¨Π°Π±Π»ΠΎΠ½Ρ ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌΡΠ΅ Redux, ΡΠΏΡΠΎΡΠ°ΡΡ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠΎΠ³Π΄Π°, Π³Π΄Π΅, ΠΏΠΎΡΠ΅ΠΌΡ ΠΈ ΠΊΠ°ΠΊ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π² Π²Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, ΠΈ ΠΊΠ°ΠΊ Π»ΠΎΠ³ΠΈΠΊΠ° Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ, ΠΊΠΎΠ³Π΄Π° ΡΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄ΡΡ .Redux Π½Π°ΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π²Π°Ρ ΠΊ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΠΏΡΠ΅Π΄ΡΠΊΠ°Π·ΡΠ΅ΠΌΠΎΠ³ΠΎ ΠΈ ΡΠ΅ΡΡΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°, ΡΡΠΎ Π΄Π°Π΅Ρ Π²Π°ΠΌ ΡΠ²Π΅ΡΠ΅Π½Π½ΠΎΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π²Π°ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
ΠΠΎΠ³Π΄Π° ΠΌΠ½Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Redux? #
Redux ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΡΠΏΡΠ°Π²ΠΈΡΡΡΡ Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΎΠ±ΡΠΈΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ, Π½ΠΎ, ΠΊΠ°ΠΊ ΠΈ Π»ΡΠ±ΠΎΠΉ Π΄ΡΡΠ³ΠΎΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ, Ρ Π½Π΅Π³ΠΎ Π΅ΡΡΡ ΠΊΠΎΠΌΠΏΡΠΎΠΌΠΈΡΡΡ. ΠΡΠΆΠ½ΠΎ ΠΈΠ·ΡΡΠΈΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΉ ΠΈ Π½Π°ΠΏΠΈΡΠ°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΊΠΎΠ΄Π°. ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΊΠΎΡΠ²Π΅Π½Π½ΠΎΡΡΡ Π² Π²Π°Ρ ΠΊΠΎΠ΄ ΠΈ ΠΏΡΠΎΡΠΈΡ Π²Π°Ρ ΡΠΎΠ±Π»ΡΠ΄Π°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ. ΠΡΠΎ ΠΊΠΎΠΌΠΏΡΠΎΠΌΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΡΠ°ΡΠΊΠΎΡΡΠΎΡΠ½ΠΎΠΉ ΠΈ Π΄ΠΎΠ»Π³ΠΎΡΡΠΎΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡΡ.
Redux Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»Π΅Π·Π΅Π½, ΠΊΠΎΠ³Π΄Π°:
- Π£ Π²Π°Ρ Π΅ΡΡΡ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ ΠΌΠ΅ΡΡΠ°Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ
- Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ°ΡΡΠΎ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΡΡΡ Ρ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ
- ΠΠΎΠ³ΠΈΠΊΠ° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ»ΠΎΠΆΠ½ΠΎΠΉ
- ΠΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΊΠΎΠ΄ΠΎΠ²ΡΡ Π±Π°Π·Ρ ΡΡΠ΅Π΄Π½Π΅Π³ΠΎ ΠΈΠ»ΠΈ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΠΈ Π½Π°Π΄ Π½ΠΈΠΌ ΠΌΠΎΠ³ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π»ΡΠ΄ΠΈ
ΠΠ΅ Π²ΡΠ΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΠΌ Π½ΡΠΆΠ΅Π½ Redux.ΠΠ°ΠΉΠ΄ΠΈΡΠ΅ Π²ΡΠ΅ΠΌΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ΄ΡΠΌΠ°ΡΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅, ΠΈ ΡΠ΅ΡΠΈΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠΌΠΎΠ³ΡΡ ΡΠ΅ΡΠΈΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, Π½Π°Π΄ ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π²Ρ ΡΠ°Π±ΠΎΡΠ°Π΅ΡΠ΅.
ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ ΡΠ²Π΅ΡΠ΅Π½Ρ, ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π»ΠΈ Redux Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΡΡΠΈ ΡΠ΅ΡΡΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ:
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Redux #
Redux — ΡΡΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ Π°Π²ΡΠΎΠ½ΠΎΠΌΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JS. ΠΠ΄Π½Π°ΠΊΠΎ ΠΎΠ½ ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΏΠ°ΠΊΠ΅ΡΠ°ΠΌΠΈ:
React-Redux #
Redux ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Ρ Π»ΡΠ±ΠΎΠΉ ΡΡΡΡΠΊΡΡΡΠΎΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΈ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Ρ React. React-Redux — Π½Π°Ρ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΠΏΠ°ΠΊΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΡΠΈΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌ React Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ΠΌ Redux, ΡΡΠΈΡΡΠ²Π°Ρ ΡΠ°ΡΡΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΈ ΠΎΡΠΏΡΠ°Π²Π»ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π΄Π»Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ°.
Redux Toolkit #
Redux Toolkit — ΡΡΠΎ Π½Π°Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ Π΄Π»Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ Π»ΠΎΠ³ΠΈΠΊΠΈ Redux. ΠΠ½ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΏΠ°ΠΊΠ΅ΡΡ ΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅, ΠΏΠΎ Π½Π°ΡΠ΅ΠΌΡ ΠΌΠ½Π΅Π½ΠΈΡ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Redux. Redux Toolkit ΡΡΡΠΎΠΈΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌΡΡ Π½Π°ΠΌΠΈ Π»ΡΡΡΠΈΡ ΠΏΡΠ°ΠΊΡΠΈΠΊ, ΡΠΏΡΠΎΡΠ°Π΅Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π·Π°Π΄Π°Ρ Redux, ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Π΅Ρ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ ΠΈ ΡΠΏΡΠΎΡΠ°Π΅Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Redux.
Redux DevTools Extension #
Redux DevTools Extension ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΈΡΡΠΎΡΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π² Π²Π°ΡΠ΅ΠΌ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ Redux Ρ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΎΡΠ»Π°ΠΆΠΈΠ²Π°ΡΡ Π²Π°ΡΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΌΠΎΡΠ½ΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ², ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ Β«ΠΎΡΠ»Π°Π΄ΠΊΠ° Π²ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈΒ».
Π’Π΅ΡΠΌΠΈΠ½Ρ ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ Redux #
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΌΡ ΠΏΠΎΠ³ΡΡΠ·ΠΈΠΌΡΡ Π² ΡΠ΅Π°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ΄, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ΅ΡΠΌΠΈΠ½Π°Ρ ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡΡ , ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π·Π½Π°ΡΡ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Redux.
State Management #
ΠΠ°Π²Π°ΠΉΡΠ΅ Π½Π°ΡΠ½Π΅ΠΌ Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΡΡΠ΅ΡΡΠΈΠΊΠ° React.ΠΠ½ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π΅Ρ ΡΠΈΡΠ»ΠΎ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅Ρ ΡΠΈΡΠ»ΠΎ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ:
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
function Counter () {
const [counter, setCounter] = useState (0)
const increment = () => {
setCounter (prevCounter => prevCounter + 1)
}
return (
Value: {counter}
)
}
ΠΡΠΎ Π°Π²ΡΠΎΠ½ΠΎΠΌΠ½ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΠΈ ΡΠ°ΡΡΡΠΌΠΈ:
- Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅ , ΠΈΡΡΠΎΡΠ½ΠΈΠΊ ΠΈΡΡΠΈΠ½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π΄Π²ΠΈΠΆΠ΅Ρ Π½Π°ΡΠΈΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ;
- ΠΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ , Π΄Π΅ΠΊΠ»Π°ΡΠ°ΡΠΈΠ²Π½ΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
- ΠΠ΅ΠΉΡΡΠ²ΠΈΡ , ΡΠΎΠ±ΡΡΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΡΡ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π²Π²ΠΎΠ΄Π°, ΠΈ Π·Π°ΠΏΡΡΠΊΠ°ΡΡΠΈΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ
ΠΡΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Β«ΠΎΠ΄Π½ΠΎΡΡΠΎΡΠΎΠ½Π½Π΅Π³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π΄Π°Π½Π½ΡΡ Β» :
- Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ
- ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΡΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
- ΠΠΎΠ³Π΄Π° ΡΡΠΎ-ΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°), ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ.
- ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅ΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
ΠΠ΄Π½Π°ΠΊΠΎ ΠΏΡΠΎΡΡΠΎΡΠ° ΠΌΠΎΠΆΠ΅Ρ Π½Π°ΡΡΡΠΈΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° Ρ Π½Π°Ρ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ , ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π΅ΡΠ»ΠΈ ΡΡΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ Π² ΡΠ°Π·Π½ΡΡ ΡΠ°ΡΡΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.ΠΠ½ΠΎΠ³Π΄Π° ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅ΡΠΈΡΡ, Β«ΠΏΠΎΠ΄Π½ΡΠ² ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅Β» Π΄ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², Π½ΠΎ ΡΡΠΎ Π½Π΅ Π²ΡΠ΅Π³Π΄Π° ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ.
ΠΠ΄ΠΈΠ½ ΠΈΠ· ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠ΅ΡΠΈΡΡ ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ — ΠΈΠ·Π²Π»Π΅ΡΡ ΠΎΠ±ΡΠ΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΈΠ· ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π΅Π³ΠΎ Π² ΡΠ΅Π½ΡΡΠ°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ Π΄Π΅ΡΠ΅Π²Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ². ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΡΠΎΠΌΡ Π½Π°ΡΠ΅ Π΄Π΅ΡΠ΅Π²ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π±ΠΎΠ»ΡΡΠΈΠΌ Β«ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ΠΌΒ», ΠΈ Π»ΡΠ±ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΈΠ»ΠΈ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, Π³Π΄Π΅ ΠΎΠ½ΠΈ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² Π΄Π΅ΡΠ΅Π²Π΅!
ΠΠΏΡΠ΅Π΄Π΅Π»ΡΡ ΠΈ ΡΠ°Π·Π΄Π΅Π»ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ, ΡΡΠ°ΡΡΠ²ΡΡΡΠΈΠ΅ Π² ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡΠΌΠΈ ΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡΠΌΠΈ, ΠΌΡ ΠΏΡΠΈΠ΄Π°Π΅ΠΌ Π½Π°ΡΠ΅ΠΌΡ ΠΊΠΎΠ΄Ρ Π±ΠΎΠ»ΡΡΠ΅ ΡΡΡΡΠΊΡΡΡΡ ΠΈ ΡΠ΄ΠΎΠ±ΡΡΠ²Π° ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π΅Π½ΠΈΡ.
ΠΡΠΎ ΠΎΡΠ½ΠΎΠ²Π½Π°Ρ ΠΈΠ΄Π΅Ρ Redux: Π΅Π΄ΠΈΠ½ΠΎΠ΅ ΡΠ΅Π½ΡΡΠ°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ Ρ ΡΠ°Π½Π΅Π½ΠΈΡ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π² Π²Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ ΠΏΡΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ ΡΡΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠΎΠ΄ ΠΏΡΠ΅Π΄ΡΠΊΠ°Π·ΡΠ΅ΠΌΡΠΌ.
ΠΠ΅ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌΠΎΡΡΡ #
Β«ΠΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌΡΠΉΒ» ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Β«ΠΈΠ·ΠΌΠ΅Π½ΡΠΈΠ²ΡΠΉΒ». ΠΡΠ»ΠΈ ΡΡΠΎ-ΡΠΎ Β«Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½ΠΎΠ΅Β», ΡΡΠΎ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΎ.
ΠΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ ΠΈ ΠΌΠ°ΡΡΠΈΠ²Ρ JavaScript ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌΡ. ΠΡΠ»ΠΈ Ρ ΡΠΎΠ·Π΄Π°Ρ ΠΎΠ±ΡΠ΅ΠΊΡ, Ρ ΠΌΠΎΠ³Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π΅Π³ΠΎ ΠΏΠΎΠ»Π΅ΠΉ. ΠΡΠ»ΠΈ Ρ ΡΠΎΠ·Π΄Π°ΠΌ ΠΌΠ°ΡΡΠΈΠ², Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠ³Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅:
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
const obj = {a: 1, b: 2}
obj.b = 3
const arr = [‘a’, ‘b’]
arr.push (‘c’)
arr [1] = ‘d’
ΠΡΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΎΠ±ΡΠ΅ΠΊΡΠ° ΠΈΠ»ΠΈ ΠΌΠ°ΡΡΠΈΠ²Π°. ΠΡΠΎ ΡΠΎΡ ΠΆΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡ ΠΈΠ»ΠΈ ΡΡΡΠ»ΠΊΠ° Π½Π° ΠΌΠ°ΡΡΠΈΠ² Π² ΠΏΠ°ΠΌΡΡΠΈ, Π½ΠΎ ΡΠ΅ΠΏΠ΅ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡΡΡΠΈ ΠΎΠ±ΡΠ΅ΠΊΡΠ° ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΎΡΡ.
ΠΠ»Ρ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π²Π°Ρ ΠΊΠΎΠ΄ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠΎΠΏΠΈΠΉ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² / ΠΌΠ°ΡΡΠΈΠ²ΠΎΠ², Π° Π·Π°ΡΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΊΠΎΠΏΠΈΠΈ .
ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ Π²ΡΡΡΠ½ΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡΡ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΌΠ°ΡΡΠΈΠ²ΠΎΠ² / ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² Π² JavaScript, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΌΠ°ΡΡΠΈΠ²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡ Π½ΠΎΠ²ΡΠ΅ ΠΊΠΎΠΏΠΈΠΈ ΠΌΠ°ΡΡΠΈΠ²Π° Π²ΠΌΠ΅ΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΌΠ°ΡΡΠΈΠ²Π°:
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
const obj = {
a: {
c : 3
},
b: 2
}
const obj2 = {
…obj,
a: {
… obj.a,
c: 42
}
}
const arr = [‘a’, ‘b’]
const arr2 = arr. concat (‘c’)
const arr3 = arr.slice ()
arr3.push (‘c’)
Redux ΠΎΠΆΠΈΠ΄Π°Π΅Ρ, ΡΡΠΎ Π²ΡΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π±ΡΠ΄ΡΡ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ . ΠΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ, Π³Π΄Π΅ ΠΈ ΠΊΠ°ΠΊ ΡΡΠΎ Π²Π°ΠΆΠ½ΠΎ, Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΆΠ΅, Π° ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΡΡΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² Π½Π°ΠΏΠΈΡΠ°ΡΡ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½ΡΡ Π»ΠΎΠ³ΠΈΠΊΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ.
ΠΠ»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌΠΎΡΡΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² JavaScript, ΡΠΌ .:
Π’Π΅ΡΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΡ #
ΠΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΠΆΠ½ΡΠ΅ ΡΠ΅ΡΠΌΠΈΠ½Ρ Redux, Ρ ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΌΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ:
ΠΠ΅ΠΉΡΡΠ²ΠΈΡ #
ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅ — ΡΡΠΎ ΠΏΡΠΎΡΡΠΎΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ JavaScript, ΠΈΠΌΠ΅ΡΡΠΈΠΉ ΠΏΠΎΠ»Π΅ ΡΠΈΠΏΠ°
. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΡΠΌΠ°ΡΡ ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ ΠΊΠ°ΠΊ ΠΎ ΡΠΎΠ±ΡΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ ΡΡΠΎ-ΡΠΎ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ .
ΠΠΎΠ»Π΅ ΡΠΈΠΏΠ°
Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΡΡΠΎΠΊΠΎΠΉ, Π΄Π°ΡΡΠ΅ΠΉ ΡΡΠΎΠΌΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΎΠΏΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΈΠΌΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Β«todos / todoAddedΒ»
. ΠΠ±ΡΡΠ½ΠΎ ΠΌΡ ΠΏΠΈΡΠ΅ΠΌ ΡΡΡ ΡΡΡΠΎΠΊΡ ΡΠΈΠΏΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Β«domain / eventNameΒ»
, Π³Π΄Π΅ ΠΏΠ΅ΡΠ²Π°Ρ ΡΠ°ΡΡΡ — ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΡ ΠΈΠ»ΠΈ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡ, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΡΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅, Π° Π²ΡΠΎΡΠ°Ρ ΡΠ°ΡΡΡ — ΡΡΠΎ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ΅ ΡΠΎΠ±ΡΡΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ.
ΠΠ±ΡΠ΅ΠΊΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠΎΠ»Ρ Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ.ΠΠΎ ΡΠΎΠ³Π»Π°ΡΠ΅Π½ΠΈΡ ΠΌΡ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΠΌ ΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π² ΠΏΠΎΠ»Π΅ Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ payload
.
Π’ΠΈΠΏΠΈΡΠ½ΡΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
Copy
const addTodoAction = {
type: ‘todos / todoAdded’,
payload: ‘Buy milk’
}
Action Creators #
Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ — ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΠΎΠ±ΡΠ΅ΠΊΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ. ΠΠ±ΡΡΠ½ΠΎ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΈΡ , ΠΏΠΎΡΡΠΎΠΌΡ Π½Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π· ΠΏΠΈΡΠ°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π²ΡΡΡΠ½ΡΡ:
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
const addTodo = text => {
return {
type: ‘todos / todoAdded’,
payload: text
}
}
Π Π΅Π΄ΡΠΊΡΠΎΡΡ #
Π Π΅Π΄ΡΠΊΡΠΎΡ — ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΠ΅ΠΊΡΡΠ΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅
ΠΈ ΠΎΠ±ΡΠ΅ΠΊΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ
, ΡΠ΅ΡΠ°Π΅Ρ, ΠΊΠ°ΠΊ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π΅ΡΠ»ΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ, ΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ Π½ΠΎΠ²ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅: (ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ , Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅) => newState
. Π Π΅Π΄ΡΠΊΡΠΎΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΠΏΡΠΎΡΠ»ΡΡΠΈΠ²Π°ΡΠ΅Π»Ρ ΡΠΎΠ±ΡΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΡΠΎΠ±ΡΡΠΈΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΠΏΠ° ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΠΎΠ³ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ (ΡΠΎΠ±ΡΡΠΈΡ).
Π€ΡΠ½ΠΊΡΠΈΠΈ Β«ReducerΒ» ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈ ΡΠ²ΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΡ
ΠΎΠΆΠΈ Π½Π° ΡΡΠ½ΠΊΡΠΈΡ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ·ΠΎΠ²Π°, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ Array.reduce ()
.
Π Π΅Π΄ΡΠΊΡΠΎΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΡΠ΅Π³Π΄Π° ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌ ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌ:
- ΠΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΎΠ»ΡΠΊΠΎ Π²ΡΡΠΈΡΠ»ΡΡΡ Π½ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
Π°ΡΠ³ΡΠΌΠ΅Π½ΡΡ
- ΠΠΌ Π½Π΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅
- ΠΠ½ΠΈ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΡ Π»ΠΎΠ³ΠΈΠΊΡ, Π²ΡΡΠΈΡΠ»ΡΡΡ ΡΠ»ΡΡΠ°ΠΉΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ Π²ΡΠ·ΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Β«ΠΏΠΎΠ±ΠΎΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡΒ».
ΠΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ ΠΏΡΠ°Π²ΠΈΠ»Π°Ρ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠΎΠ² ΠΏΠΎΠ·ΠΆΠ΅, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ ΠΎ ΡΠΎΠΌ, ΠΏΠΎΡΠ΅ΠΌΡ ΠΎΠ½ΠΈ Π²Π°ΠΆΠ½Ρ ΠΈ ΠΊΠ°ΠΊ ΠΈΠΌ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ.
ΠΠΎΠ³ΠΈΠΊΠ° Π²Π½ΡΡΡΠΈ ΡΡΠ½ΠΊΡΠΈΠΉ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ° ΠΎΠ±ΡΡΠ½ΠΎ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠΎΠΉ ΠΆΠ΅ ΡΠ΅ΡΠΈΠΈ ΡΠ°Π³ΠΎΠ²:
- ΠΡΠΎΠ²Π΅ΡΠΈΡΡ, Π·Π°Π±ΠΎΡΠΈΡΡΡ Π»ΠΈ ΡΠ΅Π΄ΡΠΊΡΠΎΡ ΠΎΠ± ΡΡΠΎΠΌ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ
- ΠΡΠ»ΠΈ Π΄Π°, ΡΠ΄Π΅Π»Π°ΠΉΡΠ΅ ΠΊΠΎΠΏΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ, ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅ ΠΊΠΎΠΏΠΈΡ Π½ΠΎΠ²ΡΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ ΠΈ Π²Π΅ΡΠ½ΠΈΡΠ΅ Π΅Π΅
- Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²Π΅ΡΠ½ΡΡΡ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ
ΠΠΎΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ°, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ ΡΠ°Π³ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ΅Π΄ΡΠΊΡΠΎΡ:
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
const initialState = {value: 0}
function counterReducer (state = initialState , Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅) {
Π΅ΡΠ»ΠΈ (Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅.type === ‘counter / increment’) {
return {
… state,
value: state.value + 1
}
}
return state
}
Π Π΅Π΄ΡΠΊΡΠΎΡΡ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π»ΡΠ±ΡΠ΅ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄Π° Π»ΠΎΠ³ΠΈΠΊΠ° Π²Π½ΡΡΡΠΈ, ΡΡΠΎΠ±Ρ ΡΠ΅ΡΠΈΡΡ, ΠΊΠ°ΠΊΠΈΠΌ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π½ΠΎΠ²ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅: if / else
, switch
, ΡΠΈΠΊΠ»Ρ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅.
ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ΅ ΠΎΠ±ΡΡΡΠ½Π΅Π½ΠΈΠ΅: ΠΏΠΎΡΠ΅ΠΌΡ ΠΎΠ½ΠΈ Π½Π°Π·ΡΠ²Π°ΡΡΡΡ Β«ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ°ΠΌΠΈΒ»?
ΠΠ΅ΡΠΎΠ΄ Array.reduce ()
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ Π±ΡΠ°ΡΡ ΠΌΠ°ΡΡΠΈΠ² Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΌΠ°ΡΡΠΈΠ²Π΅ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ.ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΡΠΌΠ°ΡΡ ΠΎΠ± ΡΡΠΎΠΌ ΠΊΠ°ΠΊ ΠΎ Β«ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΠΌΠ°ΡΡΠΈΠ²Π° Π΄ΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡΒ».
Array.reduce ()
ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠ° ΡΡΠ½ΠΊΡΠΈΡ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ·ΠΎΠ²Π°, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ Π²ΡΠ·ΡΠ²Π°ΡΡΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π· Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΌΠ°ΡΡΠΈΠ²Π΅. ΠΠ½ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π΄Π²Π° Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠ°:
-
previousResult
, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Π°Ρ ΠΎΠ±ΡΠ°ΡΠ½ΡΠΉ Π²ΡΠ·ΠΎΠ² Π²ΠΎΠ·Π²ΡΠ°ΡΠΈΠ» Π² ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΠ°Π· -
currentItem
, ΡΠ΅ΠΊΡΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΌΠ°ΡΡΠΈΠ²Π΅
ΠΡΠΈ ΠΏΠ΅ΡΠ²ΠΎΠΌ Π·Π°ΠΏΡΡΠΊΠ΅ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ·ΠΎΠ²Π° Π½Π΅ Π±ΡΠ΄Π΅Ρ previousResult
Π΄ΠΎΡΡΡΠΏΠ½ΠΎ, ΠΏΠΎΡΡΠΎΠΌΡ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ previousResult
.
ΠΡΠ»ΠΈ Π±Ρ ΠΌΡ Ρ ΠΎΡΠ΅Π»ΠΈ ΡΠ»ΠΎΠΆΠΈΡΡ ΠΌΠ°ΡΡΠΈΠ² ΡΠΈΡΠ΅Π», ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊΠΎΠ²Π° ΠΎΠ±ΡΠ°Ρ ΡΡΠΌΠΌΠ°, ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΠΎΠ±ΡΠ°ΡΠ½ΡΠΉ Π²ΡΠ·ΠΎΠ² ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
const numbers = [2, 5, 8]
const addNumbers = ( previousResult, currentItem) => {
console.log ({previousResult, currentItem})
return previousResult + currentItem
}
const initialValue = 0
const total = numbers.reduce (addNumbers, initialValue)
.log (total)
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΡΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ Β«ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ·ΠΎΠ²Π°Β» addNumber
Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π½ΠΈΡΠ΅Π³ΠΎ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°ΡΡ. ΠΠ½ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΡ previousResult
ΠΈ currentItem
, ΡΡΠΎ-ΡΠΎ Π΄Π΅Π»Π°Π΅Ρ Ρ Π½ΠΈΠΌΠΈ ΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ Π½ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°.
Π€ΡΠ½ΠΊΡΠΈΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ° Redux — ΡΡΠΎ ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊΠ°Ρ ΠΆΠ΅ ΠΈΠ΄Π΅Ρ, ΡΡΠΎ ΠΈ ΡΡΠ½ΠΊΡΠΈΡ «ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ·ΠΎΠ²Π° ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ»! ΠΠ½ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Β«ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΒ» (ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ,
) ΠΈ Β«ΡΠ΅ΠΊΡΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΒ» (ΠΎΠ±ΡΠ΅ΠΊΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ), ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π½ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΡΠΈΡ
Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠΎΠ² ΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΡΡΠΎ Π½ΠΎΠ²ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅.
ΠΡΠ»ΠΈ Π±Ρ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΠ»ΠΈ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠ°ΡΡΠΈΠ² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Redux, Π²ΡΠ·Π²Π°ΡΡ reduce ()
ΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ°, ΠΌΡ Π±Ρ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈ ΠΊΠΎΠ½Π΅ΡΠ½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΡΠ°ΠΊΠΈΠΌ ΠΆΠ΅ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
const actions = [
{type: ‘counter / increment’},
{type: ‘counter / increment’},
{type: ‘counter / increment’}
]
const initialState = {value: 0}
const finalResult = Π΄Π΅ΠΉΡΡΠ²ΠΈΡ. reduce (counterReducer, initialState)
console.log (finalResult)
ΠΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ ΡΠ΅Π΄ΡΠΊΡΠΎΡΡ Redux ΡΠΎΠΊΡΠ°ΡΠ°ΡΡ Π½Π°Π±ΠΎΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ (Ρ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ) Π΄ΠΎ Π΅Π΄ΠΈΠ½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ .Π Π°Π·Π½ΠΈΡΠ° Π² ΡΠΎΠΌ, ΡΡΠΎ Ρ Array.reduce ()
ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ ΡΡΠ°Π·Ρ, Π° Ρ Redux — Π² ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅Π³ΠΎ ΡΡΠΎΠΊΠ° ΡΠ»ΡΠΆΠ±Ρ Π²Π°ΡΠ΅Π³ΠΎ Π·Π°ΠΏΡΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
Store #
Π’Π΅ΠΊΡΡΠ΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Redux Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΎΠ±ΡΠ΅ΠΊΡΠ΅, Π½Π°Π·ΡΠ²Π°Π΅ΠΌΠΎΠΌ store .
Π₯ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΠΏΡΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠΈ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ° ΠΈ ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ΅ΡΠΎΠ΄ getState
, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ:
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
import {configureStore} from ‘@ reduxjs / toolkit’
const store = configureStore ({reducer : counterReducer})
ΠΊΠΎΠ½ΡΠΎΠ»Ρ.log (store.getState ())
Dispatch #
Π Ρ
ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ Redux Π΅ΡΡΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ dispatch
. ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ — Π²ΡΠ·Π²Π°ΡΡ store.dispatch ()
ΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ . ΠΠ°Π³Π°Π·ΠΈΠ½ Π·Π°ΠΏΡΡΡΠΈΡ ΡΠ²ΠΎΡ ΡΡΠ½ΠΊΡΠΈΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ° ΠΈ ΡΠΎΡ
ΡΠ°Π½ΠΈΡ Π²Π½ΡΡΡΠΈ Π½ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ, ΠΈ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΡΠ·Π²Π°ΡΡ getState ()
Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
store.dispatch ({type: ‘counter / increment’})
console .log (store.getState ())
ΠΠΈΡΠΏΠ΅ΡΡΠ΅ΡΡΠΊΠΈΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΊΠ°ΠΊ Β«Π·Π°ΠΏΡΡΠΊ ΡΠΎΠ±ΡΡΠΈΡΒ» Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.Π§ΡΠΎ-ΡΠΎ ΡΠ»ΡΡΠΈΠ»ΠΎΡΡ, ΠΈ ΠΌΡ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠ± ΡΡΠΎΠΌ Π·Π½Π°Π» ΠΌΠ°Π³Π°Π·ΠΈΠ½. Π Π΅Π΄ΡΠΊΡΠΎΡΡ Π΄Π΅ΠΉΡΡΠ²ΡΡΡ ΠΊΠ°ΠΊ ΠΏΡΠΎΡΠ»ΡΡΠΈΠ²Π°ΡΠ΅Π»ΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ, ΠΈ ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΡΠ»ΡΡΠ°Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΡΡΠ΅Π΅ ΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅, ΠΎΠ½ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π² ΠΎΡΠ²Π΅Ρ.
ΠΠ±ΡΡΠ½ΠΎ ΠΌΡ Π²ΡΠ·ΡΠ²Π°Π΅ΠΌ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Π΅ΠΉ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Π΄Π»Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ:
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
const increment = () => {
return {
type: ‘counter / increment’
}
}
store.dispatch (increment ())
console.log (store.getState ())
Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ #
Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ — ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π½Π°ΡΡ, ΠΊΠ°ΠΊ ΠΈΠ·Π²Π»Π΅ΠΊΠ°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΈΠ· Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ°.ΠΠΎ ΠΌΠ΅ΡΠ΅ ΡΠΎΡΡΠ° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠΎΡΡ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΡ Π»ΠΎΠ³ΠΈΠΊΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠ°ΡΡΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΈΡΠ°ΡΡ ΠΎΠ΄Π½ΠΈ ΠΈ ΡΠ΅ ΠΆΠ΅ Π΄Π°Π½Π½ΡΠ΅:
ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ
const selectCounterValue = state => state.value
const currentValue = selectCounterValue (store.getState ())
console.log (currentValue)
Redux Application Data Flow #
Π Π°Π½Π΅Π΅ ΠΌΡ Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ ΠΎΠ± Β«ΠΎΠ΄Π½ΠΎΡΡΠΎΡΠΎΠ½Π½Π΅ΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ Π΄Π°Π½Π½ΡΡ Β», ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΡΠ°Π³ΠΎΠ² Π΄Π»Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ:
- State ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ
- ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΡΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
- ΠΠΎΠ³Π΄Π° ΡΡΠΎ-ΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΡ), ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ
- ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π½ΠΎΠ²ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅
Π ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, Π΄Π»Ρ Redux ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ°Π·Π±ΠΈΡΡ ΡΡΠΈ ΡΠ°Π³ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ:
- ΠΠ°ΡΠ°Π»ΡΠ½Π°Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°:
- Π₯ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ Redux ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ°
- Π₯ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ r educer ΠΎΠ΄ΠΈΠ½ ΡΠ°Π· ΠΈ ΡΠΎΡ
ΡΠ°Π½ΡΠ΅Ρ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
- ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΡΠ½Π°ΡΠ°Π»Π° Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅ΡΡΡ, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΏΠΎΠ»ΡΡΠ°ΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ ΡΠ΅ΠΊΡΡΠ΅ΠΌΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ° Redux ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΡΠΈ Π΄Π°Π½Π½ΡΠ΅, ΡΡΠΎΠ±Ρ ΡΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ.ΠΠ½ΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠ²Π°ΡΡΡΡ Π½Π° Π»ΡΠ±ΡΠ΅ Π±ΡΠ΄ΡΡΠΈΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°, ΡΡΠΎΠ±Ρ Π·Π½Π°ΡΡ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΎΡΡ Π»ΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅.
- ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ:
- Π§ΡΠΎ-ΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΡ
- ΠΠΎΠ΄ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π² Ρ
ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ Redux, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΡ
({type: 'counter / increment'})
- ΠΠ°Π³Π°Π·ΠΈΠ½ ΡΠ½ΠΎΠ²Π° Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΠ½ΠΊΡΠΈΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ° Ρ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ
- ΠΠ°Π³Π°Π·ΠΈΠ½ ΡΠ²Π΅Π΄ΠΎΠΌΠ»ΡΠ΅Ρ Π²ΡΠ΅ ΡΠ°ΡΡΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Π½Π° ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠ°, ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΌΠ°Π³Π°Π·ΠΈΠ½ Π±ΡΠ» ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΎ
- ΠΠ°ΠΆΠ΄ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π½ΡΠΆΠ½Ρ Π΄Π°Π½Π½ΡΠ΅ ΠΈΠ· Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ°, ΠΏΡΠΎΠ²Π΅ΡΡΠ΅Ρ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΈΡΡ Π»ΠΈ ΡΠ°ΡΡΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡ.
- ΠΠ°ΠΆΠ΄ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΠΈΠ΄ΠΈΡ, ΡΡΠΎ Π΅Π³ΠΎ Π΄Π°Π½Π½ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΈΡΡ, Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΠΏΠΎΠ²ΡΠΎΡΠ½ΡΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ Ρ Π½ΠΎΠ²ΡΠΌΠΈ Π΄Π°Π½Π½ΡΠΌΠΈ, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΠΌΠΎΠ³ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ ΡΠΎ, ΡΡΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅
ΠΠΎΡ ΠΊΠ°ΠΊ ΡΡΠΎΡ ΠΏΠΎΡΠΎΠΊ Π΄Π°Π½Π½ΡΡ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ:
What You ‘ ve Learned #
Π Redux Π΅ΡΡΡ ΡΡΠ΄ Π½ΠΎΠ²ΡΡ ΡΠ΅ΡΠΌΠΈΠ½ΠΎΠ² ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½ΡΠΆΠ½ΠΎ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡΡ. ΠΠ°ΠΏΠΎΠΌΠΈΠ½Π°Π΅ΠΌ, ΡΡΠΎ ΠΌΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ:
- Redux — ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ
- Redux ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ React-Redux Π΄Π»Ρ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΠΈ Redux ΠΈ React Π²ΠΌΠ΅ΡΡΠ΅
- Redux Toolkit — ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π΄Π»Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ Π»ΠΎΠ³ΠΈΠΊΠΈ Redux
- Redux ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΡΡΠΊΡΡΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Β«ΠΎΠ΄Π½ΠΎΡΡΠΎΡΠΎΠ½Π½ΠΈΠΉ ΠΏΠΎΡΠΎΠΊ Π΄Π°Π½Π½ΡΡ
Β»
- Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΡΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
- ΠΠΎΠ³Π΄Π° ΡΡΠΎ-ΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅:
- ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅
- Π ΠΌΠ°Π³Π°Π·ΠΈΠ½Π΅ Π·Π°ΠΏΡΡΠΊΠ°ΡΡΡΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡΡ, ΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ.
- ΠΠ°Π³Π°Π·ΠΈΠ½ ΡΠ²Π΅Π΄ΠΎΠΌΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΎΠ± ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
- ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π½ΠΎΠ²ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅
- Redux ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΈΠΏΠΎΠ² ΠΊΠΎΠ΄Π°
- ΠΠ΅ΠΉΡΡΠ²ΠΈΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ ΠΏΡΠΎΡΡΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ Ρ ΠΏΠΎΠ»Π΅ΠΌ
ΡΠΈΠΏΠ°
ΠΈ ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ «ΡΡΠΎ t ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ «Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ - Π Π΅Π΄ΡΠΊΡΠΎΡΡ — ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΡΠΈΡΠ»ΡΡΡ Π½ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ + Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅
- Π₯ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ Redux Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ΅Π΄ΡΠΊΡΠΎΡ Π²ΡΡΠΊΠΈΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΎΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ
- ΠΠ΅ΠΉΡΡΠ²ΠΈΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ ΠΏΡΠΎΡΡΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ Ρ ΠΏΠΎΠ»Π΅ΠΌ
Π§ΡΠΎ ΠΠ°Π»Π΅Π΅? #
ΠΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ ΠΊΠ°ΠΆΠ΄ΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΠ°ΡΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Redux.ΠΠ°ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΠΊ ΡΠ°ΡΡΠΈ 2: Π‘ΡΡΡΠΊΡΡΡΠ° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Redux, Π³Π΄Π΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΠΎΠ»Π½ΡΠΉ ΡΠ°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΠ°ΡΡΠΈ ΡΠΎΡΠ΅ΡΠ°ΡΡΡΡ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ.
ΠΠΎΠ»Π½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ React Redux Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ (2019)
ΠΡΡΠ°ΡΡΡ ΠΏΠΎΠ½ΡΡΡ Redux, Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ±ΠΈΠ²Π°Π΅Ρ Ρ ΡΠΎΠ»ΠΊΡ, ΠΊΠ°ΠΊ Π²ΡΠ΅ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. Π’Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ ΠΊΠ°ΠΊ Π½ΠΎΠ²ΠΈΡΠΎΠΊ.
Π‘ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΡΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΠΈ! ΠΠ΅ΠΉΡΡΠ²ΠΈΡ, ΡΠ΅Π΄ΡΠΊΡΠΎΡΡ, ΡΠΎΠ·Π΄Π°ΡΠ΅Π»ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ, ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ, ΡΠΈΡΡΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, Π½Π΅ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌΠΎΡΡΡ, ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΠ΅Π»ΠΈβ¦
ΠΠ°ΠΊ Π²ΡΠ΅ ΡΡΠΎ ΡΠΎΡΠ΅ΡΠ°Π΅ΡΡΡ Ρ React Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ?
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°ΡΠ°ΠΌΠΈ ΡΠΈΡΠ°ΡΡ Π±Π»ΠΎΠ³ΠΈ ΠΈ ΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡΡΡ Π² ΡΠ»ΠΎΠΆΠ½ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ Β«ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠΈΡΠ°Β», ΠΏΡΡΠ°ΡΡΡ ΡΠΎΠ±ΡΠ°ΡΡ ΠΈΡ Π²ΠΎΠ΅Π΄ΠΈΠ½ΠΎ.
Π ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ ΠΏΠΎ Redux Ρ ΡΠΎΠ±ΠΈΡΠ°ΡΡΡ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Redux Ρ React ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎ — Π½Π°ΡΠΈΠ½Π°Ρ Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ React — ΠΈ Π½Π° ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ React + Redux. Π― ΠΎΠ±ΡΡΡΠ½Ρ , ΠΏΠΎΡΠ΅ΠΌΡ ΠΊΠ°ΠΆΠ΄Π°Ρ ΡΡΠ½ΠΊΡΠΈΡ ΠΏΠΎΠ»Π΅Π·Π½Π° (ΠΈ ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠΏΡΡΡΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· Π½ΠΈΡ ).
ΠΠ°ΡΠ΅ΠΌ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ ΡΠ΅ΠΌΡ ΠΎΠ΄Π½Π° Π·Π° Π΄ΡΡΠ³ΠΎΠΉ, ΠΏΠΎΠΊΠ° Π²Ρ Π½Π΅ ΡΠ°Π·Π±Π΅ΡΠ΅ΡΠ΅ΡΡ Π² ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ . ΠΡ Π²ΠΎΡ π
ΠΠ΅Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅: ΡΡΠΎΡ ΡΡΠ΅Π±Π½ΠΈΠΊ — completeeete . ΠΠΎΠ΄ ΡΡΠΈΠΌ Ρ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Ρ ΠΈ .Π― ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΠ» ΡΡΠΎ Π² ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΡΠΉ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ ΠΊΡΡΡ, ΠΈ . Π― ΡΠ΄Π΅Π»Π°Π» ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ PDF-ΡΠ°ΠΉΠ», ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΈΡΠ°ΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ iPad ΠΈΠ»ΠΈ [Π½Π° Π»ΡΠ±ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ Android, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ΅ΠΉΡΠ°Ρ ΠΊΡΡΡΠΎ]. ΠΡΡΠ°Π²ΡΡΠ΅ ΡΠ²ΠΎΠΉ Π°Π΄ΡΠ΅Ρ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ Π² ΠΊΠΎΡΠΎΠ±ΠΊΠ΅, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΈ ΡΠΎ, ΠΈ Π΄ΡΡΠ³ΠΎΠ΅ ΠΏΡΡΠΌΠΎ ΡΠ΅ΠΉΡΠ°Ρ.
Π£ΡΠΏΠ΅Ρ ! Π’Π΅ΠΏΠ΅ΡΡ ΠΏΡΠΎΠ²Π΅ΡΡΡΠ΅ ΡΠ²ΠΎΡ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΡ ΠΏΠΎΡΡΡ.
(Π― Π·Π½Π°Ρ, ΠΊΠ°ΠΊ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π²ΡΡ ΠΎΠ΄ΡΡ ΠΈΠ·-ΠΏΠΎΠ΄ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ. Π’Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ³ΠΎ Π΄Π»Ρ ΡΡΠ΅Π½ΠΈΡ, ΡΠ°ΠΊ ΠΌΠ°Π»ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ!)
ΠΡΠ½ΠΎΠ²Ρ Redux Π² ΠΎΠ΄Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅ΠΎ
ΠΡΠ»ΠΈ Π²Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°Π΅ΡΠ΅ ΠΏΡΠΎΡΠΌΠΎΡΡ ΡΡΠ΅Π½ΠΈΡ, Π² ΡΡΠΎΠΌ Π²ΠΈΠ΄Π΅ΠΎ ΡΠ°ΡΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Redux Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ React, ΡΠ°Π³ Π·Π° ΡΠ°Π³ΠΎΠΌ:
ΠΡΠΎ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΡΠΎΠ³ΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π°, Π³Π΄Π΅ ΠΌΡ Π±Π΅ΡΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ React ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π² Π½Π΅Π³ΠΎ Redux ΠΏΠΎ ΡΠ°ΡΡΡΠΌ.
ΠΠ»ΠΈ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡΠ΅ ΡΠΈΡΠ°ΡΡ! Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΡΠ΅, ΡΡΠΎ Π΅ΡΡΡ Π² Π²ΠΈΠ΄Π΅ΠΎ, Π° ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅.
Π‘ΡΠΎΠΈΡ Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Redux?
ΠΡΠΎΠ±Π΅Π½Π½ΠΎ Π°ΠΊΡΡΠ°Π»ΡΠ½ΠΎ Π² 2020 Π³ΠΎΠ΄Ρ Π·Π°Π΄Π°ΡΡΡΡ Π²ΠΎΠΏΡΠΎΡΠΎΠΌ … ΡΡΠΎΠΈΡ Π»ΠΈ Π²Π°ΠΌ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Redux? ΠΡΡΡ Π»ΠΈ ΡΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ ΠΏΠΎΠ»ΡΡΡΠ΅ Ρ Ρ ΡΠΊΠ°ΠΌΠΈ, ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΠΎΠΉ-Π½ΠΈΠ±ΡΠ΄Ρ Π΄ΡΡΠ³ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ?
ΠΡΠ°ΡΠΊΠΈΠΉ ΠΎΡΠ²Π΅Ρ: Π΄Π°ΠΆΠ΅ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ² Redux Π΅ΡΠ΅ Π½Π΅ ΡΠΌΠ΅Ρ. ΠΠΎ ΠΈΠΌΠ΅Π΅Ρ Π»ΠΈ ΡΡΠΎ ΡΠΌΡΡΠ» Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡβ¦ Π½Ρ, ΡΡΠΎ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΎΠ±ΡΡΠΎΡΡΠ΅Π»ΡΡΡΠ².
Π‘ΡΠΏΠ΅Ρ ΠΏΡΠΎΡΡΠΎ? Π’ΠΎΠ»ΡΠΊΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π±ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ»ΠΈ Π΄Π²ΡΡ ΠΌΠ΅ΡΡΠ°Ρ ? Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π±ΡΠ΄Π΅Ρ ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ.ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠΎΠ², Ρ ΡΠΊΠΎΠ² ΠΈΠ»ΠΈ ΡΠΎΠ³ΠΎ ΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎ.
ΠΠ΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ»ΠΎΠΆΠ½Π΅Π΅, Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ Β«Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΠΌΠΈΒ» Π²Π΅ΡΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ? ΠΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΠΉ API ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΌ Π΄Π»Ρ Π²Π°Ρ.
ΠΠ½ΠΎΠ³ΠΎ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ΠΌ ΠΌΠ΅ΠΆΠ΄Ρ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΌΠΈ ΡΠ°ΡΡΡΠΌΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ? ΠΠ»ΠΈ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΎ Π²ΡΠ΅ΠΌΠ΅Π½Π΅ΠΌ ΡΡΠ°Π½Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π±ΠΎΠ»ΡΡΠ΅? ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Redux.
ΠΡ Π²ΡΠ΅Π³Π΄Π° ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Redux ΠΈ ΠΏΠΎΠ·ΠΆΠ΅ . ΠΠ°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π² ΠΏΠ΅ΡΠ²ΡΠΉ Π΄Π΅Π½Ρ. ΠΠ°ΡΠ½ΠΈΡΠ΅ Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΈ Π³Π΄Π΅ Π²Π°ΠΌ ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ.
ΠΠ½Π°Π΅ΡΠ΅ Π»ΠΈ Π²Ρ, ΠΊΠ°ΠΊ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ?
React ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ Π±Π΅Π· Redux. Redux — ΡΡΠΎ Π½Π°Π΄ΡΡΡΠΎΠΉΠΊΠ° ΠΊ React.
ΠΠ°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Π²Ρ ΡΠΎΠ±ΠΈΡΠ°Π΅ΡΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ ΠΎΠ±Π°, Ρ ΠΎΡΠ΅Π½Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΡΠ½Π°ΡΠ°Π»Π° ΠΈΠ·ΡΡΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ React Π±Π΅Π· Redux. Π Π°Π·Π±Π΅ΡΠΈΡΠ΅ΡΡ Π² ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ , ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ ΠΈ ΠΎΠ΄Π½ΠΎΡΡΠΎΡΠΎΠ½Π½Π΅ΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ Π΄Π°Π½Π½ΡΡ ΠΈ Π½Π°ΡΡΠΈΡΠ΅ΡΡ Β«Π΄ΡΠΌΠ°ΡΡ Π² ReactΒ», ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΏΡΡΠ°ΡΡΡΡ ΠΈΠ·ΡΡΠΈΡΡ Redux. ΠΠ·ΡΡΠ΅Π½ΠΈΠ΅ ΠΈΡ ΠΎΠ±ΠΎΠΈΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ — Π²Π΅ΡΠ½ΡΠΉ ΠΏΡΡΡ ΠΊ ΠΏΡΡΠ°Π½ΠΈΡΠ΅. Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ React, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΡ Π²Π°ΡΡΠ²Π°Π΅Ρ Π²ΡΠ΅ Π²Π°ΠΆΠ½ΡΠ΅ Π²Π΅ΡΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π½Π°ΡΡ.
Π― ΡΠΎΠΆΠ΅ ΡΠΎΠ±ΡΠ°Π» ΡΡΠΎ Π² 5-Π΄Π½Π΅Π²Π½ΡΠΉ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ ΠΊΡΡΡ! (ΡΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π΄Π»ΠΈΠ½Π½ΡΠΉ ΡΡΠ΅Π±Π½ΠΈΠΊ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ» ΡΠ°Π·Π»ΠΎΠΆΠΈΡΡ Π΅Π³ΠΎ)
Π£ΡΠΏΠ΅Ρ ! Π’Π΅ΠΏΠ΅ΡΡ ΠΏΡΠΎΠ²Π΅ΡΡΡΠ΅ ΡΠ²ΠΎΡ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΡ ΠΏΠΎΡΡΡ.
ΠΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° Redux
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ React Π±ΠΎΠ»Π΅Π΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΌΠΈΠ½ΡΡ, Π²Ρ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π·Π½Π°Π΅ΡΠ΅ ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ ΠΈ ΠΎΠ΄Π½ΠΎΡΡΠΎΡΠΎΠ½Π½Π΅ΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ Π΄Π°Π½Π½ΡΡ . ΠΠ°Π½Π½ΡΠ΅ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡΡΡ Π²Π½ΠΈΠ· Π΄Π΅ΡΠ΅Π²Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΡΠ΅ΡΠ΅Π· props. Π£ΡΠΈΡΡΠ²Π°Ρ ΡΠ°ΠΊΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ:
Π‘ΡΠ΅ΡΡΠΈΠΊ
, Ρ
ΡΠ°Π½ΡΡΠΈΠΉΡΡ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ
, Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅Π΄Π°Π½ ΠΊΠ°ΠΊ ΠΎΠΏΠΎΡΠ°:
Π§ΡΠΎΠ±Ρ Π΄Π°Π½Π½ΡΠ΅ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π»ΠΈΡΡ Π²Π²Π΅ΡΡ ΠΏΠΎ Π΄Π΅ΡΠ΅Π²Ρ , ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠΎΠΉΡΠΈ ΡΠ΅ΡΠ΅Π· ΡΡΠ½ΠΊΡΠΈΡ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ·ΠΎΠ²Π°, ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΠ° ΡΡΠ½ΠΊΡΠΈΡ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ·ΠΎΠ²Π° Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠ½Π°ΡΠ°Π»Π° Π±ΡΡΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π½Π° Π²Π½ΠΈΠ· Π»ΡΠ±ΡΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΎΡΡΡ Π²ΡΠ·Π²Π°ΡΡ Π΅Π΅ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠΈ Π΄Π°Π½Π½ΡΡ Π²Π²Π΅ΡΡ .
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ ΡΠ΅Π±Π΅ Π΄Π°Π½Π½ΡΠ΅ ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΊΡΡΠΈΡΠ΅ΡΡΠ²ΠΎ , ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½Π½ΡΠ΅ ΡΠ²Π΅ΡΠ½ΡΠΌΠΈ ΠΏΡΠΎΠ²ΠΎΠ΄Π°ΠΌΠΈ ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°Π±ΠΎΡΡΡΡΡ ΠΎ Π½Π΅ΠΌ. ΠΠ°Π½Π½ΡΠ΅ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡΡΡ ΠΏΠΎ ΡΡΠΈΠΌ ΠΏΡΠΎΠ²ΠΎΠ΄Π°ΠΌ Π²Π½ΠΈΠ· ΠΈ Π²Π²Π΅ΡΡ , Π½ΠΎ ΠΈΡ Π½Π΅Π»ΡΠ·Ρ ΠΏΡΠΎΠ²Π΅ΡΡΠΈ ΡΠΊΠ²ΠΎΠ·Ρ Π²ΠΎΠ·Π΄ΡΡ — ΠΈΡ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΡΠ΅ΠΏΡΡ ΠΎΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΠΊ Π΄ΡΡΠ³ΠΎΠΌΡ.
ΠΠ΅ΡΠ΅Π΄Π°ΡΠ° Π΄Π°Π½Π½ΡΡ Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΡΠΎΠ²Π½ΡΡ — ΡΡΠΎ Π±ΠΎΠ»Ρ
Π Π°Π½ΠΎ ΠΈΠ»ΠΈ ΠΏΠΎΠ·Π΄Π½ΠΎ Π²Ρ ΡΡΠΎΠ»ΠΊΠ½Π΅ΡΠ΅ΡΡ Ρ ΡΠΈΡΡΠ°ΡΠΈΠ΅ΠΉ, ΠΊΠΎΠ³Π΄Π° Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΡΡΠΎΠ²Π½Ρ Π΅ΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π°Π½Π½ΡΠ΅, Π° ΡΡΠΈ Π΄Π°Π½Π½ΡΠ΅ Π½ΡΠΆΠ½Ρ Π΄ΠΎΡΠ΅ΡΠ½Π΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° 4+ ΡΡΠΎΠ²Π½Ρ Π½ΠΈΠΆΠ΅. ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΠ· Twitter ΡΠΎ Π²ΡΠ΅ΠΌΠΈ Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΡΠΌΠΈ Π°Π²Π°ΡΠ°ΡΠ°ΠΌΠΈ:
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠΌ, ΡΡΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΡΡΠΎΠ²Π½Ρ
ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ ΠΎΠ±ΡΠ΅ΠΊΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ
. ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ
ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π°Π²Π°ΡΠ°Ρ, Π΄Π΅ΡΠΊΡΠΈΠΏΡΠΎΡ ΠΈ Π΄ΡΡΠ³ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΏΡΠΎΡΠΈΠ»Ρ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
Π§ΡΠΎΠ±Ρ Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ Π΄Π°Π½Π½ΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ
ΠΊΠΎ Π²ΡΠ΅ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌ 3 Avatar
, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΏΡΠΎΠΏΠΈΡΠ°Π½ ΡΠ΅ΡΠ΅Π· ΠΊΡΡΡ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΡΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΌ Π΄Π°Π½Π½ΡΠ΅ Π½Π΅ Π½ΡΠΆΠ½Ρ.
ΠΠΎΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π΄Π°Π½Π½ΡΡ ΡΠ°ΠΌ ΠΏΠΎΡ ΠΎΠΆΠ΅ Π½Π° ΠΏΡΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ³Π»Ρ Π² Π³ΠΎΡΠ½ΠΎΠΉ ΡΠΊΡΠΏΠ΅Π΄ΠΈΡΠΈΠΈ. ΠΠΎΠ΄ΠΎΠΆΠ΄ΠΈΡΠ΅, Π² ΡΡΠΎΠΌ Π½Π΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΡΠΌΡΡΠ»Π°. Π’Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°ΡΠ΅, — ΡΡΠΎ Π±ΠΎΠ»Ρ . Π’Π°ΠΊΠΆΠ΅ ΠΈΠ·Π²Π΅ΡΡΠ΅Π½ ΠΊΠ°ΠΊ Β«Π±ΡΡΠΎΠ²Π°Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ°Β».
Π§ΡΠΎ Π΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΠΎ, ΡΡΠΎ Π½Π΅ ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ. ΠΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π²ΡΠ½ΡΠΆΠ΄Π΅Π½Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°Π²Π°ΡΡ ΡΠ΅ΠΊΠ²ΠΈΠ·ΠΈΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠΌ Π½Π΅ Π½ΡΠΆΠ½Ρ. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠ΅ΡΠ°ΠΊΡΠΎΡΠΈΠ½Π³ ΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π±ΡΠ΄Π΅Ρ ΡΠ»ΠΎΠΆΠ½Π΅Π΅, ΡΠ΅ΠΌ Π½ΡΠΆΠ½ΠΎ.
ΠΡΠ»ΠΎ Π±Ρ Π½Π΅ΠΏΠ»ΠΎΡ ΠΎ, Π΅ΡΠ»ΠΈ Π±Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠΌ Π½Π΅ Π½ΡΠΆΠ½Ρ Π΄Π°Π½Π½ΡΠ΅, Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ Π²ΠΈΠ΄Π΅Π»ΠΈ ΠΈΡ ?
Redux — ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ.
ΠΠ΅ΡΠ΅Π΄Π°ΡΠ° Π΄Π°Π½Π½ΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΡΠ΅Π΄Π½ΠΈΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ-Π±ΡΠ°ΡΡΡ ΠΈ ΡΠ΅ΡΡΡΡ, ΠΊΠΎΡΠΎΡΡΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠ±ΠΌΠ΅Π½ΠΈΠ²Π°ΡΡΡΡ Π΄Π°Π½Π½ΡΠΌΠΈ, ΡΠΏΠΎΡΠΎΠ± ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ Π² React — ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΡ ΡΡΠΈ Π΄Π°Π½Π½ΡΠ΅ Π²Π²Π΅ΡΡ Π² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ props.
ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π³ΡΠΎΠΌΠΎΠ·Π΄ΠΊΠΎ. Redux ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠΎΡΡ, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ² Π²Π°ΠΌ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠ³ΠΎ Β«ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΒ», Π³Π΄Π΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Ρ
ΡΠ°Π½ΠΈΡΡ Π΄Π°Π½Π½ΡΠ΅, Π° Π·Π°ΡΠ΅ΠΌ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ
Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΊ Π΄Π°Π½Π½ΡΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ React-Redux.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ React-Redux Π΄Π»Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π΄Π°Π½Π½ΡΡ ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠ½ΠΊΡΠΈΡ connect
, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ react-redux
, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ Π»ΡΠ±ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΊ Ρ
ΡΠ°Π½ΠΈΠ»ΠΈΡΡ Redux ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡΠ΅ Π΄Π°Π½Π½ΡΠ΅.
Redux ΡΠ°ΠΊΠΆΠ΅ Π΄Π΅Π»Π°Π΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠ΅ Π²Π΅ΡΠΈ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΡΠΏΡΠΎΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ»Π°Π΄ΠΊΠΈ (Redux DevTools ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΠΏΡΠΎΠ²Π΅ΡΡΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ), ΠΎΡΠ»Π°Π΄ΠΊΠ° Π²ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ (Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΠΊΠ°ΡΠΈΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ, ΠΊΠ°ΠΊ Π²Π°ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠ³Π»ΡΠ΄Π΅Π»ΠΎ Π² ΠΏΡΠΎΡΠ»ΠΎΠΌ) ΠΈ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π°Ρ ΠΊΠΎΠ΄ Π±ΠΎΠ»Π΅Π΅ ΡΠ΄ΠΎΠ±Π½ΡΠΌ Π² ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π½ΠΈΠΈ Π² Π΄ΠΎΠ»Π³ΠΎΡΡΠΎΡΠ½ΠΎΠΉ ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Π΅.ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ Π½Π°ΡΡΠΈΡ Π²Π°Ρ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ·Π½Π°ΡΡ ΠΎ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠΌ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ.
ΠΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ Redux
ΠΡΠ»ΠΈ Redux ΠΊΠ°ΠΆΠ΅ΡΡΡ ΠΈΠ·Π»ΠΈΡΠ½ΠΈΠΌ Π΄Π»Ρ Π²Π°ΡΠ΅ΠΉ ΡΠΈΡΡΠ°ΡΠΈΠΈ, ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΡΠΈ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ. ΠΠ½ΠΈ Π²ΡΡΡΠΎΠ΅Π½Ρ ΠΏΡΡΠΌΠΎ Π² React.
ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π° Redux: API ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° React
ΠΠΎΠ΄ ΠΊΠ°ΠΏΠΎΡΠΎΠΌ React-Redux ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΠΉ API React Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠΈ Π΄Π°Π½Π½ΡΡ . ΠΡΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅, ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΊΠ»ΡΡΠΈΡΡ ΠΏΠΎΡΡΠ΅Π΄Π½ΠΈΠΊΠ° ΠΈ Π½Π°ΠΏΡΡΠΌΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Context. ΠΡ ΡΠΏΡΡΡΠΈΡΠ΅ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Redux, ΡΠΏΠΎΠΌΡΠ½ΡΡΡΠ΅ Π²ΡΡΠ΅, Π½ΠΎ Π΅ΡΠ»ΠΈ Π²Π°ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΡΡΠΎΠ΅ ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ΅Π½ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠΈ Π΄Π°Π½Π½ΡΡ , Context ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΌ.
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²Ρ Π·Π΄Π΅ΡΡ, Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Ρ, ΡΡΠΎ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΠ·ΡΡΠΈΡΡ Redux, ΠΈ Ρ Π½Π΅ Π±ΡΠ΄Ρ ΠΏΡΡΠΌΠΎ Π·Π΄Π΅ΡΡ ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡ Redux Ρ Context API ΠΈΠ»ΠΈ Ρ ΡΠΊΠ°ΠΌΠΈ useContext ΠΈ useReducer. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΏΠΎ ΡΡΠΈΠΌ ΡΡΡΠ»ΠΊΠ°ΠΌ.
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π³Π»ΡΠ±ΠΎΠΊΠΎ ΠΏΠΎΠ³ΡΡΠ·ΠΈΡΡΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ API, ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΌΠΎΠΉ ΠΊΡΡΡ React Context for State Management Π½Π° ΡΠ°ΠΉΡΠ΅ egghead.
ΠΡΡΠ³Π°Ρ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π°: ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ children
Prop
Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ ΡΡΡΡΠΊΡΡΡΠΈΡΡΠ΅ΡΠ΅ ΡΠ²ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ Π½Π°ΠΏΡΡΠΌΡΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π²Π°ΡΡ Π΄Π°Π½Π½ΡΠ΅ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ
ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ²
ΠΈ Π΄ΡΡΠ³ΠΈΡ
ΡΠ²ΠΎΠΉΡΡΠ² Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Β«ΡΠ»ΠΎΡΠΎΠ²Β».ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΏΡΠΎΠΏΡΡΡΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠ²Π½Π΅ΠΉ Π² ΠΈΠ΅ΡΠ°ΡΡ
ΠΈΠΈ, Π΅ΡΠ»ΠΈ Π²Ρ Π²ΡΠ΅ ΡΡΡΡΠΎΠΈΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ.
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΡΡΠ°ΡΡΡ ΠΎΠ± ΡΡΠΎΠΌ ΡΠ°Π±Π»ΠΎΠ½Π΅ Β«ΡΠ»ΠΎΡΠΎΠ²Β» ΠΈ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°ΡΡ Π΄Π΅ΡΠ΅Π²ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠΈ Π΄Π°Π½Π½ΡΡ .
ΠΠ·ΡΡΠΈΡΠ΅ Redux, Π½Π°ΡΠΈΠ½Π°Ρ Ρ Plain React
ΠΡ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΈΠ½ΠΊΡΠ΅ΠΌΠ΅Π½ΡΠ½ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄, Π½Π°ΡΠ°Π² Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ React Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², Π΄ΠΎΠ±Π°Π²Π»ΡΡ ΡΠ°ΡΡΠΈ Redux ΠΏΠΎ ΡΠ°ΡΡΡΠΌ ΠΈ ΠΏΠΎ Ρ ΠΎΠ΄Ρ ΠΈΡΠΏΡΠ°Π²Π»ΡΡ ΠΎΡΠΈΠ±ΠΊΠΈ. ΠΠ°Π·ΠΎΠ²Π΅ΠΌ ΡΡΠΎ Β«Π Π°Π·ΡΠ°Π±ΠΎΡΠΊΠ°, ΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΠ°Ρ ΠΎΡΠΈΠ±ΠΊΠ°ΠΌΠΈΒ» π
ΠΠΎΡ ΡΡΠ΅ΡΡΠΈΠΊ:
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Counter Ρ ΡΠ°Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΎΠΊΡΡΠΆΠ°ΡΡΠ΅Π΅ Π΅Π³ΠΎ, ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΎΡΡΠΎΠΉ ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΠΎΠΉ.
Counter.js
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ React ΠΈΠ· react;
class Counter extends React.Component {
state = {count: 0}
ΠΈΠ½ΠΊΡΠ΅ΠΌΠ΅Π½Ρ = () => {
this.setState ({
count: this.state.count + 1
});
}
Π΄Π΅ΠΊΡΠ΅ΠΌΠ΅Π½Ρ = () => {
this.setState ({
count: this.state.count - 1
});
}
render () {
Π²ΠΎΠ·Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ (
Π‘ΡΠ΅ΡΡΠΈΠΊ
{ΡΡΠΎ.state.count}
)
}
}
ΡΠΊΡΠΏΠΎΡΡ ΡΡΠ΅ΡΡΠΈΠΊΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ;
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΊΡΠ°ΡΠΊΠΎΠ³ΠΎ ΠΎΠ±Π·ΠΎΡΠ°, Π²ΠΎΡ ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ:
- Π‘ΡΠ΅ΡΡΠΈΠΊ
Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅
Ρ ΡΠ°Π½ΠΈΡΡΡ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅ΡΡΠ΅ΡΡΠΈΠΊΠ°
- ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ Β«+Β», Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ
onClick
, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΡΡΠ½ΠΊΡΠΈΡΠΏΡΠΈΡΠ°ΡΠ΅Π½ΠΈΡ
. - Π€ΡΠ½ΠΊΡΠΈΡ ΠΏΡΠΈΡΠ°ΡΠ΅Π½ΠΈΡ
- ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π±ΡΠ»ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΎ, React ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ
Counter
(ΠΈ Π΅Π³ΠΎ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ), ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΠ΅ΡΡΠΈΠΊΠ°.
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠ΅ΠΉ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ, ΠΏΡΠΎΡΡΠΈΡΠ΅ Β«ΠΠ°Π³Π»ΡΠ΄Π½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π² ReactΒ», Π° Π·Π°ΡΠ΅ΠΌ Π²Π΅ΡΠ½ΠΈΡΠ΅ΡΡ ΡΡΠ΄Π°.
Π Π΅ΡΠ»ΠΈ ΡΠ΅ΡΡΠ΅Π·Π½ΠΎ: Π΅ΡΠ»ΠΈ Π²ΡΡΠ΅ Π±ΡΠ» ΠΎΠ±Π·ΠΎΡ , Π° Π½Π΅ , Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ React , ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π²Ρ ΠΈΠ·ΡΡΠΈΡΠ΅ Redux, ΠΈΠ½Π°ΡΠ΅ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΎΡΠ΅Π½Ρ Π·Π°ΠΏΡΡΠ°Π½Π½ΠΎ. ΠΡΠΎΠΉΠ΄ΠΈΡΠ΅ ΠΌΠΎΠΉ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ 5-Π΄Π½Π΅Π²Π½ΡΠΉ ΠΊΡΡΡ React, ΠΎΠ±ΡΠ΅ΡΠΈΡΠ΅ ΡΠ²Π΅ΡΠ΅Π½Π½ΠΎΡΡΡ Π² ΠΏΡΠΎΡΡΠΎΠΌ React ΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΠΉΡΠ΅ΡΡ ΡΡΠ΄Π°.
Follow Along!
ΠΡΡΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± Π½Π°ΡΡΠΈΡΡΡΡ ΡΡΠΎΠΌΡ — ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ! ΠΡΠ°ΠΊ, Π²ΠΎΡ CodeSandbox, Π³Π΄Π΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ»Π΅Π΄ΠΈΡΡ:
-> ΠΡΠΊΡΡΡΡ ΡΡΠΎΡ CodeSandbox Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅
Π― Π½Π°ΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ Π²Π°ΠΌ ΡΠΈΠ½Ρ ΡΠΎΠ½ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ CodeSandbox Ρ ΡΡΠ΅Π±Π½ΠΈΠΊΠΎΠΌ ΠΈ Π²Π²ΠΎΠ΄ΠΈΡΡ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΠΏΡΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ.
ΠΠΎΠ±Π°Π²ΠΈΡΡ Redux Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ React
Π CodeSandbox ΡΠ°Π·Π²Π΅ΡΠ½ΠΈΡΠ΅ ΡΠ°Π·Π΄Π΅Π» Β«ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈΒ» Π½Π° Π»Π΅Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ Β«ΠΠΎΠ±Π°Π²ΠΈΡΡ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡΒ».
ΠΠ°ΠΉΠ΄ΠΈΡΠ΅ redux
, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π΅Π³ΠΎ, Π·Π°ΡΠ΅ΠΌ ΡΠ½ΠΎΠ²Π° Π½Π°ΠΆΠΌΠΈΡΠ΅ Β«ΠΠΎΠ±Π°Π²ΠΈΡΡ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡΒ», Π½Π°ΠΉΠ΄ΠΈΡΠ΅ response-redux
ΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π΅Π³ΠΎ.
Π Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅ ΠΈΡ
ΠΌΠΎΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Yarn ΠΈΠ»ΠΈ NPM: npm install --save redux react-redux
.
redux ΠΏΡΠΎΡΠΈΠ² React-redux
redux
Π΄Π°Π΅Ρ Π²Π°ΠΌ Ρ
ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΡΠΎΡ
ΡΠ°Π½ΡΡΡ Π² Π½Π΅ΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΈ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ. ΠΠΎ ΡΡΠΎ Π²ΡΠ΅, ΡΡΠΎ ΠΎΠ½ Π΄Π΅Π»Π°Π΅Ρ.
ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΡΠΎ react-redux
, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΡΠΎΠ΅Π΄ΠΈΠ½ΡΡΡ ΡΠ°ΡΡΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ React.
ΠΠ΅ΡΠ½ΠΎ: redux
Π²ΠΎΠΎΠ±ΡΠ΅ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ Π·Π½Π°Π΅Ρ ΠΎ React .
ΠΠΎ ΡΡΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΏΠΎΡ ΠΎΠΆΠΈ Π½Π° Π΄Π²Π΅ ΠΊΠ°ΠΏΠ»ΠΈ Π²ΠΎΠ΄Ρ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅. Π 99,999% ΡΠ»ΡΡΠ°Π΅Π², ΠΊΠΎΠ³Π΄Π° ΠΊΡΠΎ-Π»ΠΈΠ±ΠΎ ΡΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ Β«ReduxΒ» Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ React, ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡΡ Π² Π²ΠΈΠ΄Ρ ΠΎΠ±Π΅ ΡΡΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π² ΡΠ°Π½Π΄Π΅ΠΌΠ΅. Π’Π°ΠΊ ΡΡΠΎ ΠΈΠΌΠ΅ΠΉΡΠ΅ ΡΡΠΎ Π² Π²ΠΈΠ΄Ρ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΡΠΏΠΎΠΌΠΈΠ½Π°Π½ΠΈΠ΅ Redux Π² StackOverflow, Reddit ΠΈΠ»ΠΈ Π³Π΄Π΅-ΡΠΎ Π΅ΡΠ΅.
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° redux
ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π²Π½Π΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ React. ΠΠ½ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΠΌΠΈ Vue, Angular ΠΈ Π΄Π°ΠΆΠ΅ ΡΠ΅ΡΠ²Π΅ΡΠ½ΡΠΌΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΠΌΠΈ Node / Express.
Redux ΠΈΠΌΠ΅Π΅Ρ ΠΎΠ΄Π½ΠΎ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠ΅ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅
ΠΡ Π½Π°ΡΠ½Π΅ΠΌ Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΌΠΎΠ³ΠΎ Redux ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎΠΉ Π΅Π³ΠΎ ΡΠ°ΡΡΠΈ: ΠΌΠ°Π³Π°Π·ΠΈΠ½Π° .
ΠΡ Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Redux ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΠΎΠ΄Π½ΠΎΠΌ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ . Π ΠΊΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·Π²Π»Π΅ΡΡ ΡΠ°ΡΡΠΈ ΡΡΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΠΈΡ ΠΊ ΡΠ²ΠΎΠΈΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ²ΠΎΠΉΡΡΠ².
ΠΡ ΡΠ°ΡΡΠΎ Π±ΡΠ΄Π΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ ΡΠ»ΠΎΠ²Π° Β«ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅Β» ΠΈ Β«ΠΌΠ°Π³Π°Π·ΠΈΠ½Β» ΠΊΠ°ΠΊ ΡΠΈΠ½ΠΎΠ½ΠΈΠΌΡ. Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ — ΡΡΠΎ Π΄Π°Π½Π½ΡΠ΅, Π° Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ — ΡΡΠΎ ΠΌΠ΅ΡΡΠΎ, Π³Π΄Π΅ ΠΎΠ½ΠΈ Ρ ΡΠ°Π½ΡΡΡΡ.
ΠΡΠ°ΠΊ: Π½Π° ΠΏΠ΅ΡΠ²ΠΎΠΌ ΡΡΠ°ΠΏΠ΅ ΡΠ΅ΡΠ°ΠΊΡΠΎΡΠΈΠ½Π³Π° Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ React Π½Π° Redux Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ Π΄Π»Ρ Ρ ΡΠ°Π½Π΅Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Redux Store
Redux ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ ΡΠ΄ΠΎΠ±Π½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΌΠ°Π³Π°Π·ΠΈΠ½Ρ, ΠΈ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΎΠ½Π° createStore
. ΠΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π»ΠΎΠ³ΠΈΡΠ½ΠΎ, Π°?
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΌΠ°Π³Π°Π·ΠΈΠ½ Π² index.js
. ΠΠΌΠΏΠΎΡΡΠΈΡΡΠΉΡΠ΅ createStore
ΠΈ Π½Π°Π·ΠΎΠ²ΠΈΡΠ΅ Π΅Π³ΠΎ ΡΠ°ΠΊ:
index.js
ΠΈΠΌΠΏΠΎΡΡ {createStore} ΠΈΠ· "redux";
const store = createStore ();
const App = () => (
<Π‘ΡΠ΅ΡΡΠΈΠΊ />
);
ΠΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π·Π°Π²Π΅ΡΡΠΈΡΡΡΡ ΠΎΡΠΈΠ±ΠΊΠΎΠΉ Β«ΠΠΆΠΈΠ΄Π°Π»ΠΎΡΡ, ΡΡΠΎ ΡΠ΅Π΄ΡΠΊΡΠΎΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ.β
ΠΠ°Π³Π°Π·ΠΈΠ½Ρ Π½ΡΠΆΠ΅Π½ ΡΠ΅Π΄ΡΠΊΡΠΎΡ
ΠΡΠ°ΠΊ, Π²ΠΎΡ ΡΡΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ Redux: ΠΎΠ½ Π½Π΅ ΠΎΡΠ΅Π½Ρ ΡΠΌΠ½ΡΠΉ.
ΠΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΠΎΠΆΠΈΠ΄Π°ΡΡ, ΡΡΠΎ, ΡΠΎΠ·Π΄Π°Π² ΠΌΠ°Π³Π°Π·ΠΈΠ½, ΠΎΠ½ ΠΏΡΠΈΠ΄Π°ΡΡ Π²Π°ΡΠ΅ΠΌΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Ρ ΠΎΡΠΎΡΠ΅Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠΎΠΆΠ΅Ρ Π±ΡΡΡ, ΠΏΡΡΡΠΎΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ?
ΠΠΎ Π½Π΅Ρ. ΠΠ΄Π΅ΡΡ Π½Π΅Ρ ΡΠΎΠ³Π»Π°ΡΠ΅Π½ΠΈΡ ΠΎ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ.
Redux Π΄Π΅Π»Π°Π΅Ρ Π½ΠΎΠ»Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΎ ΡΠΎΡΠΌΠ΅ Π²Π°ΡΠ΅Π³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΠ±ΡΠ΅ΠΊΡ, ΡΠΈΡΠ»ΠΎ, ΡΡΡΠΎΠΊΠ° ΠΈΠ»ΠΈ ΡΡΠΎ ΡΠ³ΠΎΠ΄Π½ΠΎ. Π’Π΅Π±Π΅ ΡΠ΅ΡΠ°ΡΡ!
ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅.ΠΡΠ° ΡΡΠ½ΠΊΡΠΈΡ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠΎΠΌ (ΠΌΡ ΠΏΠΎΠΉΠΌΠ΅ΠΌ, ΠΏΠΎΡΠ΅ΠΌΡ ΡΠ΅ΡΠ΅Π· ΠΌΠΈΠ½ΡΡΡ). ΠΡΠ°ΠΊ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ΄Π΅Π»Π°Π΅ΠΌ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎΠΉ, ΠΏΠ΅ΡΠ΅Π΄Π°Π΄ΠΈΠΌ Π΅Π³ΠΎ Π² createStore
ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ:
index.js
ΡΠ΅Π΄ΡΠΊΡΠΎΡ ΡΡΠ½ΠΊΡΠΈΠΈ (ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅) {
console.log ('ΡΠ΅Π΄ΡΠΊΡΠΎΡ', ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅);
Π²Π΅ΡΠ½ΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅;
}
const store = createStore (ΡΠ΅Π΄ΡΠΊΡΠΎΡ);
ΠΠΎΡΠ»Π΅ Π²Π½Π΅ΡΠ΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΎΡΠΊΡΠΎΠΉΡΠ΅ ΠΊΠΎΠ½ΡΠΎΠ»Ρ (Π² CodeSandbox Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ Β«ΠΠΎΠ½ΡΠΎΠ»ΡΒ» Π²Π½ΠΈΠ·Ρ).
ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π·Π°ΠΏΠΈΡΠ°Π½Π½ΠΎΠ΅ ΡΠ°ΠΌ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅, ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊΠΎΠ΅:
(Π±ΡΠΊΠ²Ρ ΠΈ ΡΠΈΡΡΡ ΠΏΠΎΡΠ»Π΅ INIT ΡΠ°Π½Π΄ΠΎΠΌΠΈΠ·ΠΈΡΡΡΡΡΡ Redux)
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ Redux Π²ΡΠ·ΡΠ²Π°Π» Π²Π°Ρ ΡΠ΅Π΄ΡΠΊΡΠΎΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°.(Π§ΡΠΎΠ±Ρ Π΄ΠΎΠΊΠ°Π·Π°ΡΡ ΡΡΠΎ: ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ console.log
ΡΡΠ°Π·Ρ ΠΏΠΎΡΠ»Π΅ Π²ΡΠ·ΠΎΠ²Π° createStore
ΠΈ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ ΠΎΠ½ ΡΠ°ΡΠΏΠ΅ΡΠ°ΡΡΠ²Π°Π΅ΡΡΡ ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ°)
Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ Redux ΠΏΠ΅ΡΠ΅Π΄Π°Π» ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅
ΠΈΠ· undefined
, ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π±ΡΠ»ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠΌ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ ΡΠΈΠΏΠ°
.
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΡΠ΅ΡΠ΅Π· ΠΌΠΈΠ½ΡΡΡ. Π ΠΏΠΎΠΊΠ° Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ΅Π΄ΡΠΊΡΠΎΡ .
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΡΠ΅Π΄ΡΠΊΡΠΎΡ Redux?
Π’Π΅ΡΠΌΠΈΠ½ Β«ΡΠ΅Π΄ΡΠΊΡΠΎΡΒ» ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠ³Π°ΡΡΠΈΠΌ ΠΈ Π½Π΅ΠΏΡΠΈΠ²ΡΡΠ½ΡΠΌ, Π½ΠΎ ΠΏΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π°, Ρ Π΄ΡΠΌΠ°Ρ, Π²Ρ ΡΠΎΠ³Π»Π°ΡΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΡΡΠΎ, ΠΊΠ°ΠΊ Π³ΠΎΠ²ΠΎΡΠΈΡΡΡ, Β«ΠΏΡΠΎΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΡ.β
ΠΡ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡΠ΄Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΡΡΠ½ΠΊΡΠΈΡ reduce
Π΄Π»Ρ ΠΌΠ°ΡΡΠΈΠ²Π°?
ΠΠΎΡ ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ: Π²Ρ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΡΠ΅ Π΅ΠΌΡ ΡΡΠ½ΠΊΡΠΈΡ, ΠΈ ΠΎΠ½Π° Π²ΡΠ·ΡΠ²Π°Π΅Ρ Π²Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π· Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΠ°ΡΡΠΈΠ²Π°, Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΡΠΎΠΌΡ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ map
— Π²Ρ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π·Π½Π°ΠΊΠΎΠΌΡ Ρ map
ΠΈΠ· ΡΠΏΠΈΡΠΊΠΎΠ² ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° Π²Π΅ΡΠ΅ΠΉ Π² React.
ΠΠ°ΡΠ° ΡΡΠ½ΠΊΡΠΈΡ Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ Ρ Π΄Π²ΡΠΌΡ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ: ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠΌ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ ΠΈΡΠ΅ΡΠ°ΡΠΈΠΈ ΠΈ ΡΠ΅ΠΊΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΌΠ°ΡΡΠΈΠ²Π°. ΠΠ½ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ ΡΠ΅ΠΊΡΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΌ Β«ΠΈΡΠΎΠ³ΠΎΠ²ΡΠΌΒ» ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠΌ ΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΠΈΡΠΎΠ³.
ΠΡΠΎ ΡΡΠ°Π½Π΅Ρ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ½ΡΡΠ½ΡΠΌ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅:
var letter = ['r', 'e', ββ'd', 'u', 'x'];
// `reduce` ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ 2 Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠ°:
// - ΡΡΠ½ΠΊΡΠΈΡ Π΄Π»Ρ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ (ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ "ΡΠ΅Π΄ΡΠΊΡΠΎΡ")
// - Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ accumulatedResult
var word = letter.reduce (
function (AccumulatedResult, arrayItem) {
Π²ΠΎΠ·Π²ΡΠ°Ρ Π½Π°ΠΊΠΎΠΏΠ»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ° + arrayItem;
},
''); // <- ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΡΠΎΡ ΠΏΡΡΡΠΎΠΉ ΡΡΡΠΎΠΊΠΎΠ²ΡΠΉ Π°ΡΠ³ΡΠΌΠ΅Π½Ρ: ΡΡΠΎ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
console.log (word) // => "redux"
Π€ΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΡΠ΅ Π² reduce
, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎ ΠΏΡΠ°Π²Ρ Π½Π°Π·Π²Π°ΡΡ Β«reducerΒ»β¦ ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½Π° ΡΠΎΠΊΡΠ°ΡΠ°Π΅Ρ Π²Π΅ΡΡ ΠΌΠ°ΡΡΠΈΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄ΠΎ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°.
Redux — ΡΡΠΎ , ΠΏΠΎ ΡΡΡΠΈ, — ΠΌΠΎΠ΄Π½Π°Ρ Π²Π΅ΡΡΠΈΡ Array reduce
. Π Π°Π½Π΅Π΅ Π²Ρ Π²ΠΈΠ΄Π΅Π»ΠΈ, ΡΡΠΎ ΡΠ΅Π΄ΡΠΊΡΠΎΡΡ Redux ΠΈΠΌΠ΅ΡΡ ΡΡΡ ΡΠΈΠ³Π½Π°ΡΡΡΡ:
(ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅) => newState
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: ΠΎΠ½ Π±Π΅ΡΠ΅Ρ ΡΠ΅ΠΊΡΡΠ΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅
ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅
ΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ newState
. ΠΡΠ΅Π½Ρ ΠΏΠΎΡ
ΠΎΠΆΠ΅ Π½Π° ΠΏΠΎΠ΄ΠΏΠΈΡΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ° Array.reduce
!
(AccumulatedValue, nextItem) => nextAccumulatedValue
Π Π΅Π΄ΡΠΊΡΠΎΡΡ
Redux ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΡΠ΅ Π² Array.ΡΠΌΠ΅Π½ΡΡΠΈΡΡ! π Π’ΠΎ, ΡΡΠΎ ΠΎΠ½ΠΈ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡ, — ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ. ΠΠ½ΠΈ ΡΠ²ΠΎΠ΄ΡΡ Π½Π°Π±ΠΎΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ (Ρ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ) ΠΊ Π΅Π΄ΠΈΠ½ΠΎΠΌΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ . Π Π°Π·Π½ΠΈΡΠ° Π² ΡΠΎΠΌ, ΡΡΠΎ Ρ Array reduce ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΡΠ°Π·Ρ, Π° Ρ Redux — Π² ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅Π³ΠΎ ΡΡΠΎΠΊΠ° ΡΠ»ΡΠΆΠ±Ρ Π²Π°ΡΠ΅Π³ΠΎ Π·Π°ΠΏΡΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΡΠ»ΠΈ Π²Ρ Π²ΡΠ΅ Π΅ΡΠ΅ Π½Π΅ ΡΠ²Π΅ΡΠ΅Π½Ρ, ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ ΠΌΠΎΠΈΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎΠΌ ΠΏΠΎ ΡΠ°Π±ΠΎΡΠ΅ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠΎΠ² Redux. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΄Π°Π²Π°ΠΉΡΠ΅ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π²ΠΏΠ΅ΡΠ΅Π΄.
ΠΡΠΈΠ²Π΅ΡΡΠΈ ΡΠ΅Π΄ΡΠΊΡΠΎΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅
ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ Π·Π°Π΄Π°ΡΠ° ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ° — Π²Π·ΡΡΡ ΡΠ΅ΠΊΡΡΠ΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅
ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅
ΠΈ Π²Π΅ΡΠ½ΡΡΡ Π½ΠΎΠ²ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅.
Π£ Π½Π΅Π³ΠΎ Π΅ΡΡΡ Π΅ΡΠ΅ ΠΎΠ΄Π½Π° Π·Π°Π΄Π°ΡΠ°: ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΡΠΈ ΠΏΠ΅ΡΠ²ΠΎΠΌ Π²ΡΠ·ΠΎΠ²Π΅. ΠΡΠΎ ΡΡΠΎ-ΡΠΎ Π²ΡΠΎΠ΄Π΅ Β«Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈΒ» Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ΄Π΅-ΡΠΎ Π½ΡΠΆΠ½ΠΎ Π½Π°ΡΠΈΠ½Π°ΡΡ, Π²Π΅ΡΠ½ΠΎ?
ΠΠ΄ΠΈΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ — ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ initialState
ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ES6, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΡΠ²ΠΎΠΈΡΡ Π΅ΠΉ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅
.
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ Π½Π°ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Counter
Π² Redux, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΡΡΠΌΠΎ ΡΠ΅ΠΉΡΠ°Ρ Π½Π°ΡΡΡΠΎΠΈΠΌ Π΅Π³ΠΎ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅.ΠΠ½ΡΡΡΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Counter
Π½Π°ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΎ ΠΊΠ°ΠΊ ΠΎΠ±ΡΠ΅ΠΊΡ ΡΠΎ ΡΡΠ΅ΡΡΠΈΠΊΠΎΠΌ
, ΠΏΠΎΡΡΠΎΠΌΡ Π·Π΄Π΅ΡΡ ΠΌΡ ΠΎΡΡΠ°Π·ΠΈΠΌ ΡΡ ΠΆΠ΅ ΡΠΎΡΠΌΡ.
index.js
const initialState = {
ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ: 0
};
ΡΠ΅Π΄ΡΠΊΡΠΎΡ ΡΡΠ½ΠΊΡΠΈΠΈ (ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ = Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅) {
console.log ('ΡΠ΅Π΄ΡΠΊΡΠΎΡ', ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅);
Π²Π΅ΡΠ½ΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅;
}
ΠΡΠ»ΠΈ Π²Ρ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΠΊΠΎΠ½ΡΠΎΠ»Ρ Π΅ΡΠ΅ ΡΠ°Π·, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΠΎΠ½Π° Π½Π°ΠΏΠ΅ΡΠ°ΡΠ°Π½Π° {count: 0}
ΠΊΠ°ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
. ΠΠΎΡ ΡΠ΅Π³ΠΎ ΠΌΡ Ρ
ΠΎΡΠΈΠΌ.
ΠΡΠ°ΠΊ, ΡΡΠΎ ΠΏΠΎΠ΄Π²ΠΎΠ΄ΠΈΡ Π½Π°Ρ ΠΊ Π²Π°ΠΆΠ½ΠΎΠΌΡ ΠΏΡΠ°Π²ΠΈΠ»Ρ ΠΎ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ°Ρ .
ΠΠ°ΠΆΠ½ΠΎΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠΎΠ² β1 : ΠΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΠΉΡΠ΅ undefined ΠΈΠ· ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ°.
ΠΡ Π²ΡΠ΅Π³Π΄Π° Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ Π²Π°ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π±ΡΠ»ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ. ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ — ΡΡΠΎ ΡΡΠ°ΡΡΠ»ΠΈΠ²ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅. ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ un — ΡΡΠΎ un happy (ΠΈ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΡΠ»ΠΎΠΌΠ°Π΅Ρ Π²Π°ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅).
ΠΠΈΡΠΏΠ΅ΡΡΠ΅ΡΡΠΊΠΈΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΏΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
ΠΠ³Π°, ΡΡΠ°Π·Ρ Π΄Π²Π° Π½ΠΎΠ²ΡΡ ΡΡΠ»ΠΎΠ²ΠΈΡ: ΠΌΡ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΡΡ Β«ΡΠ°Π·ΠΎΡΠ»Π°ΡΡΒ» ΠΊΠ°ΠΊΠΈΠ΅-ΡΠΎ Β«Π΄Π΅ΠΉΡΡΠ²ΠΈΡΒ».
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Redux?
ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅ — ΡΡΠΎ Redux-ΡΠ·ΡΠΊ Π΄Π»Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ° ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ type
.ΠΠΎΡ ΠΈ Π²ΡΠ΅. Π‘Π»Π΅Π΄ΡΡ ΡΡΠΈΠΌ 2 ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌ, ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅:
{
ΡΠΈΠΏ: "Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ²Π°Ρ",
ΡΠΎΠ²Π°Ρ: Β«Π―Π±Π»ΠΎΠΊΠΎΒ»
}
ΠΡΠΎ ΡΠΎΠΆΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅:
ΠΠΎΡ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½:
ΠΠ΅ΠΉΡΡΠ²ΠΈΡ — Π²Π΅ΡΠΈ ΠΎΡΠ΅Π½Ρ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎΠΉ ΡΠΎΡΠΌΡ. ΠΠΎΠΊΠ° ΡΡΠΎ ΠΎΠ±ΡΠ΅ΠΊΡ Ρ ΡΠΈΠΏΠ°
, ΡΡΠΎ ΡΠ΅ΡΡΠ½Π°Ρ ΠΈΠ³ΡΠ°.
ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π²ΡΠ΅ Π±ΡΠ»ΠΎ ΡΠ°Π·ΡΠΌΠ½ΠΎ ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠΌ, w
React Redux Tutorial for Beginners: The Complete Guide (2020)
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΡΠ΅Π±Π½ΠΈΠΊ ΠΏΠΎ React Redux, ΠΊΠΎΡΠΎΡΡΠΉ Ρ Ρ ΠΎΡΠ΅Π» Π±Ρ ΠΈΠΌΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Π½Π°ΡΠ°Π» ΡΡΠΈΡΡΡΡ.ΠΠΊΠ»ΡΡΠ°Π΅Ρ Redux Toolkit!
ΠΠΎΠ³Π΄Π° Ρ ΡΠΎΠ»ΡΠΊΠΎ Π½Π°ΡΠ°Π» ΠΈΠ·ΡΡΠ°ΡΡ Redux, Ρ Ρ ΠΎΡΠ΅Π» Π±Ρ ΠΈΠΌΠ΅ΡΡ «Redux Π΄Π»Ρ ΡΠ°ΠΉΠ½ΠΈΠΊΠΎΠ²». Π― ΡΡΠ²ΡΡΠ²ΠΎΠ²Π°Π» ΡΠ΅Π±Ρ ΡΡΠΏΡΠΌ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π½Π΅ ΠΌΠΎΠ³ ΠΎΡΠΌΡΡΠ»ΠΈΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, ΡΠΎΠ·Π΄Π°ΡΠ΅Π»ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ, ΡΠ΅Π΄ΡΠΊΡΠΎΡΡ . ΠΠ°ΠΊ Π½Π°ΡΡΠ΅Ρ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ? Π’Ρ ΠΌΠ΅Π½Ρ ΡΠ°Π·ΡΠ³ΡΡΠ²Π°Π΅ΡΡ!
ΠΡΠ°ΠΊ, Π² ΡΠ΅ Π΄Π½ΠΈ Ρ Π½Π°ΡΠ°Π» ΠΏΡΠ΅ΠΏΠΎΠ΄Π°Π²Π°ΡΡ Redux, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅, ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΡΡΠ΅Π±Π½ΠΈΠΊΠ° ΠΏΠΎ React Redux. Π‘ ΡΠ΅Ρ ΠΏΠΎΡ Ρ ΠΌΠ½ΠΎΠ³ΠΎΠΌΡ Π½Π°ΡΡΠΈΠ»ΡΡ, ΠΈ ΡΡΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ React Redux — ΠΏΠΎΠΏΡΡΠΊΠ° ΠΏΠΎΠΌΠΎΡΡ Π²Π°ΠΌ ΠΈΠ·ΡΡΠΈΡΡ Redux ΡΠ°ΠΌΡΠΌ ΠΏΡΠΎΡΡΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ .
ΠΡΠΎΡ ΡΡΠ΅Π±Π½ΠΈΠΊ ΡΠ°ΠΊΠΆΠ΅ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Redux Toolkit .
Psst .. Cerchi un tutorial Redux in italiano?
ΠΡΠΎΡΡΠΈΡΠ΅ ΡΡΠΎ: Redux, Π³Π΄Π΅ ΠΌΡ ΡΠ΅ΠΉΡΠ°Ρ?
Redux ΡΠΈΠ»ΡΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ» . ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ Redux ΡΡΠ°Π» ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Redux , Π½ΠΎΠ²ΡΠ΅ ΠΊΠΎΠ΄ΠΎΠ²ΡΠ΅ Π±Π°Π·Ρ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠ΅ Π½Π° Π½Π°Π±ΠΎΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Redux, Π±ΡΠ΄ΡΡ ΡΠΈΠ»ΡΠ½ΠΎ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ Π΄Π»Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ Π² ΠΏΡΠΎΡΠ»ΠΎΠΌ.
ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠ½Π΄Π°ΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠΌΠΈ ΡΡΡΠΎΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ Redux ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΡΠ²Π»ΡΡΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ, ΡΠ΅Π΄ΡΠΊΡΠΎΡΠΎΠ², ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ ΠΈ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ° , ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Ρ ΠΎΡΠΎΡΠ΅Π΅ Π·Π½Π°Π½ΠΈΠ΅ ΡΡΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² lego, ΡΡΠΎΠ±Ρ Π²Π»Π°Π΄Π΅ΡΡ Redux ΠΈ Redux toolkit .
Π ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ Ρ ΡΠ½Π°ΡΠ°Π»Π° ΡΠ°ΡΡΠΊΠ°ΠΆΡ ΠΎ Β«ΠΊΠ»Π°ΡΡΠΈΡΠ΅ΡΠΊΠΎΠΌΒ» ΠΊΠΎΠ΄Π΅ Redux, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΎ React / Redux Ρ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΡΡΡ ΠΊ
. ΠΠΎΠ·ΠΆΠ΅ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΠΊΠ°ΠΊ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΡΠ΅ΡΠ°ΠΊΡΠΎΡΠΈΠ½Π³ Π΄ΠΎ Redux Toolkit . ΠΡΠ»ΠΈ Π²Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°Π΅ΡΠ΅ ΡΠΌΠΎΡΡΠ΅ΡΡ Π²ΠΈΠ΄Π΅ΠΎ, ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ , ΡΡΠΎΡ ΠΌΠΎΠΉ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ ΠΊΡΡΡ Redux .
Π ΡΠ΅ΠΏΠ΅ΡΡ Π½Π°ΡΠ»Π°ΠΆΠ΄Π°ΠΉΡΠ΅ΡΡ ΡΡΠ΅Π½ΠΈΠ΅ΠΌ!
Π‘ΠΠΠΠ ΠΠΠΠΠ
Π ΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ
React Redux: Π΄Π»Ρ ΠΊΠΎΠ³ΠΎ ΡΡΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ Π΄Π»Ρ
Π‘Π»Π΅Π΄ΡΡΡΠ΅Π΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ React Redux ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΎ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² JavaScript, Ρ ΠΎΡΠΎΡΠΎ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡΠΈΡ ΡΡ Π² ES6 ΠΈ React .Π ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅ Π΅ΡΡΡ Π±Π΅ΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ² ΠΏΠΎ React, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΎΡΠ²Π΅ΠΆΠΈΡΡ ΡΠ²ΠΎΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅, Π½ΠΎ Π΅ΡΠ»ΠΈ Π²Ρ ΡΠΎΠ»ΡΠΊΠΎ Π½Π°ΡΠΈΠ½Π°Π΅ΡΠ΅, Ρ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Β«ΠΠ°ΡΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΡ Ρ ReactΒ» Π’Π°Π½ΠΈ Π Π°ΡΡΠΈΡ.
Π£ΡΠ΅Π±Π½ΠΈΠΊ
React Redux: ΡΡΠΎ Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅
Π ΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΎΡ Π²Π°ΡΡΠ²Π°Π΅Ρ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ Redux Ρ React ΠΈΠ·-Π·Π° ΡΠΈΡΠΎΠΊΠΎΠ³ΠΎ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΈΡ ΡΡΠΎΠΉ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠΈ, Π½ΠΎ Redux ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΊΠ°ΠΊ Π°Π²ΡΠΎΠ½ΠΎΠΌΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π±Π΅Π· ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ Π²Π½Π΅ΡΠ½Π΅ΠΉ ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΠΈ / Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ.
ΠΡΠ°ΠΊ, ΠΈΠ· ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π° Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅:
- ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Redux
- Π‘ΡΡΠΎΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ Redux
- ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Redux Π°Π²ΡΠΎΠ½ΠΎΠΌΠ½ΠΎ
- ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Redux Ρ React
Π£ΡΠ΅Π±Π½ΠΎΠ΅ ΠΏΠΎΡΠΎΠ±ΠΈΠ΅ ΠΏΠΎ React Redux: ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΡΠ΅Π΄Π° ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ React
ΠΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ Π½Π°ΡΠ°ΡΡ, ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Ρ Π²Π°Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π° ββΡΡΠ΅Π΄Π° ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ React . .
Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡΠΌ ΠΏΠΎ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ React, webpack ΠΈ Babel ΠΈΠ»ΠΈ, ΡΡΠΎ Π΅ΡΠ΅ Π»ΡΡΡΠ΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ create-response-app:
npx create-response-app ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ-redux-tutorial
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ Π·Π°ΠΊΠΎΠ½ΡΠΈΡΠ΅, Π²ΡΠ΅ Π³ΠΎΡΠΎΠ²ΠΎ.
Π£ΡΠ΅Π±Π½ΠΈΠΊ
React Redux: Π² ΠΊΠ°ΠΊΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ?
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Redux ? Π§ΡΠΎΠ±Ρ ΠΎΡΠ²Π΅ΡΠΈΡΡ Π½Π° ΡΡΠΎΡ Π²ΠΎΠΏΡΠΎΡ, ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ½Π°ΡΠ°Π»Π° ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΡΡ ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π² Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ JavaScript . Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΏΠΎΡΠΎΠΊ:
Β«ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Ρ ΠΌΠΎΠ³Ρ ΡΠ΅Π»ΠΊΠ½ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌΒ« ΠΠ°ΠΆΠΌΠΈ ΠΌΠ΅Π½Ρ, ΠΈ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΡΠ²ΠΈΡΡΡΡ Π²ΡΠΊΠΎΡΠ΅ ΠΏΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Β».
Π£Π³Π°Π΄Π°ΠΉΡΠ΅, ΡΡΠΎ, Π΄Π°ΠΆΠ΅ Π² ΡΡΠΎΠΌ ΡΡΠΈΠ²ΠΈΠ°Π»ΡΠ½ΠΎΠΌ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠΈ Π΅ΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ , Ρ ΠΊΠΎΡΠΎΡΡΠΌ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠΌΠ΅ΡΡ Π΄Π΅Π»ΠΎ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠΏΠΈΡΠ°ΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΊΠ°ΠΊ ΠΏΡΠΎΡΡΠΎΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ JavaScript:
const state = {
buttonClicked: 'Π½Π΅Ρ',
modalOpen: 'Π½Π΅Ρ'
}
ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ, ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ, ΠΈ ΠΌΡ ΠΈΠΌΠ΅Π΅ΠΌ:
const state = {
buttonClicked: 'Π΄Π°',
modalOpen: 'Π΄Π°'
}
ΠΠ°ΠΊ Π²Ρ Π½Π°Π΄Π΅ΠΆΠ½ΠΎ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π΅ΡΠ΅ ΡΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ? Π§ΡΠΎ, Π΅ΡΠ»ΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΎ ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎ ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ Π½Π΅ΡΠ²ΡΠ·Π°Π½Π½ΠΎΠΉ Π»ΠΎΠ³ΠΈΠΊΠ΅? ΠΡΡΡ Π»ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΌΠΎΠΆΠ΅Ρ Π½Π°ΠΌ ΠΏΠΎΠΌΠΎΡΡ?
Π’Π°ΠΊΠΆΠ΅, Π΅ΡΠ»ΠΈ Π²Ρ ΡΠ°Π±ΠΎΡΠ°Π»ΠΈ Ρ React Π΄ΠΎ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠ΅ΡΠΌΠΈΠ½ Β«ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅Β» Π²Π°Ρ Π½Π΅ ΡΠ΄ΠΈΠ²ΠΈΡ.ΠΠΎΠ»Π°Π³Π°Ρ, Π²Ρ ΡΠΆΠ΅ Π½Π°ΠΏΠΈΡΠ°Π»ΠΈ Π½Π΅ΠΊΠΈΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ React Ρ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ,
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ React, {ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ} ΠΈΠ· "ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ";
class ExampleComponent ΡΠ°ΡΡΠΈΡΡΠ΅Ρ Component {
constructor (props) {
ΡΡΠΏΠ΅Ρ (ΡΠ΅ΠΊΠ²ΠΈΠ·ΠΈΡ);
this.state = {
ΡΡΠ°ΡΡΠΈ: [
{title: "Π£ΡΠ΅Π±Π½ΠΎΠ΅ ΠΏΠΎΡΠΎΠ±ΠΈΠ΅ ΠΏΠΎ React Redux Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ
", id: 1},
{title: "Π£ΡΠ΅Π±Π½ΠΈΠΊ ΠΏΠΎ TypeScript Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ
", id: 2}
]
};
}
render () {
const {ΡΡΠ°ΡΡΠΈ} = this.state;
return {article.map (el => - {el.title}
)}
;
}
}
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ React Ρ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ — ΡΡΠΎ ΠΊΠ»Π°ΡΡ JavaScript (Ρ Ρ ΡΠΊΠ°ΠΌΠΈ React, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ).
Π ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅ React ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π΄Π°Π½Π½ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½Ρ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ . Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π² React ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡΡ Π² ΠΎΡΠ²Π΅Ρ Π½Π° Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΈ ΡΠΎΠ±ΡΡΠΈΡ : Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ this.setState ()
.
ΠΡΠ°ΠΊ, Π² ΡΠ΅Π»ΠΎΠΌ ΡΠΈΠΏΠΈΡΠ½ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ JavaScript ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ .ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅:
- ΡΡΠΎ Π²ΠΈΠ΄ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ (Π΄Π°Π½Π½ΡΠ΅)
- Π΄Π°Π½Π½ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ ΠΈΠ· API
- URL
- ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π²ΡΠ±ΡΠ°Π½Π½ΡΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅
- Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ ΠΎΡΠΈΠ±ΠΎΠΊ Π΄Π»Ρ ΠΏΠΎΠΊΠ°Π·Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ
ΠΠ·Π½Π°ΠΊΠΎΠΌΠΈΠ²ΡΠΈΡΡ Ρ ΠΎΡΠ½ΠΎΠ²Π°ΠΌΠΈ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ , ΠΊΠ°ΠΊΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΏΡΡΠ°Π΅ΡΡΡ ΡΠ΅ΡΠΈΡΡ Redux .
ΠΠ°ΠΊΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΡΠ΅ΡΠ°Π΅Ρ Redux?
ΠΡΠ°ΠΊ, ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ Π²Π΅Π·Π΄Π΅ Π² Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ . Π‘ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½ΡΠ° Ρ Π±ΡΠ΄Ρ Π³ΠΎΠ²ΠΎΡΠΈΡΡ ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ ΠΈ Π»ΠΎΠ³ΠΈΠΊΠ΅ Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΡΠΈΠΏΠΈΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ React, Π½ΠΎ ΡΡΠΈΡΠ°Π΅Ρ, ΡΡΠΎ ΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌΡ ΠΊ Π»ΡΠ±ΠΎΠΉ Π°ΡΡ ΠΈΡΠ΅ΠΊΡΡΡΠ΅ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° , Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ.ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»ΠΈ Π²Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ, ΠΊΠ°ΠΊΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ?
ΠΠ°ΠΆΠ΅ ΠΏΡΠΎΡΡΠΎΠ΅ ΠΎΠ΄Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠΉΡΠΈ ΠΈΠ·-ΠΏΠΎΠ΄ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π±Π΅Π· ΡΠ΅ΡΠΊΠΈΡ Π³ΡΠ°Π½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ Π²ΡΠ΅ΠΌΠΈ ΡΠ»ΠΎΡΠΌΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ . ΠΡΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π²Π΅ΡΠ½ΠΎ Π² ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠΈ React.
ΠΠ°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ±ΠΎΠΉΡΠΈΡΡ, ΡΠΎΡ ΡΠ°Π½ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅ React (ΠΈΠ»ΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅), ΠΏΠΎΠΊΠ° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌ. Π’ΠΎΠ³Π΄Π° Π²ΡΠ΅ ΡΡΠ°Π½Π΅Ρ ΡΠ»ΠΎΠΆΠ½Π΅Π΅, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΊΠΎΠ³Π΄Π° Π²Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠΉ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ .Π ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ Π² Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ . ΠΠ΅ ΡΠΎΠ»ΡΠΊΠΎ, Ρ Π±Ρ ΡΠΊΠ°Π·Π°Π», ΡΡΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π·Π½Π°ΡΡ ΠΎ Π±ΠΈΠ·Π½Π΅Ρ-Π»ΠΎΠ³ΠΈΠΊΠ΅ . ΠΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ.
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, ΡΠ΅Π³ΠΎΠ΄Π½Ρ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° Π²Π±ΠΈΠ²Π°Π΅ΡΡΡ ΡΠΎΠ½Π½Π° Π»ΠΎΠ³ΠΈΠΊΠΈ . ΠΡΡΡ Π»ΠΈ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π° ΡΡΠΎΠΉ Π°Π³ΠΎΠ½ΠΈΠΈ?
Redux ΠΌΠΎΠΆΠ΅Ρ ΡΠ΅ΡΠΈΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ. ΠΠ½Π°ΡΠ°Π»Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ ΡΡΠ½ΠΎ, Π½ΠΎ Redux ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π΄Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΡΠΎΡΠ½ΡΡ ΡΠ°ΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΎΠ½ Π½ΡΠΆΠ΄Π°Π΅ΡΡΡ. .
ΠΡΠ΅ Π»ΡΡΡΠ΅, Redux ΠΌΠΎΠΆΠ΅Ρ Ρ ΡΠ°Π½ΠΈΡΡ Π±ΠΈΠ·Π½Π΅Ρ-Π»ΠΎΠ³ΠΈΠΊΡ Π²Π½ΡΡΡΠΈ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ (ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ) Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΊΠΎΠ΄ΠΎΠΌ Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠΊΠΈ Π΄Π°Π½Π½ΡΡ . Π£ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π° ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ².
Π ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ°Π·Π΄Π΅Π»Π°Ρ ΠΌΡ ΡΠ²ΠΈΠ΄ΠΈΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΈ ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Redux Π² Π²Π°ΡΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ . Π‘Π½Π°ΡΠ°Π»Π° ΠΏΠ°ΡΡ ΡΠ»ΠΎΠ² ΠΎ ΡΠΈΠΏΠΈΡΠ½ΠΎΠΌ Π²ΠΎΠΏΡΠΎΡΠ΅: Β«Π‘Π»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΌΠ½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ReduxΒ»?
Π£ΡΠ΅Π±Π½ΠΈΠΊ
React Redux: ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Redux?
ΠΠΎΠ»ΠΆΠ΅Π½ ΠΏΡΠΈΠ·Π½Π°ΡΡ Π― Π·Π΄Π΅ΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄Π²Π·ΡΡ , ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΌΠ½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ Redux, ΠΈ Ρ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ Π΅Π³ΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΏΡΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΡΡΡ ΠΊ Π½ΠΎΠ²ΠΎΠΌΡ ΠΏΡΠΎΠ΅ΠΊΡΡ.ΠΠΎ , Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ΅Π½ Π½ΠΈ Redux, Π½ΠΈ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Mobx ΠΈ Π΅Π³ΠΎ Π΄ΡΡΠ·ΡΡ . ΠΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅, Π΅ΡΠ»ΠΈ Π²Ρ ΡΠ°Π±ΠΎΡΠ°Π΅ΡΠ΅ Π½Π°Π΄ ΠΏΡΠΎΡΡΡΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠΌ .
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π² React Π΅ΡΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Redux: Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ΅ΠΊΠ²ΠΈΠ·ΠΈΡΡ, ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΠΉ API .
ΠΠΎ Π΄Π»Ρ ΡΡΠ΅Π΄Π½ΠΈΡ ΠΈ ΠΊΡΡΠΏΠ½ΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² Ρ Π²ΡΠ΅Π³Π΄Π° ΡΡΠΈΡΠ°Π» Redux (ΠΈΠ»ΠΈ Π΅Π³ΠΎ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½Ρ) ΠΏΠΎΡΡΠΈ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΌ: Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΠΎ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π»ΠΎΠ³ΠΈΠΊΡ ΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅, Π°Π±ΡΡΡΠ°Π³ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΎΡ UI . Π’Π΅ΡΡΠΈΡΡΠ΅ΠΌΠΎΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΡΡΡΠ΅ΠΌΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΡΡΠ΅Ρ, Π° Π·Π½Π°ΡΠΈΡ, ΠΏΡΠΎΠ΄ΡΠΊΡΠΈΠ²Π½ΠΎΡΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² — .ΠΡΠ»ΠΈ Π²Ρ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΡΡΠΎ Ρ Π΄ΡΡΠ³ΠΎΠΉ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΎΠ·ΡΠ°Π·ΠΈΡΡ, ΡΡΠΎ Redux ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΡ ΡΠ΅Π½Ρ. ΠΠ½ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π²Π°ΡΠ΅ΠΌΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΡΠΎΠ²Π΅Π½Ρ Π°Π±ΡΡΡΠ°ΠΊΡΠΈΠΈ.
ΠΠ°ΠΊΡΡ ΡΡΠΎΠΈΠΌΠΎΡΡΡ Π²Ρ Π³ΠΎΡΠΎΠ²Ρ Π·Π°ΠΏΠ»Π°ΡΠΈΡΡ? Π‘Π»ΠΎΠΆΠ½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠ²Π½Π΅ΠΉ Π°Π±ΡΡΡΠ°ΠΊΡΠΈΠΉ ?
Π₯Π²Π°ΡΠΈΡ Π³ΠΎΠ²ΠΎΡΠΈΡΡ. Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΌΡ Π½Π°ΡΠ½Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π΄ΠΎΠΊΠ°Π·Π°ΡΠ΅Π»ΡΡΡΠ²ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ, ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ:
- ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ Redux
- Redux Π²ΠΌΠ΅ΡΡΠ΅ Ρ React
ΠΠΏΡΡΡ ΠΆΠ΅, ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Ρ Π²Π°Ρ Π΅ΡΡΡ ΡΡΠ΅Π΄Π° ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ React, Π³ΠΎΡΠΎΠ²Π°Ρ ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ .
Π£ΡΠ΅Π±Π½ΠΈΠΊ
React Redux: Π·Π½Π°ΠΊΠΎΠΌΡΡΠ²ΠΎ Ρ ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠΌ Redux
ΠΠΎΠ³Π΄Π° Ρ Π²ΠΏΠ΅ΡΠ²ΡΠ΅ ΠΎΠ±ΡΠ°ΡΠΈΠ»ΡΡ ΠΊ Redux, Ρ Π±ΡΠ» ΡΠ±ΠΈΡ Ρ ΡΠΎΠ»ΠΊΡ. Π‘Π»ΠΈΡΠΊΠΎΠΌ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΅ΡΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΠΈ: Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ , ΡΠ΅Π΄ΡΠΊΡΠΎΡ, ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ . ΠΠΎ ΠΏΠΎΠΌΠΈΠΌΠΎ ΡΡΠΎΠ³ΠΎ ΠΌΠ½Π΅ Π±ΡΠ»ΠΎ Π½Π΅ΠΏΠΎΠ½ΡΡΠ½ΠΎ, ΠΊΠ°ΠΊ Π±ΡΠ»ΠΈ ΡΠΊΠ»Π΅Π΅Π½Ρ Π²ΡΠ΅ Π΄Π²ΠΈΠΆΡΡΠΈΠ΅ΡΡ ΡΠ°ΡΡΠΈ ? ΠΡΠ»ΠΈ ΠΊΠ°ΠΊΠΈΠ΅-ΡΠΎ ΠΌΠΈΠ½ΡΠΎΠ½Ρ ΡΡΠΎ Π»ΠΈ? Π Redux Π½Π΅Ρ ΠΌΠΈΠ½ΡΠΎΠ½ΠΎΠ² (ΠΊ ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ) .
Π’ΠΎ, ΡΡΠΎ ΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π²ΡΠ΅ΠΌΠΈ Π²ΠΈΠ½ΡΠΈΠΊΠ°ΠΌΠΈ, — ΡΡΠΎ ΠΌΠ°Π³Π°Π·ΠΈΠ½ . ΠΠΎΠ²ΡΠΎΡΠΈΡΠ΅ ΡΠΎ ΠΌΠ½ΠΎΠΉ: Π² ΠΌΠ°Π³Π°Π·ΠΈΠ½Π΅ .Π₯ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ Π² Redux — ΡΡΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄Π° Π²ΠΎΠ»ΡΠ΅Π±ΡΡΠ²ΠΎ, ΠΈ Ρ ΡΠ°Π½ΠΈΡ Π²ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΡΠ°ΠΊ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΌΠ°Π³Π°Π·ΠΈΠ½ , ΡΡΠΎΠ±Ρ Π½Π°ΡΠ°ΡΡ ΠΈΠ³ΡΠ°ΡΡ Ρ Redux. ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² ΡΡΠ΅Π΄Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ React ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Redux:
ΠΊΠΎΠΌΠΏΠ°ΠΊΡ-Π΄ΠΈΡΠΊ React-redux-tutorial
npm Ρ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ --save-dev
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ Π΄Π»Ρ ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°:
ΠΠ°ΡΠ΅ΠΌ ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½ΠΎΠ²ΡΠΉ ΡΠ°ΠΉΠ» src / js / store / index.js ΠΈ ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΡΠΉΡΠ΅ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅:
import {createStore} ΠΈΠ· "redux";
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ rootReducer ΠΈΠ· "../reducers/index ";
const store = createStore (rootReducer);
ΡΠΊΡΠΏΠΎΡΡ ΠΌΠ°Π³Π°Π·ΠΈΠ½Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ;
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠΌ Π²ΡΠ·ΠΎΠ²Π° createStore , ΡΡΠ½ΠΊΡΠΈΠΈ ΠΈΠ· Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Redux. createStore ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠ° ΡΠ΅Π΄ΡΠΊΡΠΎΡ, ΠΈ Π² Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π»ΠΈ rootReducer (Π΅ΡΠ΅ Π½Π΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π½ΡΠΉ).
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π² createStore , ΡΡΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° Π½Π° ΡΡΠΎΡΠΎΠ½Π΅ ΡΠ΅ΡΠ²Π΅ΡΠ° ΠΈ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ , Π½ΠΎ ΠΏΠΎΠΊΠ° Π½Π°Ρ ΡΡΠΎ Π½Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΠ΅Ρ.Π‘Π°ΠΌΠ°Ρ Π²Π°ΠΆΠ½Π°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ, ΠΊΠΎΡΠΎΡΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ½ΡΡΡ, Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π² Redux ΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΎΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠΎΠ² . ΠΠΎΠ²ΡΠΎΡΠΈΠΌΡΡ: ΡΠ΅Π΄ΡΠΊΡΠΎΡΠΎΠ² ΡΠΎΡΠΌΠΈΡΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ .
ΠΠΎΠΎΡΡΠΆΠΈΠ²ΡΠΈΡΡ ΡΡΠΈΠΌΠΈ Π·Π½Π°Π½ΠΈΡΠΌΠΈ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ , Π½Π°ΡΠ΅ΠΌΡ ΠΏΠ΅ΡΠ²ΠΎΠΌΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡΡ Redux .
Π‘ΠΌΠΎΡΡΠΈΡΠ΅ Π²Π΅ΡΠΊΡ Π½Π° Github
React Redux tutorial: Π·Π½Π°ΠΊΠΎΠΌΡΡΠ²ΠΎ Ρ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ°ΠΌΠΈ Redux
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΡΠ΅Π΄ΡΠΊΡΠΎΡ? Π Π΅Π΄ΡΠΊΡΠΎΡ Redux — ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΡ JavaScript . ΠΠ½ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π΄Π²Π° ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° : ΡΠ΅ΠΊΡΡΠ΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ (ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΡ ΡΠΊΠΎΡΠΎ).
Π ΡΠΈΠΏΠΈΡΠ½ΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅ React Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΎ Π½Π° ΠΌΠ΅ΡΡΠ΅. Π Redux ΡΡΠΎΠ³ΠΎ Π΄Π΅Π»Π°ΡΡ Π½Π΅Π»ΡΠ·Ρ. Π’ΡΠ΅ΡΠΈΠΉ ΠΏΡΠΈΠ½ΡΠΈΠΏ Redux (ΠΈΠ·Π»ΠΎΠΆΠ΅Π½Π½ΡΠΉ Π΅Π³ΠΎ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Π΅ΠΌ) ΠΏΡΠ΅Π΄ΠΏΠΈΡΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½ΡΠΌ ΠΈ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡΡ Π½Π° ΠΌΠ΅ΡΡΠ΅ .
ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ ΡΠ΅Π΄ΡΠΊΡΠΎΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΡΠΈΡΡΡΠΌ. Π§ΠΈΡΡΠ°Ρ ΡΡΠ½ΠΊΡΠΈΡ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅ Π²ΡΠ²ΠΎΠ΄ Π΄Π»Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π²Π²ΠΎΠ΄Π°. ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΡΡ ΡΠ΅ΡΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΡ , ΡΠ°ΡΡΡΠΆΠ΄Π°ΡΡ ΠΎ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ΅ Π½Π΅ ΡΠ°ΠΊ ΡΠΆ ΡΠ»ΠΎΠΆΠ½ΠΎ .
Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠ΅Π΄ΡΠΊΡΠΎΡ , ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ².Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ Π΄Π»Ρ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ°:
ΠΠ°ΡΠ΅ΠΌ ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½ΠΎΠ²ΡΠΉ ΡΠ°ΠΉΠ», src / js / reducers / index.js :
const initialState = {
ΡΡΠ°ΡΡΠΈ: []
};
function rootReducer (state = initialState, action) {
Π²Π΅ΡΠ½ΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅;
};
ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ rootReducer ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ;
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠΎ Ρ ΡΠ΅ΠΏΠ΅ΡΡ Π½Π°Ρ ΡΠ΅Π΄ΡΠΊΡΠΎΡ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ Π΄Π΅Π»Π°Π΅Ρ, ΠΊΡΠΎΠΌΠ΅ Π²ΠΎΠ·Π²ΡΠ°ΡΠ° ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ .
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π² ΠΌΠΈΠΊΡ ΡΠΊΡΠ΅Π½ , ΠΈ Π²ΡΠ΅ ΡΡΠ°Π½Π΅Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ.
Π‘ΠΌΠΎΡΡΠΈΡΠ΅ Π²Π΅ΡΠΊΡ Π½Π° Github
React Redux tutorial: Π·Π½Π°ΠΊΠΎΠΌΡΡΠ²ΠΎ Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠΌΠΈ Redux ΠΈ ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΠΊΠΎΠ½ΡΡΠ°Π½ΡΠ°ΠΌΠΈ
Π Π΅Π΄ΡΠΊΡΠΎΡΡ
Redux, Π±Π΅Π· ΡΠΎΠΌΠ½Π΅Π½ΠΈΡ, ΡΠ°ΠΌΠ°Ρ Π²Π°ΠΆΠ½Π°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ Redux. Π Π΅Π΄ΡΠΊΡΠΎΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠΎ ΠΊΠ°ΠΊ ΡΠ΅Π΄ΡΠΊΡΠΎΡ ΡΠ·Π½Π°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° Π½ΡΠΆΠ½ΠΎ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅?
ΠΡΠΎΡΠΎΠΉ ΠΏΡΠΈΠ½ΡΠΈΠΏ Redux Π³Π»Π°ΡΠΈΡ, ΡΡΠΎ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ — ΡΡΠΎ ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ ΡΠΈΠ³Π½Π°Π» Π² Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅. ΠΡΠΎΡ ΡΠΈΠ³Π½Π°Π» — Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ .ΠΡΠ°ΠΊ, Β« ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Β» ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΈΠ³Π½Π°Π» Π² ΠΌΠ°Π³Π°Π·ΠΈΠ½.
ΠΠ°ΠΏΡΡΠ°Π»ΠΈΡΡ? ΠΠ±Π½Π°Π΄Π΅ΠΆΠΈΠ²Π°Π΅Ρ ΡΠΎ, ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Redux — ΡΡΠΎ Π½Π΅ ΡΡΠΎ ΠΈΠ½ΠΎΠ΅, ΠΊΠ°ΠΊ ΠΎΠ±ΡΠ΅ΠΊΡΡ JavaScript . Π’Π°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅:
{
ΡΠΈΠΏ: 'ADD_ARTICLE',
ΠΏΠΎΠ»Π΅Π·Π½Π°Ρ Π½Π°Π³ΡΡΠ·ΠΊΠ°: {title: 'React Redux Tutorial', id: 1}
}
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΠΎΠ±ΡΠ΅ΠΊΡ JavaScript Ρ Π΄Π²ΡΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ: ΡΠΈΠΏ ΠΈ ΠΏΠΎΠ»Π΅Π·Π½Π°Ρ Π½Π°Π³ΡΡΠ·ΠΊΠ° .
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ type ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, ΠΈ ΠΎΠ½ΠΎ Π²ΡΠ΅Π³Π΄Π° ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Redux.ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ payload ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ, ΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΠΏΡΡΠ΅Π½ΠΎ , Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π½Π΅Ρ Π½ΠΎΠ²ΡΡ Π΄Π°Π½Π½ΡΡ Π΄Π»Ρ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΡ Π² ΠΌΠ°Π³Π°Π·ΠΈΠ½Π΅.
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠ΅ΡΠ΅Π΄ΠΎΠ²ΠΎΠΉ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΈ Π² Redux ΠΌΡ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΠΌ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π² ΡΡΠ½ΠΊΡΠΈΡ , ΡΠ°ΠΊ ΡΡΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΠ° Π°Π±ΡΡΡΠ°Π³ΠΈΡΡΠ΅ΡΡΡ. Π’Π°ΠΊΠ°Ρ ΡΡΠ½ΠΊΡΠΈΡ ΠΏΠΎΠ»ΡΡΠΈΠ»Π° Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ : Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠΎΠ±Π΅ΡΠ΅ΠΌ Π²ΡΠ΅ Π²ΠΌΠ΅ΡΡΠ΅, ΡΠΎΠ·Π΄Π°Π² ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ.
Π‘ΠΎΠ·Π΄Π°ΡΡ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ Π΄Π»Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ:
ΠΠ°ΡΠ΅ΠΌ ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½ΠΎΠ²ΡΠΉ ΡΠ°ΠΉΠ» src / js / actions / index.js :
ΡΡΠ½ΠΊΡΠΈΡ ΡΠΊΡΠΏΠΎΡΡΠ° addArticle (payload) {
Π²Π΅ΡΠ½ΡΡΡ {ΡΠΈΠΏ: "ADD_ARTICLE", ΠΏΠΎΠ»Π΅Π·Π½Π°Ρ Π½Π°Π³ΡΡΠ·ΠΊΠ°}
};
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ type ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΡΠΎΠΊΠΎΠΉ. Π‘ΡΡΠΎΠΊΠΈ ΠΏΠΎΠ΄Π²Π΅ΡΠΆΠ΅Π½Ρ ΠΎΠΏΠ΅ΡΠ°ΡΠΊΠ°ΠΌ ΠΈ Π΄ΡΠ±Π»ΠΈΡΡΡΡ , ΠΏΠΎΡΡΠΎΠΌΡ Π»ΡΡΡΠ΅ ΠΎΠ±ΡΡΠ²Π»ΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΊΠ°ΠΊ ΠΊΠΎΠ½ΡΡΠ°Π½ΡΡ . Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π΄Π»Ρ Π½ΠΈΡ Π½ΠΎΠ²ΡΡ ΠΏΠ°ΠΏΠΊΡ:
mkdir -p src / js / ΠΊΠΎΠ½ΡΡΠ°Π½ΡΡ
ΠΠ°ΡΠ΅ΠΌ ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½ΠΎΠ²ΡΠΉ ΡΠ°ΠΉΠ», src / js / constants / action-types.js :
ΡΠΊΡΠΏΠΎΡΡΠ½Π°Ρ ΠΊΠΎΠ½ΡΡΠ°Π½ΡΠ° ADD_ARTICLE = "ADD_ARTICLE";
Π’Π΅ΠΏΠ΅ΡΡ ΠΎΡΠΊΡΠΎΠΉΡΠ΅ ΡΠ½ΠΎΠ²Π° src / js / actions / index.js ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΈΠΏΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ:
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {ADD_ARTICLE} ΠΈΠ· "../constants/action-types";
ΡΡΠ½ΠΊΡΠΈΡ ΡΠΊΡΠΏΠΎΡΡΠ° addArticle (payload) {
Π²Π΅ΡΠ½ΡΡΡ {ΡΠΈΠΏ: ADD_ARTICLE, ΠΏΠΎΠ»Π΅Π·Π½Π°Ρ Π½Π°Π³ΡΡΠ·ΠΊΠ°};
}
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, ΠΌΡ Π½Π°ΡΠΈΠ½Π°Π΅ΠΌ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ. ΠΡΠΎ Π³Π»Π°Π²Π½Π°Ρ Π½Π΅ΠΏΡΠΈΡΡΠ½ΠΎΡΡΡ Redux Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° Π»ΡΠ΄Π΅ΠΉ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ ΡΠΎΠ³Π»Π°ΡΠ΅Π½ΠΈΡ Redux duck, Π΅ΡΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅, ΠΎΠ½ΠΎ Ρ ΡΠ°Π½ΠΈΡ Π²ΡΠ΅ ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ Redux ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅.
ΠΠ° ΠΎΠ΄ΠΈΠ½ ΡΠ°Π³ Π±Π»ΠΈΠΆΠ΅ ΠΊ ΡΠ°Π±ΠΎΡΠ΅ΠΌΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Redux, Π½ΠΎ Π΄Π»Ρ ΡΠ½Π°ΡΠ°Π»Π° Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡ Π΄Π»Ρ ΡΠ»Π°Π²Π»ΠΈΠ²Π°Π½ΠΈΡ Π½ΠΎΠ²ΠΎΠ³ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ .
Π‘ΠΌΠΎΡΡΠΈΡΠ΅ Π²Π΅ΡΠΊΡ Π½Π° Github
Π Π΅ΡΠ°ΠΊΡΠΎΡΠΈΠ½Π³ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ°
ΠΡ ΠΎΡΡΠ°Π²ΠΈΠ»ΠΈ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΠ°Π·Π΄Π΅Π» ΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ Π²ΠΎΠΏΡΠΎΡΠΎΠΌ: ΠΊΠ°ΠΊ ΡΠ΅Π΄ΡΠΊΡΠΎΡ ΡΠ·Π½Π°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ? ΠΠ»ΡΡΠ΅Π²ΡΠΌ ΠΌΠΎΠΌΠ΅Π½ΡΠΎΠΌ Π·Π΄Π΅ΡΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΌΠ°Π³Π°Π·ΠΈΠ½ Redux. ΠΠΎΠ³Π΄Π° Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΎΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ, Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ ΠΏΠ΅ΡΠ΅ΡΡΠ»Π°Π΅Ρ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ (ΠΎΠ±ΡΠ΅ΠΊΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ) ΡΠ΅Π΄ΡΠΊΡΠΎΡΡ .
Π ΡΡΠΎΡ ΠΌΠΎΠΌΠ΅Π½Ρ ΡΠ΅Π΄ΡΠΊΡΠΎΡ Π³ΠΎΠ²ΠΎΡΠΈΡ: Β«Π, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ type ΡΡΠΎΠ³ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΒ». ΠΠ°ΡΠ΅ΠΌ , Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΠΏΠ° Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, ΡΠ΅Π΄ΡΠΊΡΠΎΡ ΡΠΎΠ·Π΄Π°Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ , Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ ΠΏΠΎΠ»Π΅Π·Π½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π² Π½ΠΎΠ²ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅.
Π Π°Π½Π΅Π΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΠ΅Π΄ΡΠΊΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ Π΄Π΅Π»Π°Π΅Ρ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΈΡΠΏΡΠ°Π²ΠΈΠΌ! ΠΡΠΊΡΠΎΠΉΡΠ΅ src / js / reducers / index.js ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅ reducer Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡΠ° if Π΄Π»Ρ , ΠΏΡΠΎΠ²Π΅ΡΡΡ ΡΠΈΠΏ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ :
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {ADD_ARTICLE} ΠΈΠ· "../constants/action-types";
const initialState = {
ΡΡΠ°ΡΡΠΈ: []
};
function rootReducer (state = initialState, action) {
if (action.type === ADD_ARTICLE) {
state.articles.push (Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅.payload);
}
Π²Π΅ΡΠ½ΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅;
}
ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ rootReducer ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ;
Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡΡ ΡΡΡΠΎΠΊΠ° ΠΊΠΎΠ΄Π°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΠΈΡ ΠΏΠΎΠ»Π΅Π·Π½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π² Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ .ΠΠ°ΠΆΠ΅ΡΡΡ, ΠΏΠΎΡΡΡΠΏΠΈΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ. ΠΠΎ ΡΡΠΎ ΠΆΠ΅ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ! ΠΠ°Ρ ΡΠ΅Π΄ΡΠΊΡΠΎΡ Π½Π°ΡΡΡΠ°Π΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΏΡΠΈΠ½ΡΠΈΠΏ Redux: Π½Π΅ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌΠΎΡΡΡ .
Array.prototype.push
— ΡΡΠΎ Π½Π΅ΡΠΈΡΡΠ°Ρ ΡΡΠ½ΠΊΡΠΈΡ : ΠΎΠ½Π° ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΌΠ°ΡΡΠΈΠ². ΠΠΎ ΡΡΠΎ Π΅ΡΠ΅ Π½Π΅ Π²ΡΠ΅. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π½Π° ΠΌΠ΅ΡΡΠ΅.
ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ. Π‘Π½Π°ΡΠ°Π»Π° ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π²Π΅ΡΠ½ΡΡΡ Π½ΠΎΠ²ΡΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ JavaScript Ρ Object.assign
. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΌΡ ΡΠΎΡ
ΡΠ°Π½ΡΠ΅ΠΌ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ. ΠΠ°ΡΠ΅ΠΌ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ°ΡΡΠΈΠ² .prototype.concat
Π²ΠΌΠ΅ΡΡΠΎ Array.prototype.push
Π΄Π»Ρ ΡΠΎΡ
ΡΠ°Π½Π΅Π½ΠΈΡ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΌΠ°ΡΡΠΈΠ²Π°:
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {ADD_ARTICLE} ΠΈΠ· "../constants/action-types";
const initialState = {
ΡΡΠ°ΡΡΠΈ: []
};
function rootReducer (state = initialState, action) {
if (action.type === ADD_ARTICLE) {
return Object.assign ({}, ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, {
ΡΡΠ°ΡΡΠΈ: state.articles.concat (action.payload)
});
}
Π²Π΅ΡΠ½ΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅;
}
ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ rootReducer ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ;
Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΡΡΠ°Π»ΠΎΡΡ Π½Π΅ΡΡΠΎΠ½ΡΡΡΠΌ, ΠΈ ΡΠ΅Π·ΡΠ»ΡΡΠΈΡΡΡΡΠ΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΎΡΡΠΎ ΠΊΠΎΠΏΠΈΠ΅ΠΉ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ .ΠΠ°ΠΏΠΎΠΌΠ½ΠΈΡΠ΅ Π΄Π²Π° ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΌΠΎΠΌΠ΅Π½ΡΠ° Π΄Π»Ρ , ΠΈΠ·Π±Π΅Π³Π°Ρ ΠΌΡΡΠ°ΡΠΈΠΉ Π² Redux :
- ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡ concat, slice ΠΈΠ»ΠΈ spread Π΄Π»Ρ ΠΌΠ°ΡΡΠΈΠ²ΠΎΠ²
- ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅
Object.assign
ΠΈΠ»ΠΈ ΠΎΠ±ΡΠ΅ΠΊΡ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ²
ΠΡΠ»ΠΈ ΡΡΠΎΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π» ΠΎ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½ΠΎΡΡΠΈ ΠΊΠ°ΠΆΠ΅ΡΡΡ Π²Π°ΠΌ ΡΠ°Π±Π»ΠΎΠ½Π½ΡΠΌ, ΡΡΠ°ΡΡΠΎΠ²ΡΠΉ ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡ redux ΡΠ΅ΡΠΈΠ» ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ. ΠΠ·Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π° Π½Π΅Π³ΠΎ, ΠΊΠΎΠ³Π΄Π° Π·Π°ΠΊΠΎΠ½ΡΠΈΡΠ΅ ΡΡΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΌΡ ΠΏΠΎΠΈΠ³ΡΠ°Π΅ΠΌ Ρ Redux ΠΈΠ· ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ° . ΠΠ΅ΡΠΆΠΈΡΡ ΠΊΡΠ΅ΠΏΡΠ΅!
Π‘ΠΌΠΎΡΡΠΈΡΠ΅ Π²Π΅ΡΠΊΡ Π½Π° Github
Π£ΡΠ΅Π±Π½ΠΎΠ΅ ΠΏΠΎΡΠΎΠ±ΠΈΠ΅ ΠΏΠΎ React Redux: ΠΌΠ΅ΡΠΎΠ΄Ρ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ° Redux
ΠΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΎΡΠ΅Π½Ρ Π±ΡΡΡΡΠΎ, ΠΎΠ±Π΅ΡΠ°Ρ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π±ΡΡΡ ΡΠ΄ΠΈΠ²Π»Π΅Π½Ρ, ΡΠ·Π½Π°Π², ΡΡΠΎ ΡΠ°ΠΌ Redux ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Π½Π΅Π±ΠΎΠ»ΡΡΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ (2 ΠΠ), Π° Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ — ΡΡΠΎ Π²ΡΠ΅Π³ΠΎ ΡΡΠΈ :
- getState Π΄Π»Ρ ΡΡΠ΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ
- ΠΎΡΠΏΡΠ°Π²ΠΊΠ° Π΄Π»Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ Π°ΠΊΡΠΈΠΈ
- ΠΏΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° Π΄Π»Ρ ΠΏΡΠΎΡΠ»ΡΡΠΈΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
ΠΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΠ³ΡΠ°ΡΡ Ρ Π½ΠΈΠΌΠΈ Π² ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ ΠΈ ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ΅ Π½Π°ΠΌΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΊΠ°ΠΊ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅.Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½ΠΎΠ²ΡΠΉ ΡΠ°ΠΉΠ» Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ src / js / index.js ΠΈ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ ΡΡΠ΄Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
ΠΈΠΌΠΏΠΎΡΡΠ½ΡΠΉ ΠΌΠ°Π³Π°Π·ΠΈΠ½ ΠΈΠ· "../js/store/index";
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {addArticle} ΠΈΠ· "../js/actions/index";
window.store = ΠΌΠ°Π³Π°Π·ΠΈΠ½;
window.addArticle = addArticle;
Π’Π΅ΠΏΠ΅ΡΡ ΠΎΡΠΊΡΠΎΠΉΡΠ΅ src / index.js , ΠΎΡΠΈΡΡΠΈΡΠ΅ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅ Π΅Π³ΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
ΠΈΠ½Π΄Π΅ΠΊΡ ΠΈΠΌΠΏΠΎΡΡΠ° ΠΈΠ· "./js/index";
Π’Π΅ΠΏΠ΅ΡΡ Π·Π°ΠΏΡΡΡΠΈΡΠ΅ ΡΠ΅ΡΠ²Π΅Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Ρ:
ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΠΏΠΎ Π°Π΄ΡΠ΅ΡΡ http: // localhost: 3000 / ΠΈ ΠΎΡΠΊΡΠΎΠΉΡΠ΅ ΠΊΠΎΠ½ΡΠΎΠ»Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ F12.ΠΠ°ΡΠ½ΠΈΡΠ΅ Ρ , ΡΡΠΈΡΡΠ²Π°Ρ ΡΠ΅ΠΊΡΡΠ΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ :
ΠΠΎΠ»Ρ ΡΡΠ°ΡΠ΅ΠΉ. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΌΡ Π΅ΡΠ΅ Π½Π΅ ΠΎΠ±Π½ΠΎΠ²ΠΈΠ»ΠΈ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅. Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π΅ΡΠΈ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌΠΈ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠΎΡΠ»ΡΡΠΈΠ²Π°ΡΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ .
ΠΠ΅ΡΠΎΠ΄ ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΠΎΠ±ΡΠ°ΡΠ½ΡΠΉ Π²ΡΠ·ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ Π²ΡΡΠΊΠΈΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅. ΠΡΠΏΡΠ°Π²ΠΊΠ° Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΌΠ°Π³Π°Π·ΠΈΠ½Π° ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΌΡ Π½Π°ΠΌΠ΅ΡΠ΅Π½Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅.
ΠΠ°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠΉΡΠ΅ ΠΎΠ±ΡΠ°ΡΠ½ΡΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ:
store.subscribe (() => console.log ('Π‘ΠΌΠΎΡΡΠΈ, ΠΌΠ°ΠΌΠ°, Redux !!'));
Π§ΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π² Redux, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ . Π§ΡΠΎΠ±Ρ ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅, ΠΌΡ Π²ΡΠ·ΠΎΠ²Π΅ΠΌ ΠΌΠ΅ΡΠΎΠ΄ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ. ΠΠ° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Ρ Π½Π°Ρ Π΅ΡΡΡ ΠΎΠ΄Π½ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅: addArticle Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅. ΠΡΠΏΡΠ°Π²ΠΈΠΌ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ:
store.dispatch (addArticle ({title: 'Π£ΡΠ΅Π±Π½ΠΎΠ΅ ΠΏΠΎΡΠΎΠ±ΠΈΠ΅ ΠΏΠΎ React Redux Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ
', id: 1}));
Π‘ΡΠ°Π·Ρ ΠΏΠΎΡΠ»Π΅ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ Π²ΡΡΠ΅ ΠΊΠΎΠ΄Π° Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Β«Π‘ΠΌΠΎΡΡΠΈ ΠΌΠ°, Redux !!Β». Π§ΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΎΡΡ, Π·Π°ΠΏΡΡΡΠΈΡΠ΅ ΡΠ½ΠΎΠ²Π°:
ΠΠΎΡ ΠΈ Π²ΡΠ΅. ΠΡΠΎ Redux Π² ΡΠ°ΠΌΠΎΠΌ ΠΏΡΠΎΡΡΠΎΠΌ Π²ΠΈΠ΄Π΅. ΠΡΠΎ Π±ΡΠ»ΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ?
ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ ΠΏΠΎΡΡΠ²ΡΡΠ²ΡΠ΅ΡΠ΅ ΡΠ΅Π±Ρ ΡΠ²Π΅ΡΠ΅Π½Π½ΠΎ, ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡΠ΅ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΡΠ°Π·Π΄Π΅Π»Π°ΠΌ. ΠΡ ΡΡΠ°Π·Ρ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ , ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΠ² React ΠΊ Redux !
Π£ΡΠ΅Π±Π½ΠΈΠΊ
React Redux: ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ React Ρ Redux
ΠΠ·ΡΡΠΈΠ² Redux, Ρ ΠΏΠΎΠ½ΡΠ», ΡΡΠΎ ΡΡΠΎ Π½Π΅ ΡΠ°ΠΊ ΡΠΆ ΠΈ ΡΠ»ΠΎΠΆΠ½ΠΎ. Π― Π·Π½Π°Π», ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ ΡΠ΅ΠΊΡΡΠ΅ΠΌΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ getState. Π― Π·Π½Π°Π», ΠΊΠ°ΠΊ ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ ΠΈ ΠΊΠ°ΠΊ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ.
ΠΠΎ Ρ Π½Π΅ Π·Π½Π°Π», ΠΊΠ°ΠΊ ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡΡ Π²ΠΌΠ΅ΡΡΠ΅ React ΠΈ Redux.Π― ΡΠΏΡΠ°ΡΠΈΠ²Π°Π» ΡΠ΅Π±Ρ: ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ Π²ΡΠ·ΡΠ²Π°ΡΡ getState ΠΈΠ· React? ΠΠ°ΠΊ ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΈΠ· ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° React? Π ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅.
Redux Π½Π΅ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΏΠ»Π°ΡΡΠΎΡΠΌΡ . ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Ρ Π²Π°Π½ΠΈΠ»ΡΠ½ΡΠΌ Javascript. ΠΠ»ΠΈ Ρ Angular. ΠΠ»ΠΈ Ρ React. ΠΡΡΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ Π΄Π»Ρ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ Redux Ρ Π²Π°ΡΠΈΠΌ Π»ΡΠ±ΠΈΠΌΡΠΌ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠΌ / Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ.
ΠΠ»Ρ React ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ react-redux , Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π²ΡΡΡΠΈΡΡ Π²ΡΠ΅Π³ΠΎ ΠΎΠ΄ΠΈΠ½ ΠΌΠ΅ΡΠΎΠ΄: ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ . Π§ΡΠΎ ΠΎΠ½ΠΎ Π΄Π΅Π»Π°Π΅Ρ? ΠΠ΅ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΡΡΠΎ ΡΠ²ΡΠ·ΡΠ²Π°Π΅Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ React Ρ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ΠΌ Redux .
ΠΡ Π±ΡΠ΄Π΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ connect Ρ Π΄Π²ΡΠΌΡ ΠΈΠ»ΠΈ ΡΡΠ΅ΠΌΡ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π²Π°ΡΠΈΠ°Π½ΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ:
- a ΡΡΠ½ΠΊΡΠΈΡ mapStateToProps (Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°Π·Π²Π°ΡΡ Π΅Π΅ ΡΠ°ΠΊΠΆΠ΅ «select»)
- a mapDispatchToProps ΡΡΠ½ΠΊΡΠΈΡ
mapStateToProps Π΄Π΅Π»Π°Π΅Ρ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠΎ, ΡΡΠΎ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ Π΅Π³ΠΎ Π½Π°Π·Π²Π°Π½ΠΈΠ΅: ΠΎΠ½ ΡΠΎΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ ΡΠ°ΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Redux Ρ ΡΠ΅ΠΊΠ²ΠΈΠ·ΠΈΡΠ°ΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° React. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ React ΠΏΠΎΠ»ΡΡΠΈΡ Π΄ΠΎΡΡΡΠΏ ΠΊ ΡΠΎΡΠ½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°, ΠΊΠΎΡΠΎΡΠ°Ρ Π΅ΠΌΡ Π½ΡΠΆΠ½Π° .
mapDispatchToProps Π΄Π΅Π»Π°Π΅Ρ Π½Π΅ΡΡΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅, Π½ΠΎ Π΄Π»Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ. mapDispatchToProps ΡΠ²ΡΠ·ΡΠ²Π°Π΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Redux Ρ ΡΠ΅ΠΊΠ²ΠΈΠ·ΠΈΡΠ°ΠΌΠΈ React . Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ React ΡΠΌΠΎΠΆΠ΅Ρ ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ Π² ΠΌΠ°Π³Π°Π·ΠΈΠ½ .
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΌΡ, Π½Π°ΠΊΠΎΠ½Π΅Ρ, Π·Π°ΠΏΠ°ΡΠΊΠ°Π΅ΠΌ ΡΡΠΊΠΈ. ΠΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΡΠ²Π΅ΡΡ ΠΏΡΠΎΡΡΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ· ΡΡΠ΅Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ²:
- ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ
- ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ «Π‘ΠΏΠΈΡΠΎΠΊ» Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΡΠ°ΡΠ΅ΠΉ
- ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΡΠΎΡΠΌΡ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π½ΠΎΠ²ΡΡ ΡΡΠ°ΡΠ΅ΠΉ
Π£ΡΠ΅Π±Π½ΠΎΠ΅ ΠΏΠΎΡΠΎΠ±ΠΈΠ΅ ΠΏΠΎ React Redux: ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ Redux
ΠΠ΅ΡΠ΅Π΄ Π·Π°ΠΏΡΡΠΊΠΎΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ react-redux Ρ:
npm Ρ ΡΠ΅Π°Π³ΠΈΡΡΡ-redux --save-dev
Π― ΡΠΊΠ°Π·Π°Π», ΡΡΠΎ mapStateToProps ΡΠ²ΡΠ·ΡΠ²Π°Π΅Ρ ΡΠ°ΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Redux Ρ ΡΠ΅ΠΊΠ²ΠΈΠ·ΠΈΡΠ°ΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° React.ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π΄Π°ΡΡΡΡ Π²ΠΎΠΏΡΠΎΡΠΎΠΌ: Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π»ΠΈ ΡΡΠΎΠ³ΠΎ Π΄Π»Ρ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ Redux Ρ React ? ΠΠ΅Ρ, ΡΡΠΎ Π½Π΅ ΡΠ°ΠΊ. ΠΠ°ΠΌ ΡΠ°ΠΊΠΆΠ΅ Π½ΡΠΆΠ΅Π½ ΠΏΡΠΎΠ²Π°ΠΉΠ΄Π΅Ρ , Π²ΡΡΠΎΠΊΠΎΡΡΠΎΠ²Π½Π΅Π²ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΈΠ· react-redux .
ΠΡΠΊΡΠΎΠΉΡΠ΅ src / index.js , ΡΠ΄Π°Π»ΠΈΡΠ΅ Π²ΡΠ΅ ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ°ΠΉΠ» ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ:
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ React ΠΈΠ· "react";
import {render} ΠΈΠ· "react-dom";
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {Provider} ΠΈΠ· "react-redux";
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΌΠ°Π³Π°Π·ΠΈΠ½ ΠΈΠ· "./js/store/index";
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ· "./js/components/App";
Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ (
<ΠΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ />
,
Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ.getElementById ("ΠΊΠΎΡΠ΅Π½Ρ")
);
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, Provider Π·Π°Π²Π΅ΡΡΠ°Π΅Ρ Π²Π°ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ React ΠΈ ΡΠΎΠΎΠ±ΡΠ°Π΅Ρ Π΅ΠΌΡ ΠΎΠ±ΠΎ Π²ΡΠ΅ΠΌ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ Redux.
Π’Π΅ΠΏΠ΅ΡΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ App. ΠΠΈΡΠ΅Π³ΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΠ³ΠΎ: ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ List ΠΈ ΠΎΡΡΠΈΡΠΎΠ²ΡΠ²Π°ΡΡ ΡΠ΅Π±Ρ. Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ Π΄Π»Ρ Ρ ΡΠ°Π½Π΅Π½ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ²:
mkdir -p SRC / JS / ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ
ΠΈ Π½ΠΎΠ²ΡΠΉ ΡΠ°ΠΉΠ» Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ src / js / components / App.js :
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ React ΠΈΠ· "react";
Π‘ΠΏΠΈΡΠΎΠΊ ΠΈΠΌΠΏΠΎΡΡΠ° ΠΈΠ· "./Π‘ΠΏΠΈΡΠΎΠΊ";
const App = () => (
Π‘ΡΠ°ΡΡΠΈ
<Π‘ΠΏΠΈΡΠΎΠΊ />
);
ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ;
Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈ Π·Π°ΠΊΡΠΎΠΉΡΠ΅ ΡΠ°ΠΉΠ», Π·Π°ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΠΊ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΏΠΈΡΠΊΠ°.
Π£ΡΠ΅Π±Π½ΠΎΠ΅ ΠΏΠΎΡΠΎΠ±ΠΈΠ΅ ΠΏΠΎ React Redux: ΡΠΏΠΈΡΠΎΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Redux
ΠΠΎΠΊΠ° Π½ΠΈΡΠ΅Π³ΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΠ³ΠΎ Π½Π΅ ΡΠ΄Π΅Π»Π°Π»ΠΈ. ΠΠΎ Π½Π°Ρ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ List Π±ΡΠ΄Π΅Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ΠΌ Redux .
ΠΡΠ°ΡΠΊΠΎΠ΅ ΡΠ΅Π·ΡΠΌΠ΅: ΠΊΠ»ΡΡ Π΄Π»Ρ , ΡΠΎΠ΅Π΄ΠΈΠ½ΡΡΡΠΈΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ React Ρ Redux, — ΡΡΠΎ connect .Connect ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Ρ ΠΎΡΡ Π±Ρ ΠΎΠ΄ΠΈΠ½ Π°ΡΠ³ΡΠΌΠ΅Π½Ρ.
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ List ΠΏΠΎΠ»ΡΡΠ°Π» ΡΠΏΠΈΡΠΎΠΊ ΡΡΠ°ΡΠ΅ΠΉ, Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡΡ state.articles Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠΌ. ΠΠ°ΠΊ? Π‘ mapStateToProps . ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Β«mapStateToPropsΒ» — ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΎΠ³Π»Π°ΡΠ΅Π½ΠΈΠ΅, Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ², Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Β«selectΒ».
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½ΠΎΠ²ΡΠΉ ΡΠ°ΠΉΠ» Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ src / js / components / List.js . ΠΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡΡΡ ΡΠ°ΠΊ:
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ React ΠΈΠ· "react";
ΠΈΠΌΠΏΠΎΡΡ ΠΈΠ· "react-redux";
const mapStateToProps = state => {
Π²Π΅ΡΠ½ΡΡΡ {ΡΡΠ°ΡΡΠΈ: ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅.ΡΡΠ°ΡΡΠΈ};
};
const ConnectedList = ({ΡΡΠ°ΡΡΠΈ}) => (
{article.map (el => (
- {el.title}
))}
);
const List = connect (mapStateToProps) (ConnectedList);
ΡΠΊΡΠΏΠΎΡΡ ΡΠΏΠΈΡΠΊΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ;
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ List ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΠΎΠΏΠΎΡΡ article , ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠΎΠΏΠΈΠ΅ΠΉ ΠΌΠ°ΡΡΠΈΠ²Π° ΡΡΠ°ΡΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ Π²ΠΈΠ΄Π΅Π»ΠΈ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Redux. ΠΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΎΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ°:
const initialState = {
ΡΡΠ°ΡΡΠΈ: []
};
function rootReducer (state = initialState, action) {
Π΅ΡΠ»ΠΈ (Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅.type === ADD_ARTICLE) {
return Object.assign ({}, ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, {
ΡΡΠ°ΡΡΠΈ: state.articles.concat (action.payload)
});
}
Π²Π΅ΡΠ½ΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅;
}
ΠΡΠ΅Π³Π΄Π° ΠΏΠΎΠΌΠ½ΠΈΡΠ΅: ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π² redux ΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΎΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠΎΠ² .
ΠΠ°ΠΊΠΎΠ½Π΅Ρ, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΡΠΊΡΠΏΠΎΡΡΠΈΡΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ ΡΠΏΠΈΡΠΎΠΊ. Π‘ΠΏΠΈΡΠΎΠΊ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠΌ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ConnectedList Π±Π΅Π· ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Ρ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ΠΌ Redux.
ΠΡΠ΅ Π΅ΡΠ΅ Π½Π΅ ΡΠ²Π΅ΡΠ΅Π½Ρ? Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Connect, ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π²ΡΠ΅ΠΌΡ. . ΠΠΎ Π½Π΅ Π±ΠΎΠΉΡΠ΅ΡΡ, ΠΏΡΡΡ ΠΊ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ Redux Π²ΡΠΌΠΎΡΠ΅Π½ Β«Π°Ρ -Ρ Π°Β» ΠΌΠΎΠΌΠ΅Π½ΡΠ°ΠΌΠΈ .
Π― ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠ΅ΡΠ΅ΡΡΠ² Π΄Π»Ρ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ ΠΊΠ°ΠΊ connect, ΡΠ°ΠΊ ΠΈ mapStateToProps.
ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΡΠ°Π·Π΄Π΅Π»Ρ, ΠΊΠΎΠ³Π΄Π° Π±ΡΠ΄Π΅ΡΠ΅ Π³ΠΎΡΠΎΠ²Ρ!
Π£ΡΠ΅Π±Π½ΠΎΠ΅ ΠΏΠΎΡΠΎΠ±ΠΈΠ΅ ΠΏΠΎ React Redux: ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΡΠΎΡΠΌΡ ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Redux
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Form, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΡΡ ΡΠΎΠ·Π΄Π°ΡΡ, Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ»ΠΎΠΆΠ½Π΅Π΅, ΡΠ΅ΠΌ List. ΠΡΠΎ ΡΠΎΡΠΌΠ° Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π½ΠΎΠ²ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² Π½Π°ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΈ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡ JavaScript.
ΠΠ°ΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΎΠ± ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΈ ΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎΡΡΠΈ : Π― Π½Π°ΠΏΠΈΡΠ°Π» ΡΡΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ, ΠΊΠΎΠ³Π΄Π° Π² React Π΅ΡΠ΅ Π½Π΅ Π±ΡΠ»ΠΎ Ρ ΡΠΊΠΎΠ². Π― ΠΌΠΎΠ³ Π±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π·Π΄Π΅ΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, Π½ΠΎ , ΡΡΠΎΠ±Ρ Π½Π΅ ΠΈΡΠΊΠ°ΠΆΠ°ΡΡ ΡΡΠ΅Π±Π½ΠΈΠΊ, Ρ Π±ΡΠ΄Ρ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² .
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΊΠ»Π°ΡΡΠ° ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π²Ρ ΠΎΠ΄Π½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ ΡΠΎΡΠΌΡ. ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Redux . Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΌΠΎΠΆΠ΅Ρ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, ΠΎΡΠΏΡΠ°Π²ΠΈΠ² Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ addArticle .
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½ΠΎΠ²ΡΠΉ ΡΠ°ΠΉΠ» Π² src / js / components / Form.js
ΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ:
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ React, {Component} ΠΈΠ· "react";
ΠΈΠΌΠΏΠΎΡΡ ΠΈΠ· "react-redux";
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {addArticle} ΠΈΠ· "../actions/index";
function mapDispatchToProps (dispatch) {
Π²ΠΎΠ·Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ {
addArticle: article => ΠΎΡΠΏΡΠ°Π²ΠΊΠ° (addArticle (ΡΡΠ°ΡΡΡ))
};
}
class ConnectedForm ΡΠ°ΡΡΠΈΡΡΠ΅Ρ Component {
constructor (props) {
ΡΡΠΏΠ΅Ρ (ΡΠ΅ΠΊΠ²ΠΈΠ·ΠΈΡ);
ΡΡΠΎΡ.state = {
Π·Π°Π³Π»Π°Π²ΠΈΠ΅: ""
};
this.handleChange = this.handleChange.bind (ΡΡΠΎ);
this.handleSubmit = this.handleSubmit.bind (ΡΡΠΎ);
}
handleChange (event) {
this.setState ({[event.target.id]: event.target.value});
}
handleSubmit (event) {
event.preventDefault ();
const {Π½Π°Π·Π²Π°Π½ΠΈΠ΅} = this.state;
this.props.addArticle ({Π½Π°Π·Π²Π°Π½ΠΈΠ΅});
this.setState ({Π½Π°Π·Π²Π°Π½ΠΈΠ΅: ""});
}
render () {
const {Π½Π°Π·Π²Π°Π½ΠΈΠ΅} = this.state;
Π²ΠΎΠ·Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ (
);
}
}
const Form = connect (
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ NULL,
mapDispatchToProps
) (ConnectedForm);
ΡΠΊΡΠΏΠΎΡΡ ΡΠΎΡΠΌΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ;
ΠΡΠ°ΡΠΊΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°:
- ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π» Π Π΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠ΄ΠΎΠΌ Ρ mapDispatchToProps ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡΡΡ
- mapDispatchToProps ΡΠ²ΡΠ·ΡΠ²Π°Π΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Redux Ρ ΡΠ΅ΠΊΠ²ΠΈΠ·ΠΈΡΠ°ΠΌΠΈ React
- ΠΌΠ΅ΡΠΎΠ΄ handleSubmit ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅
ΠΠ»Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Π΅ΠΉ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΡΠΌΡ ΡΡΠ½ΠΊΡΠΈΠΈ:
function mapDispatchToProps (dispatch) {
Π²ΠΎΠ·Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ {
addArticle: article => ΠΎΡΠΏΡΠ°Π²ΠΊΠ° (addArticle (ΡΡΠ°ΡΡΡ))
};
}
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ mapDispatchToProps ΠΊΠ°ΠΊ ΠΎΠ±ΡΠ΅ΠΊΡ.ΠΠ·Π³Π»ΡΠ½ΠΈΡΠ΅ ΡΡΠ΄Π°.
ΠΠ°ΠΊΠΎΠ½Π΅Ρ, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΡΠΊΡΠΏΠΎΡΡΠΈΡΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ ΡΠΎΡΠΌΠ°. Π€ΠΎΡΠΌΠ° — ΡΡΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ConnectedForm ΠΊ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΡ Redux.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΏΠ΅ΡΠ²ΡΠΉ Π°ΡΠ³ΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π½ΡΠ»Π΅Π²ΡΠΌ, ΠΊΠΎΠ³Π΄Π° mapStateToProps ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ, ΠΊΠ°ΠΊ Π² Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ . ΠΠ»ΠΈ Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ TypeError: ΠΎΡΠΏΡΠ°Π²ΠΊΠ° — ΡΡΠΎ Π½Π΅ ΡΡΠ½ΠΊΡΠΈΡ.
ΠΠ°ΡΠΈ ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΡΡΡΠΈΠ΅ Π³ΠΎΡΠΎΠ²Ρ! Π’Π΅ΠΏΠ΅ΡΡ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΡΠΎΡΠΌΡ:
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ React ΠΈΠ· "react";
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΏΠΈΡΠΎΠΊ ΠΈΠ· "./List";
ΠΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΡΠΌΡ ΠΈΠ· "./ Π€ΠΎΡΠΌΠ° Β»;
const App = () => (
<>
Π‘ΡΠ°ΡΡΠΈ
<Π‘ΠΏΠΈΡΠΎΠΊ />
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π½ΠΎΠ²ΡΡ ΡΡΠ°ΡΡΡ
<Π€ΠΎΡΠΌΠ° />
>
);
ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ;
ΠΠ°ΠΏΡΡΡΠΈΡΠ΅ ΡΠ΅ΡΠ²Π΅Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Ρ:
ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π½Π°ΡΠ΅ ΡΠ°Π±ΠΎΡΠ΅Π΅ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ (Π² ΠΏΠ΅ΡΠ²ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΡΡΠΎΠ³ΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» Bootstrap, Π° Π·Π°ΡΠ΅ΠΌ ΡΠ΄Π°Π»ΠΈΠ» Π΅Π³ΠΎ).
ΠΠΈΡΠ΅Π³ΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΠ³ΠΎ, Π½ΠΎ Π²ΡΠ΅ ΠΆΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΡΠ°Π±ΠΎΡΡ React ΠΈ Redux!
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ List ΡΠ»Π΅Π²Π° ΠΎΠ±ΡΠ°ΡΠ°Π΅ΡΡΡ ΠΊ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΡ Redux.ΠΠ½ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π²ΡΡΠΊΠΈΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΠ΅ Π½ΠΎΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
ΠΡ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΡΡΠΎ! ΠΠΎ ΠΌΡ Π΅ΡΠ΅ Π½Π΅ Π·Π°ΠΊΠΎΠ½ΡΠΈΠ»ΠΈ! Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ Redux . ΠΠ΅ΡΠΆΠΈΡΡ ΠΊΡΠ΅ΠΏΡΠ΅!
Π‘ΠΌΠΎΡΡΠΈΡΠ΅ Π²Π΅ΡΠΊΡ Π½Π° Github
Π£ΡΠ΅Π±Π½ΠΈΠΊ
React Redux: ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ Redux?
ΠΠΎΠΊΠ° ΡΡΠΎ ΠΌΡ Π²ΠΈΠ΄Π΅Π»ΠΈ ΡΡΡΠΎΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ Redux: ΠΌΠ°Π³Π°Π·ΠΈΠ½ , ΠΠΠ. Reducers , ΠΊΠΎΡΠΎΡΡΠΉ Π΄Π΅Π»Π°Π΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π² Redux.
Π’ΠΎΠ³Π΄Π° Π΅ΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ, ΠΏΡΠΎΡΡΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² JavaScript, Π΄Π΅ΠΉΡΡΠ²ΡΡΡΠΈΡ ΠΊΠ°ΠΊ ΠΌΠ΅ΡΡΠ΅Π½Π΄ΠΆΠ΅ΡΡ Π² Π²Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ .ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Π΅ΠΉ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ, ΡΡΠ½ΠΊΡΠΈΠΉ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠΈΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ .
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΡΡΠ΅ ΡΠ΅Π±Π΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΡΠ΅Π½Π°ΡΠΈΠΉ: Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π°ΠΏΡΠ΅ΡΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΡΠ°ΡΡΠΈ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ Π²Π½ΡΡΡΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° handleSubmit
Π² Form.js
:
handleSubmit (ΡΠΎΠ±ΡΡΠΈΠ΅) {
event.preventDefault ();
const {Π½Π°Π·Π²Π°Π½ΠΈΠ΅} = this.state;
this.props.addArticle ({Π½Π°Π·Π²Π°Π½ΠΈΠ΅});
this.setState ({Π½Π°Π·Π²Π°Π½ΠΈΠ΅: ""});
}
ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ΅ΠΊ ΠΏΠ΅ΡΠ΅Π΄ this.props.addArticle
ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ? ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΠΎ-ΡΠΎ Π²ΡΠΎΠ΄Π΅ ΡΡΠΎΠ³ΠΎ:
handleSubmit (ΡΠΎΠ±ΡΡΠΈΠ΅) {
event.preventDefault ();
const {Π½Π°Π·Π²Π°Π½ΠΈΠ΅} = this.state;
const disabledWords = ['ΡΠΏΠ°ΠΌ', 'Π΄Π΅Π½ΡΠ³ΠΈ'];
const foundWord = disabledWords.filter (word => title.includes (word))
if (foundWord) {
Π²Π΅ΡΠ½ΡΡΡ this.props.titleForbidden ();
}
this.props.addArticle ({Π½Π°Π·Π²Π°Π½ΠΈΠ΅});
this.setState ({Π½Π°Π·Π²Π°Π½ΠΈΠ΅: ""});
}
Π Π°Π·Π²Π΅ Π½Π΅ Π²Π΅ΡΡ ΡΠΌΡΡΠ» Redux Π² ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ Π»ΠΎΠ³ΠΈΠΊΠΈ ΠΈΠ· Π½Π°ΡΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² React ? Π ΡΡΠΎ? ΠΠΎΠΆΠ΅ΠΌ Π»ΠΈ ΠΌΡ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ title Π²Π½ΡΡΡΠΈ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ°? ΠΠΎΠΆΠ΅Ρ Π±ΡΡΡ! ΠΠΎΠΊΠ° ΡΠ°ΠΌ ΠΎΡΠΏΡΠ°Π²ΠΈΠΌ Π΄ΡΡΠ³ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π² ΠΎΡΠ²Π΅Ρ Π½Π° Π·Π°ΠΏΡΠ΅ΡΠ΅Π½Π½ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ… Π½ΠΎ ΠΊΠ°ΠΊ ΠΌΠ½Π΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ Π΄ΠΈΡΠΏΠ΅ΡΡΠ΅ΡΠΈΠ·Π°ΡΠΈΠΈ Π²Π½ΡΡΡΠΈ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ°?
ΠΠΎΠ½ΡΡΠ½ΠΎ, ΡΡΠΎ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΡΠ΅Π³ΠΎ-ΡΠΎ Π΄ΡΡΠ³ΠΎΠ³ΠΎ. ΠΠΎΡ ΠΎΠΆΠ΅, ΠΌΡ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΠ» ΠΏΠΎΠ»Π΅Π·Π½ΡΡ Π½Π°Π³ΡΡΠ·ΠΊΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ (ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ title), ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅Ρ ΠΊ ΡΠ΅Π΄ΡΠΊΡΠΎΡΡ . ΠΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΡΠΏΠΎΡΠΎΠ± ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΊ ΠΏΠΎΡΠΎΠΊΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ . Π£Π³Π°Π΄Π°ΠΉΡΠ΅, ΡΡΠΎ ΡΡΠΎ — ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠΎ, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ Redux .
ΠΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ Redux — ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΏΠΎΡΠΎΠ±Π½Π° ΠΏΠ΅ΡΠ΅Ρ Π²Π°ΡΡΠ²Π°ΡΡ Π½Π°ΡΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΎΠ½ΠΈ Π΄ΠΎΡΡΠΈΠ³Π½ΡΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ° .Π₯ΠΎΡΡ ΡΠ΅ΠΎΡΠΈΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠ°, ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ Redux ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π·Π°ΠΏΡΡΠ°Π½Π½ΡΠΌ.
Π ΡΠ²ΠΎΠ΅ΠΉ Π±Π°Π·ΠΎΠ²ΠΎΠΉ ΡΠΎΡΠΌΠ΅ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ Redux — ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΡ, Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡΠ°Ρ ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°. ΠΠ°ΡΠ΅ΠΌ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΡΡΠ½ΠΊΡΠΈΡ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ Π΄ΡΡΠ³ΡΡ ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° ΠΈ, Π½Π°ΠΊΠΎΠ½Π΅Ρ, Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ next (Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅)
. ΠΠΎΡ ΠΊΠ°ΠΊ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ:
functionhibitedWordsMiddleware () {
return function (next) {
return function (action) {
Π²Π΅ΡΠ½ΡΡΡΡΡ Π΄Π°Π»Π΅Π΅ (Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅);
}
}
}
ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΠΏΡΠ½ΠΊΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π°ΠΆΠ΅Π½: Π²Ρ Π²ΡΠ΅Π³Π΄Π° Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΡΠ·ΡΠ²Π°ΡΡ next (action)
Π² ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠΌ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠΌ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΠΈ.ΠΡΠ»ΠΈ Π²Ρ Π΅Π³ΠΎ Π·Π°Π±ΡΠ΄Π΅ΡΠ΅, Redux ΠΎΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ, ΠΈ Π½ΠΈΠΊΠ°ΠΊΠΈΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π½Π΅ Π΄ΠΎΡΡΠΈΠ³Π½ΡΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ°. next (Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅)
ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΏΠ΅ΡΠ΅Π΄ Π½Π° , Π²ΡΠ·ΡΠ²Π°Ρ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ Π² ΡΠ΅ΠΏΠΎΡΠΊΠ΅ .
Π ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠΌ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠΌ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΠΈ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ getState
ΠΈ dispatch
:
functionhibitedWordsMiddleware ({getState, dispatch}) {
return function (next) {
return function (action) {
Π²Π΅ΡΠ½ΡΡΡΡΡ Π΄Π°Π»Π΅Π΅ (Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅);
}
}
}
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΡΠΎ, ΡΡΠΎ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ Π½Π΅ Π·Π°ΠΊΡΡΠ²Π°Π΅ΡΡΡ ΠΏΠΎΡΠ»Π΅ next (action)
.ΠΡΠ»ΠΈ Π²Π°Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΠ΅Ρ , ΡΡΠΈΡΡΠ²Π°ΡΡΠΈΠΉ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠ΅ΠΏΠΎΡΠΊΠ° ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ , Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ getState
ΠΏΠΎΡΠ»Π΅ next (Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅)
:
functionhibitedWordsMiddleware ({getState, dispatch}) {
return function (next) {
return function (action) {
const nextAction = next (Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅);
ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΊΠΎΠ½ΡΡΠ°Π½ΡΡ = getState ();
return nextAction;
}
}
}
Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π½Π΅ Π·Π°Π±ΡΠ΄ΡΡΠ΅ Π²Π΅ΡΠ½ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π² ΠΊΠΎΠ½ΡΠ΅.
Π― Π·Π½Π°Ρ, ΡΡ Ρ ΠΎΡΠ΅ΡΡ ΠΏΠ»Π°ΠΊΠ°ΡΡ ΠΈ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΠΊΠ°ΡΡΠ΅ΡΡ, Π½ΠΎ ΡΠ΅ΡΠΏΠΈ ΠΌΠ΅Π½Ρ. ΠΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ Π² Redux ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΠΎ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΠ°ΡΡΡ Π»ΠΎΠ³ΠΈΠΊΠΈ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΡΠ»ΠΈ Π·Π°Π΄ΡΠΌΠ°ΡΡΡΡ, ΡΠΎ Π΄Π»Ρ Π°Π±ΡΡΡΠ°Π³ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π±ΠΈΠ·Π½Π΅Ρ-Π»ΠΎΠ³ΠΈΠΊΠΈ Π½Π΅Ρ Π»ΡΡΡΠ΅Π³ΠΎ ΠΌΠ΅ΡΡΠ°, ΡΠ΅ΠΌ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ.
ΠΠΎΠΎΡΡΠΆΠΈΠ²ΡΠΈΡΡ ΡΡΠΈΠΌΠΈ Π·Π½Π°Π½ΠΈΡΠΌΠΈ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°ΡΡ Π½Π°ΡΠ΅ ΠΏΠ΅ΡΠ²ΠΎΠ΅ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ Redux : ΠΎΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡΠΎΠ²Π΅ΡΡΡΡ, Π΅ΡΡΡ Π»ΠΈ Π² ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ Π½Π°Π³ΡΡΠ·ΠΊΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΏΠ»ΠΎΡ ΠΈΠ΅ ΡΠ»ΠΎΠ²Π°. ΠΡ ΡΠ²ΠΈΠ΄ΠΈΠΌ ΡΠ΅Π°Π»ΡΠ½ΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅.
React Redux tutorial: Π²Π°ΡΠ΅ ΠΏΠ΅ΡΠ²ΠΎΠ΅ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ Redux
ΠΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΡΡ ΡΠΎΠ·Π΄Π°ΡΡ, Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡΠΎΠ²Π΅ΡΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ Π½Π°Π³ΡΡΠ·ΠΊΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ. ΠΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ² ΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ Redux :
- Π±ΠΎΠ»ΡΡΠ°Ρ ΡΠ°ΡΡΡ Π»ΠΎΠ³ΠΈΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ Π²Π½Π΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°
- ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Π»ΠΎΠ³ΠΈΠΊΠΈ, ΠΎ
- ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΠΎ
ΠΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ
Π»Π΅Π³ΠΊΠΎ ΡΠ°ΡΡΡΠΆΠ΄Π°ΡΡ
ΠΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ
ΠΡΠ°ΠΊ, Π΄Π°Π²Π°ΠΉΡΠ΅ Π·Π°ΠΏΠ°ΡΠΊΠ°Π΅ΠΌ ΡΡΠΊΠΈ. Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½ΠΎΠ²ΡΡ ΠΏΠ°ΠΏΠΊΡ Π΄Π»Ρ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ:
mkdir -p src / js / ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ
Π’Π΅ΠΏΠ΅ΡΡ ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½ΠΎΠ²ΡΠΉ ΡΠ°ΠΉΠ» Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ src / js / middleware / index.js
. Π‘ΡΡΡΠΊΡΡΡΠ° Π½Π°ΡΠ΅Π³ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΡΠ°ΠΊΠΎΠΉ:
functionhibitedWordsMiddleware ({dispatch}) {
return function (next) {
return function (action) {
Π²Π΅ΡΠ½ΡΡΡΡΡ Π΄Π°Π»Π΅Π΅ (Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅);
}
}
}
ΠΠ° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ΅Π½ getState
, ΠΌΡ ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ dispatch
Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°. ΠΠΈΡΡΠ°. Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ Π½Π°Π³ΡΡΠ·ΠΊΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ title. ΠΡΠ»ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΠΎΠ²ΠΏΠ°Π΄Π°Π΅Ρ Ρ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΠΏΠ»ΠΎΡ
ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΠΌΡ Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅ΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΡΠ°ΡΡΡ.
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π·Π°ΠΏΡΡΠΊΠ°ΡΡΡΡ, ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΠΏ ADD_ARTICLE
. ΠΡΠΎ ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ». ΠΠ°ΠΊ Π½Π°ΡΡΠ΅Ρ ΡΡΠΎΠ³ΠΎ:
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {ADD_ARTICLE} ΠΈΠ· "../constants/action-types";
const disabledWords = ["ΡΠΏΠ°ΠΌ", "Π΄Π΅Π½ΡΠ³ΠΈ"];
ΡΡΠ½ΠΊΡΠΈΡ ΡΠΊΡΠΏΠΎΡΡΠ° Π·Π°ΠΏΡΠ΅ΡΠ΅Π½ΠΎWordsMiddleware ({dispatch}) {
return function (next) {
return function (action) {
if (action.type === ADD_ARTICLE) {
const foundWord = disabledWords.filter (word =>
Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅.payload.title.includes (ΡΠ»ΠΎΠ²ΠΎ)
);
if (foundWord.length) {
Π²ΠΎΠ·Π²ΡΠ°ΡΠ½Π°Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΠ° ({type: "FOUND_BAD_WORD"});
}
}
Π²Π΅ΡΠ½ΡΡΡΡΡ Π΄Π°Π»Π΅Π΅ (Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅);
};
};
}
ΠΠΎΡ ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ: ΠΏΡΠΈ ΡΠΈΠΏΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ADD_ARTICLE
ΠΏΡΠΎΠ²Π΅ΡΡΠ΅Ρ, Π½Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π»ΠΈ action.payload.title
ΠΏΠ»ΠΎΡ
ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ. ΠΡΠ»ΠΈ ΡΡΠΎ ΡΠ°ΠΊ, ΡΠΎ ΠΎΡΠΏΡΠ°Π²ΡΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΡΠΈΠΏΠ° FOUND_BAD_WORD
, Π² ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠΌΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠΌΡ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ Π·Π°ΠΏΡΡΡΠΈΡΡ .
Π ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΡΠΈΡΠ»ΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ hibiddenWordsMiddleware
ΠΊ ΠΌΠ°Π³Π°Π·ΠΈΠ½Ρ Redux.ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Π½Π°ΡΠ΅ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ, Π΅ΡΠ΅ ΠΎΠ΄Π½Ρ ΡΡΠΈΠ»ΠΈΡΡ ΠΈΠ· Redux (applyMiddleware), Π° Π·Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠ³ΠΎΡΠΎΠ²ΠΈΡΡ Π²ΡΠ΅ Π²ΠΌΠ΅ΡΡΠ΅.
ΠΡΠΊΡΠΎΠΉΡΠ΅ src / js / store / index.js
ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ°ΠΉΠ» ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
import {createStore, applyMiddleware} ΠΈΠ· "redux";
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ rootReducer ΠΈΠ· "../reducers/index";
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {disabledWordsMiddleware} ΠΈΠ· "../middleware";
const store = createStore (
rootReducer,
applyMiddleware (Π·Π°ΠΏΡΠ΅ΡΠ΅Π½Π½ΡΠ΅ ΡΠ»ΠΎΠ²Π°Middleware)
);
ΡΠΊΡΠΏΠΎΡΡ ΠΌΠ°Π³Π°Π·ΠΈΠ½Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ;
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅ : Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π²ΠΊΠ»ΡΡΠΈΡΡ Redux Dev Tools, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠΎΡ ΠΊΠΎΠ΄.
Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈ Π·Π°ΠΊΡΠΎΠΉΡΠ΅ ΡΠ°ΠΉΠ», Π·Π°ΠΏΡΡΡΠΈΡΠ΅ npm start ΠΈ ΠΏΡΠΎΠ²Π΅ΡΡΡΠ΅, ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π»ΠΈ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ. ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠ°ΡΡΡ Ρ Β«Π΄Π΅Π½ΡΠ³Π°ΠΌΠΈΒ» Π² Π΅Π΅ Π½Π°Π·Π²Π°Π½ΠΈΠΈ, ΠΈ Π²Ρ Π½Π΅ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ Π½ΠΎΠ²Π°Ρ ΡΡΠ°ΡΡΡ ΠΏΠΎΡΠ²ΠΈΡΡΡ Π² ΡΠΏΠΈΡΠΊΠ΅ .
ΠΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ! ΠΡΠ»ΠΈΡΠ½Π°Ρ ΡΠ°Π±ΠΎΡΠ°! Π ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ°Π·Π΄Π΅Π»Π°Ρ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π² Redux Ρ Redux Thunk ΠΈ Redux Saga .
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΡΠΎΠΊ 5 ΠΊΡΡΡΠ° Redux, ΡΠ°Π±ΠΎΡΠ° Ρ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΡΠΌ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΡΠΌ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ
Π‘ΠΌΠΎΡΡΠΈΡΠ΅ Π²Π΅ΡΠΊΡ Π½Π° Github
React Redux tutorial: Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π² Redux, Π½Π°ΠΈΠ²Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ±
ΠΠΎ ΡΠΈΡ ΠΏΠΎΡ ΠΌΡ ΠΈΠΌΠ΅Π»ΠΈ Π΄Π΅Π»ΠΎ Ρ ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΠΌΠΈ Π΄Π°Π½Π½ΡΠΌΠΈ .Π’ΠΎ Π΅ΡΡΡ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎ . ΠΠ΅Ρ AJAX, Π½ΠΈΠΊΠ°ΠΊΠΈΡ ΠΎΠ±Π΅ΡΠ°Π½ΠΈΠΉ. ΠΡ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌ ΠΏΡΠΎΡΡΠΎΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ ΠΎΡ Π½Π°ΡΠΈΡ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Π΅ΠΉ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ. Π ΠΊΠΎΠ³Π΄Π° Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π΄ΠΎΡΡΠΈΠ³Π°Π΅Ρ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ°, ΠΌΡ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅.
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΡΡΠΎ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄Π°Π½Π½ΡΠ΅ ΠΈΠ· API . Π React Π²Ρ Π±Ρ ΠΏΠΎΠ·Π²ΠΎΠ½ΠΈΠ»ΠΈ Π² componentDidMount ΠΈ Π·Π°Π²Π΅ΡΡΠΈΠ»ΠΈ Π±Ρ Π΅Π³ΠΎ. ΠΠΎ ΠΊΠ°ΠΊ Π½Π°ΡΡΠ΅Ρ Redux? ΠΠ°ΠΊΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π²ΡΠ·ΠΎΠ²Π° Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ ? ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠ΄ΡΠΌΠ°Π΅ΠΌ ΠΎΠ± ΡΡΠΎΠΌ.
Π Π΅Π΄ΡΠΊΡΠΎΡΡ? ΠΠΈ Π·Π° ΡΡΠΎ. Π Π΅Π΄ΡΠΊΡΠΎΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ ΡΡΡ ΠΈΠΌΠΈ ΠΈ ΡΠΈΡΡΡΠΌΠΈ.Π Π΅Π΄ΡΠΊΡΠΎΡ — Π½Π΅ Π»ΡΡΡΠ΅Π΅ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠΉ Π»ΠΎΠ³ΠΈΠΊΠΈ.
ΠΠ΅ΠΉΡΡΠ²ΠΈΡ? ΠΠ°ΠΊ Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ? ΠΠ΅ΠΉΡΡΠ²ΠΈΡ Π² Redux — ΡΡΠΎ ΠΏΡΠΎΡΡΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ. Π ΠΊΠ°ΠΊ Π½Π°ΡΡΠ΅Ρ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Π΅ΠΉ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ? Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ — ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΡ, ΠΈ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΠ°ΠΊ Ρ ΠΎΡΠΎΡΠ΅Π΅ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ Π²ΡΠ·ΠΎΠ²Π° API! ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ.
ΠΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π½ΠΎΠ²ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ getData . ΠΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π²ΡΠ·ΡΠ²Π°Π΅Ρ API Ρ Fetch ΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Redux.
ΠΡΠΊΡΠΎΠΉΡΠ΅ src / js / actions / index.js
ΠΈ ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½ΠΎΠ²ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ getData
:
ΡΡΠ½ΠΊΡΠΈΡ ΡΠΊΡΠΏΠΎΡΡΠ° getData () {
return fetch ("https: // jsonplaceholder.typicode.com/posts ")
.then (ΠΎΡΠ²Π΅Ρ => response.json ())
.then (json => {
Π²Π΅ΡΠ½ΡΡΡ {ΡΠΈΠΏ: "DATA_LOADED", ΠΏΠΎΠ»Π΅Π·Π½Π°Ρ Π½Π°Π³ΡΡΠ·ΠΊΠ°: json};
});
}
Π ΡΡΠΎΠΌ Π΅ΡΡΡ ΡΠΌΡΡΠ». ΠΡΠ΄Π΅Ρ Π»ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ ? ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ React Π΄Π»Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ getData
ΠΈΠ· componentDidMount
. mapDispatchToProps
(Π½Π° ΡΡΠΎΡ ΡΠ°Π· Ρ ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΠΎΠΉ ΡΠΎΡΠΌΠΎΠΉ ΠΎΠ±ΡΠ΅ΠΊΡΠ°) ΡΠΎΠΏΠΎΡΡΠ°Π²ΠΈΡ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Π΅ΠΉ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Redux Ρ ΡΠ΅ΠΊΠ²ΠΈΠ·ΠΈΡΠ°ΠΌΠΈ Π½Π°ΡΠ΅Π³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°. Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ React Π² src / js / components / Posts.js
:
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ React, {ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ} ΠΈΠ· "ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ";
ΠΈΠΌΠΏΠΎΡΡ ΠΈΠ· "react-redux";
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {getData} ΠΈΠ· "../actions/index";
ΡΠΊΡΠΏΠΎΡΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ Post ΡΠ°ΡΡΠΈΡΡΠ΅Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ {
constructor (props) {
ΡΡΠΏΠ΅Ρ (ΡΠ΅ΠΊΠ²ΠΈΠ·ΠΈΡ);
}
componentDidMount () {
this.props.getData ();
}
render () {
return null;
}
}
ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ (
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ NULL,
{ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄Π°Π½Π½ΡΠ΅ }
)(ΠΠΎΡΡΠ°);
Redux Tutorial: ΠΠ±Π·ΠΎΡ ΠΈ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ
ΠΡΡΡ Π»ΠΈ Ρ Π²Π°Ρ ΠΎΠΏΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ React? ΠΡ ΡΠ»ΡΡΠ°Π»ΠΈ ΠΎ Redux, Π½ΠΎ ΠΎΡΠ»ΠΎΠΆΠΈΠ»ΠΈ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅ Π΅Π³ΠΎ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΎΡΠ΅Π½Ρ ΡΠ»ΠΎΠΆΠ½ΡΠΌ, Π° Π²ΡΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π° ΠΊΠ°ΠΆΡΡΡΡ ΠΎΡΠ΅Π»ΠΎΠΌΠ»ΡΡΡΠΈΠΌΠΈ? ΠΡΠ»ΠΈ ΡΡΠΎ ΡΠ°ΠΊ, ΡΡΠ° ΡΡΠ°ΡΡΡ Π΄Π»Ρ Π²Π°Ρ! Π‘Π΄Π΅ΡΠΆΠΈΠ²Π°ΠΉΡΠ΅ ΡΠ²ΠΎΠΉ ΡΡΡΠ°Ρ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΈ ΠΎΡΠΏΡΠ°Π²Π»ΡΠΉΡΠ΅ΡΡ ΡΠΎ ΠΌΠ½ΠΎΠΉ Π² ΡΡΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±Π΅Π·Π±ΠΎΠ»Π΅Π·Π½Π΅Π½Π½ΠΎΠ΅ ΠΏΡΡΠ΅ΡΠ΅ΡΡΠ²ΠΈΠ΅.
ΠΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ
ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΆΠ΅ Π·Π½Π°ΡΡ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ React Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π°, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Ρ Π½Π΅ Π±ΡΠ΄Ρ ΠΎΠ±ΡΡΡΠ½ΡΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Π°ΡΠΏΠ΅ΠΊΡΡ ΡΠ°ΠΌΠΎΠ³ΠΎ React.
Π’Π°ΠΊΠΆΠ΅ Π·Π°Π³ΡΡΠ·ΠΈΡΠ΅ Redux DevTools Π΄Π»Ρ Chrome ΠΈΠ»ΠΈ FireFox.
ΠΠΎΠ»Ρ
Π ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π±Π»ΠΎΠ³Π°. ΠΠ½ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ ΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΈΠ· API. Π― ΡΠΎΠ·Π΄Π°Π» ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ Ρ ΠΏΡΠΎΡΡΡΠΌ Redux, ΡΠ°ΠΊ ΠΈ Ρ Redux Toolkit (RTK), ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎ ΡΠ°Π½ΠΊΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ Π½Π°Π±ΠΎΡΠΎΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ Redux. ΠΠΎΡ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΠΈΡΡΠΎΡΠ½ΠΈΠΊ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΠΊΠ°ΠΊ ΠΏΡΠΎΡΡΠΎΠΉ, ΡΠ°ΠΊ ΠΈ RTK-Π²Π΅ΡΡΠΈΠΈ.
ΠΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ React + Redux (ΠΠ±ΡΡΠ½ΡΠΉ Redux)
ΠΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ React + Redux Toolkit
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈΠ·Π²Π»Π΅ΠΊΠ°ΡΡΡΡ ΠΈΠ· ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ API ΡΠ΅ΡΠ΅Π· JSON Placeholder API. ΠΠ·-Π·Π° ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ ΡΠΊΠΎΡΠΎΡΡΠΈ Π½Π° CodeSandbox API ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΡΠΌ, Π½ΠΎ ΡΡΠΎ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π½ΠΈΡΠ΅Π³ΠΎ ΠΎΠ±ΡΠ΅Π³ΠΎ Ρ ΡΠ°ΠΌΠΈΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Redux. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠ»ΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΉ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎ.
Π£Π·Π½Π°Π΅ΠΌ:
- Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Redux ΠΈ , ΠΏΠΎΡΠ΅ΠΌΡ Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ
- Π’Π΅ΡΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΡ Redux: Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, ΡΠ΅Π΄ΡΠΊΡΠΎΡΡ, Ρ ΡΠ°Π½Π΅Π½ΠΈΠ΅, ΠΎΡΠΏΡΠ°Π²ΠΊΠ°, ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ
- ΠΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΡ Π²ΡΠ·ΠΎΠ²ΠΎΠ² API Ρ ΠΏΠΎΠΌΠΎΡΡΡ Redux Thunk
- ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ΅ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ React ΠΈ Redux
- ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Redux Toolkit Π΄Π»Ρ ΡΠΏΡΠΎΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Redux
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Redux?
Redux — ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ Π΄Π»Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ JavaScript.ΠΠ±ΡΡΠ½ΠΎ Ρ React Π²Ρ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ Π½Π° ΡΡΠΎΠ²Π½Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠ΅ΡΠ΅Π· ΡΠ²ΠΎΠΉΡΡΠ²Π°. Π‘ Redux Π²ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌΠΎΠΌ ΠΎΠ±ΡΠ΅ΠΊΡΠ΅. ΠΠ°ΠΆΠ΄ΠΎΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Redux ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠΎΠΏΠΈΠΈ ΡΠ°Π·Π΄Π΅Π»ΠΎΠ² ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΏΠ»ΡΡ Π½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅.
Redux ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π±ΡΠ» ΡΠΎΠ·Π΄Π°Π½ ΠΡΠ½ΠΎΠΌ ΠΠ±ΡΠ°ΠΌΠΎΠ²ΡΠΌ ΠΈ ΠΠ½Π΄ΡΡ ΠΠ»Π°ΡΠΊΠΎΠΌ.
ΠΠΎΡΠ΅ΠΌΡ Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Redux?
- ΠΡΠΎΡΡΠΎΠ΅ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ — Π΄ΠΎΡΡΡΠΏ ΠΈΠ»ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ Π»ΡΠ±ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΈΠ· Π»ΡΠ±ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°, ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΊ Redux
- ΠΠ΅Π³ΠΊΠΎ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°ΠΉΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Redux DevTools — Π»ΡΠ±ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π΅ΡΡΡ ΠΈ Π»Π΅Π³ΠΊΠΎ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Redux.Π’ΠΎΡ ΡΠ°ΠΊΡ, ΡΡΠΎ Π²ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π΅ΡΡΡ ΠΏΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ, ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΠΎΡΠ»Π°Π΄ΠΊΡ Π²ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΠΌΠΈ.
ΠΠ±ΡΠ°ΡΠ½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½ΠΎΠΉ Redux ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π½Π°ΡΠ°Π»ΡΠ½ΡΡ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² (ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π΅ΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎΠΉ Redux Π±Π΅Π· Redux Toolkit). ΠΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ Π½ΡΠΆΠ΄Π°ΡΡΡΡ Π² Redux ΠΈ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠΈΠ³ΡΠ°ΡΡ ΠΎΡ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Context API Π΄Π»Ρ Π½ΡΠΆΠ΄ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ.
ΠΠΎ ΠΌΠΎΠ΅ΠΌΡ Π»ΠΈΡΠ½ΠΎΠΌΡ ΠΎΠΏΡΡΡ, Ρ ΡΠΎΠ·Π΄Π°Π» ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ Ρ Context, ΠΈ ΠΏΠΎΠ·ΠΆΠ΅ ΠΌΠ½Π΅ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°Π»ΠΎΡΡ Π²ΡΠ΅ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡ Π² Redux, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠ΄ΠΎΠ±Π½ΡΠΌ Π² ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π½ΠΈΠΈ ΠΈ ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠΌ.
Π’Π΅ΡΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΡ
ΠΠ±ΡΡΠ½ΠΎ Ρ Π½Π΅ Π»ΡΠ±Π»Ρ ΠΏΡΠΎΡΡΠΎ ΡΠΎΡΡΠ°Π²Π»ΡΡΡ ΡΠΏΠΈΡΠΎΠΊ ΡΠ΅ΡΠΌΠΈΠ½ΠΎΠ² ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ, Π½ΠΎ Π² Redux Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ, ΠΊΠΎΡΠΎΡΡΠ΅, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π½Π΅Π·Π½Π°ΠΊΠΎΠΌΡ, ΠΏΠΎΡΡΠΎΠΌΡ Ρ ΠΏΡΠΎΡΡΠΎ ΡΠΎΠ±ΠΈΡΠ°ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΈΡ Π²ΡΠ΅ Π·Π°ΡΠ°Π½Π΅Π΅, ΡΡΠΎΠ±Ρ Π±ΡΠ»ΠΎ Π»Π΅Π³ΡΠ΅ ΡΡΡΠ»Π°ΡΡΡΡ Π½Π° Π½ΠΈΡ . Π₯ΠΎΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ Π½Π°ΡΠ°Π»Ρ ΡΠ°Π·Π΄Π΅Π»Π° ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π°, Ρ Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ Π±ΡΠ»ΠΎ Π±Ρ Ρ ΠΎΡΠΎΡΠΎ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π²ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΡΠ½Π°ΡΠ°Π»Π° ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎ Π½ΠΈΡ ΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ ΠΈΡ Π² ΡΠ²ΠΎΠ΅ΠΉ Π³ΠΎΠ»ΠΎΠ²Π΅.
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Ρ Π±ΡΠ΄Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΈΠΏΠΈΡΠ½ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π΄Π°ΡΠΈ ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ Π·Π°Π΄Π°ΡΠΈ.
ΠΠ΅ΠΉΡΡΠ²ΠΈΡ
ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π΄Π°Π½Π½ΡΠ΅ ΠΈΠ· Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² Ρ
ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ Redux. ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ Ρ Π΄Π²ΡΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ: ΡΠΈΠΏΠ°
ΠΈ (Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ) ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ Π½Π°Π³ΡΡΠ·ΠΊΠΈ
. Π’ΠΈΠΏ ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΡΡΠΎΠΊΡ Π² Π²Π΅ΡΡ
Π½Π΅ΠΌ ΡΠ΅Π³ΠΈΡΡΡΠ΅ (ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½Π½ΡΡ ΠΊΠΎΠ½ΡΡΠ°Π½ΡΠ΅), ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅. ΠΠΎΠ»Π΅Π·Π½Π°Ρ Π½Π°Π³ΡΡΠ·ΠΊΠ° — ΡΡΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π½Ρ.
Π’ΠΈΠΏ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ
const DELETE_TODO = 'DELETE_TODO'
ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅
{
ΡΠΈΠΏ: DELETE_TODO,
ΠΏΠΎΠ»Π΅Π·Π½Π°Ρ Π½Π°Π³ΡΡΠ·ΠΊΠ°: ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ,
}
Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ
Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ — ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΡ, Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡΠ°Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅.
Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ
const deleteTodo = (id) => ({ΡΠΈΠΏ: DELETE_TODO, ΠΏΠΎΠ»Π΅Π·Π½Π°Ρ Π½Π°Π³ΡΡΠ·ΠΊΠ°: id})
Π Π΅Π΄ΡΠΊΡΠΎΡΡ
Π Π΅Π΄ΡΠΊΡΠΎΡ — ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π΄Π²Π° ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°: ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅
ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅
. Π Π΅Π΄ΡΠΊΡΠΎΡ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΈ Π²ΡΠ΅Π³Π΄Π° Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΠΊΠΎΠΏΠΈΡ Π²ΡΠ΅Π³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ. Π Π΅Π΄ΡΠΊΡΠΎΡ ΠΎΠ±ΡΡΠ½ΠΎ ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡΠ° switch
, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠ΅ΡΠ΅Π±ΠΈΡΠ°Π΅Ρ Π²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ ΡΠΈΠΏΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ.
Π Π΅Π΄ΡΠΊΡΠΎΡ
const initialState = {
Π·Π°Π΄Π°ΡΠΈ: [
{id: 1, text: 'ΠΡΡ'},
{id: 2, text: 'Sleep'},
],
Π·Π°Π³ΡΡΠ·ΠΊΠ°: Π»ΠΎΠΆΡ,
hasErrors: Π»ΠΎΠΆΡ,
}
function todoReducer (state = initialState, action) {
ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ (Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅.ΡΠΈΠΏ) {
case DELETE_TODO:
Π²ΠΎΠ·Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ {
...ΡΡΠ°Ρ,
Π·Π°Π΄Π°ΡΠΈ: state.todos.filter ((todo) => todo.id! == action.payload),
}
ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ:
ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°
}
}
ΠΠ°Π³Π°Π·ΠΈΠ½
Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Redux Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² Ρ
ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ , ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅ΡΡΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠΎΠΌ. ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Ρ React ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ
, ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠ½ΡΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΈ Π²ΡΠ΅ Π²Π½ΡΡΡΠΈ Provider ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ Redux.
ΠΠ°Π³Π°Π·ΠΈΠ½
ΠΈΠΌΠΏΠΎΡΡ {createStore} ΠΈΠ· "redux"
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {Provider} ΠΈΠ· 'response-redux'
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡ ΠΈΠ· './ ΡΠ΅Π΄ΡΠΊΡΠΎΡΡ
const store = createStore (ΡΠ΅Π΄ΡΠΊΡΠΎΡ)
Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ (
<ΠΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ />
,
document.getElementById ('ΠΊΠΎΡΠ΅Π½Ρ'),
)
ΠΡΠΏΡΠ°Π²ΠΊΠ°
ΠΎΡΠΏΡΠ°Π²ΠΊΠ°
— ΡΡΠΎ ΠΌΠ΅ΡΠΎΠ΄, Π΄ΠΎΡΡΡΠΏΠ½ΡΠΉ Π΄Π»Ρ ΠΎΠ±ΡΠ΅ΠΊΡΠ° Ρ
ΡΠ°Π½ΠΈΠ»ΠΈΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΠΎΠ±ΡΠ΅ΠΊΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Redux. ΠΠ±ΡΡΠ½ΠΎ ΡΡΠΎΡ ΠΎΠ±ΡΠ΅ΠΊΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠΌ Π²ΡΠ·ΠΎΠ²Π° ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ.
const Component = ({dispatch}) => {
useEffect (() => {
ΠΎΡΠΏΡΠ°Π²ΠΊΠ° (deleteTodo ())
}, [ΠΎΡΠΏΡΠ°Π²ΠΊΠ°])
}
ΠΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ
Π€ΡΠ½ΠΊΡΠΈΡ connect ()
— ΡΡΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠΈΠΏΠΈΡΠ½ΡΡ
ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ React ΠΊ Redux.Π‘Π²ΡΠ·Π°Π½Π½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΈΠ½ΠΎΠ³Π΄Π° Π½Π°Π·ΡΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ .
Π₯ΠΎΡΠΎΡΠΎ, ΡΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΡΠ»ΠΎΠ²ΠΈΠΉ Redux. Π§ΠΈΡΠ°ΡΡ ΡΠ΅ΡΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΡ Π±Π΅Π· ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°ΡΡΡΠ΄Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΠΈΡΡΡΠΏΠΈΠΌ.
ΠΠ°ΡΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΡ
ΠΠ»Ρ ΠΎΠ±Π»Π΅Π³ΡΠ΅Π½ΠΈΡ Π±ΡΡΡΡΠΎΠ³ΠΎ Π½Π°ΡΠ°Π»Π° ΡΠ°Π±ΠΎΡΡ Π² ΠΌΠΎΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΡΠ΅Π΄Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Create React.
npx create-react-app redux-tutorial
cd redux-tutorial
Redux ΡΡΠ΅Π±ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠ΅ΠΉ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ yarn Π΄ΠΎΠ±Π°Π²ΠΈΡΡ
ΠΈΠ»ΠΈ npm i
ΠΈΡ
, ΠΈ Ρ ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ΄Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ react-router-dom
, Π½ΠΎ ΡΡΠΎ Π²ΡΠ΅ Π΄Π»Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ
Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠ΅ΠΉ.
npm i \
ΡΠ΅Π΄ΡΠΊΡΠΈΡ \
ΡΠ΅Π°ΠΊΡΠΈΡ-ΡΠ΅Π΄ΡΠΊΡΠΈΡ \
redux-thunk \
redux-devtools-extension \
ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ-ΠΌΠ°ΡΡΡΡΡΠΈΠ·Π°ΡΠΎΡ-Π΄ΠΎΠΌ
Π ΡΠ΄Π°Π»ΠΈΡΠ΅ Π²ΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ. ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π²ΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠ΅ Ρ Π½ΡΠ»Ρ.
ΠΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ΠΈ Π΄Π»Ρ Redux reducer
ΠΈ Redux Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ
, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΡΡΠ°Π½ΠΈΡ
ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ²
, Ρ ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π²Ρ ΡΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π·Π½Π°ΠΊΠΎΠΌΡ ΠΏΠΎ React.
mkdir Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡΡ
Π ΠΌΡ Π²Π΅ΡΠ½Π΅ΠΌ index.js
, App.js
ΠΈ index.css
.
ΡΠ΅Π½ΡΠΎΡΠ½ΡΠΉ index.js index.css App.js
ΠΡΠ°ΠΊ, Π½Π° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π΄Π΅ΡΠ΅Π²ΠΎ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ΠΎΠ² Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
βββ src /
βββ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ /
βββ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ /
βββ ΡΡΡΠ°Π½ΠΈΡΡ /
βββ ΡΠ΅Π΄ΡΠΊΡΠΎΡΡ /
βββ App.js
βββ index.css
βββ index.js
ΠΠ»Ρ ΠΈΠ½Π΄Π΅ΠΊΡΠ° .css
, ΠΏΡΠΎΡΡΠΎ Π²ΠΎΠ·ΡΠΌΠΈΡΠ΅ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΈ Π²ΡΡΠ°Π²ΡΡΠ΅. Π― ΡΠΎΠ±ΠΈΡΠ°ΡΡΡ ΠΎΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΠΈ, Π° Π½Π΅ Π½Π° ΡΡΠΈΠ»Π΅, ΠΏΠΎΡΡΠΎΠΌΡ Ρ ΠΏΡΠΎΡΡΠΎ Π½Π°ΠΏΠΈΡΠ°Π» Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΡΡ
ΡΡΠΈΠ»Π΅ΠΉ, ΡΡΠΎΠ±Ρ ΡΠ°ΠΉΡ Π²ΡΠ³Π»ΡΠ΄Π΅Π» Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΈΠ»ΠΈΡΠ½ΠΎ.
Π’Π΅ΠΏΠ΅ΡΡ Ρ Π½Π°Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠ°Π±Π»ΠΎΠ½Π°, ΡΡΠΎΠ±Ρ Π½Π°ΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΡ ΠΏΡΠΈΡΡΡΠΏΠΈΠΌ ΠΊ ΡΠ°Π±ΠΎΡΠ΅ Π½Π°Π΄ ΡΠΎΡΠΊΠΎΠΉ Π²Ρ ΠΎΠ΄Π°.
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° Redux Store
ΠΠΎΠ³Π΄Π° Ρ ΡΠΎΠ»ΡΠΊΠΎ Π½Π°ΡΠ°Π» ΠΈΠ·ΡΡΠ°ΡΡ Redux, ΡΡΠΎ ΠΏΠΎΠΊΠ°Π·Π°Π»ΠΎΡΡ ΠΌΠ½Π΅ ΡΠ°ΠΊΠΈΠΌ ΠΎΡΠ΅Π»ΠΎΠΌΠ»ΡΡΡΠΈΠΌ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Ρ ΡΠΌΠΎΡΡΠ΅Π», Π±ΡΠ»ΠΎ Π½Π°ΡΡΡΠΎΠ΅Π½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎ-Π΄ΡΡΠ³ΠΎΠΌΡ.ΠΠΎΡΠΌΠΎΡΡΠ΅Π² Π½Π° ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π²Π·ΡΠ² Π°ΡΠΏΠ΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ»ΠΈ ΠΎΠ±ΡΠΈΠΌΠΈ Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΈΠ· Π½ΠΈΡ , Ρ ΠΏΠΎΠ»ΡΡΠΈΠ» Ρ ΠΎΡΠΎΡΠ΅Π΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Redux, ΠΈ ΡΡΠΎ Π»ΡΠ΄ΠΈ ΠΏΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ Π²Π΅ΡΠΈ Π² Π±ΡΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΊΠ°ΠΆΡΡ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΠΌΠ°Π³Π°Π·ΠΈΠ½ Redux Ρ Π½Π°ΡΡΡΠΎΠ΅Π½Π½ΡΠΌΠΈ Π·Π°Π΄Π°ΡΠ°ΠΌΠΈ, Π½ΠΎ Ρ Π½Π΅ ΡΡΠΈΡΠ°Ρ ΡΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌ Π΄Π»Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΡΠΎΠ²Π΅Π½Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡΠ²Π°, ΠΏΠΎΡΡΠΎΠΌΡ Ρ ΡΠΎΠ±ΠΈΡΠ°ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π²ΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠ΅ Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π½Π°ΡΠ°Π»Π°.ΠΠ°ΠΆΠ΅ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π±ΡΠ΄ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΏΡΡΠΌΡΠ΅ Π°ΡΠΏΠ΅ΠΊΡΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Redux ΠΎΡΠ΅Π½Ρ Π³ΠΈΠ±ΠΊΠΈΠΉ.
Π index.js
ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π΅ΡΠ΅ΠΉ.
-
createStore
, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Redux -
applyMiddleware
, ΡΡΠΎΠ±Ρ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ, Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅thunk
-
ΠΡΠΎΠ²Π°ΠΉΠ΄Π΅Ρ
, ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠ½ΡΡΡ Π²ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² Redux -
thunk
, ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΠΠ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π² Redux -
composeWithDevTools
, ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅Ρ Π²Π°ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊ Redux DevTools
ΠΈΠ½Π΄Π΅ΠΊΡ.js
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ React ΠΈΠ· 'React'
import {render} ΠΈΠ· 'react-dom'
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {createStore, applyMiddleware} ΠΈΠ· redux
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {Provider} ΠΈΠ· 'response-redux'
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΈΠ· 'redux-thunk'
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {composeWithDevTools} ΠΈΠ· 'redux-devtools-extension'
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ· './App'
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ rootReducer ΠΈΠ· './reducers'
import './index.css'
const store = createStore (rootReducer, composeWithDevTools (applyMiddleware (thunk)))
Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ (
<ΠΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ />
,
Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ.getElementById ('ΠΊΠΎΡΠ΅Π½Ρ'),
)
ΠΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π² App.js
. ΠΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ ΡΡΠΎ ΠΏΠΎΠ·ΠΆΠ΅, Π½ΠΎ ΠΏΠΎΠΊΠ° ΠΌΡ ΠΏΡΠΎΡΡΠΎ Ρ
ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π±ΠΎΡΠ°Π»ΠΎ.
App.js
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ React ΠΈΠ· React
const App = () => {
return ΠΡΠΈΠ²Π΅Ρ, Redux
}
ΡΠΊΡΠΏΠΎΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
ΠΠ²ΠΎΠ΄ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠΎΠ²
ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ Π²Π²Π΅ΡΡΠΈ ΡΠ΅Π΄ΡΠΊΡΠΎΡ. Π Π΅Π΄ΡΠΊΡΠΎΡ — ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Redux.ΠΡΠΎ ΡΠΈΡΡΠ°Ρ ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΠΊΠΎΠΏΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Ρ Π½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ.
ΠΠ·ΡΡΠ½Π°Ρ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ Redux Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠΌΠ΅ΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠΎΠ² ΠΈ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡ ΠΈΡ
Π²ΡΠ΅ Π² ΠΎΠ΄ΠΈΠ½ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ΅Π΄ΡΠΊΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Ρ
ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ combReducers
. ΠΡΠΎ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π»Π΅Π³ΠΊΠΎ ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°ΡΡ Π½Π°Ρ ΠΊΠΎΠ΄, ΡΠΎΡ
ΡΠ°Π½ΡΡ ΠΏΡΠΈ ΡΡΠΎΠΌ Π²ΡΠ΅ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΌ Π΄Π΅ΡΠ΅Π²Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ.
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΡ
ΠΎΠΆΠ΅ Π½Π° Π±Π»ΠΎΠ³, Π² Π½Π΅ΠΌ Π±ΡΠ΄Π΅Ρ ΡΠΏΠΈΡΠΎΠΊ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ, ΠΈ ΠΌΡ ΡΠ΅ΠΉΡΠ°Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠΌ Π΅Π³ΠΎ Π² ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉReducer
.ΠΠ°Π»ΠΈΡΠΈΠ΅ ΡΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π° combReducers
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π²ΡΠ΅, ΡΡΠΎ ΠΌΡ Ρ
ΠΎΡΠΈΠΌ — commentsReducer
, authReducer ΠΈ Ρ. Π.
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΠ°ΠΉΠ», ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡ Π²ΡΠ΅ ΡΠ΅Π΄ΡΠΊΡΠΎΡΡ Π² redurs / index.js
.
ΡΠ΅Π΄ΡΠΊΡΠΎΡΠΎΠ² / index.js
ΠΈΠΌΠΏΠΎΡΡ {combReducers} ΠΈΠ· "redux"
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ postsReducer ΠΈΠ· './postsReducer'
const rootReducer = combReducers ({
posts: postsReducer,
})
ΡΠΊΡΠΏΠΎΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ rootReducer
ΠΠ°ΠΊΠΎΠ½Π΅Ρ, ΠΌΡ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ Reducer
.ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°ΡΡΡΠΎΠΈΡΡ Π΅Π³ΠΎ Ρ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ. ΠΠ°ΠΊ ΠΈ ΡΠ»Π΅Π΄ΠΎΠ²Π°Π»ΠΎ ΠΎΠΆΠΈΠ΄Π°ΡΡ ΠΎΡ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° React, Ρ Π½Π°Ρ Π±ΡΠ΄Π΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ , Π·Π°Π³ΡΡΠΆΠ°ΡΡΠ΅Π΅
ΠΈ hasErrors
, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΌΠ°ΡΡΠΈΠ² ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ
, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π±ΡΠ΄ΡΡ ΠΆΠΈΡΡ Π²ΡΠ΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ. Π‘Π½Π°ΡΠ°Π»Π° ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ Π΅Π³ΠΎ Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ
-Π»ΠΈΠ±ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Π² ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅, ΠΏΡΠΎΡΡΠΎ ΡΠ»ΡΡΠ°ΠΉ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ Π²ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅.
Π Π΅Π΄ΡΠΊΡΠΎΡΡ / ΠΏΠΎΡΡΡ
Reducer.js
ΡΠΊΡΠΏΠΎΡΡ const initialState = {
ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ: [],
Π·Π°Π³ΡΡΠ·ΠΊΠ°: Π»ΠΎΠΆΡ,
hasErrors: Π»ΠΎΠΆΡ,
}
ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ postsReducer (state = initialState, action) {
ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ (Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅.ΡΠΈΠΏ) {
ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ:
ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°
}
}
Π’Π΅ΠΏΠ΅ΡΡ Ρ Π½Π°Ρ, ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅, Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π½Π°ΡΡΡΠΎΠ΅ΠΊ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΡΡΠΆΠ°Π»ΠΎΡΡ Π±Π΅Π· ΡΠ±ΠΎΠ΅Π².
Redux ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°
ΠΠΎΡΠ»Π΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Redux
ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π²Π·Π³Π»ΡΠ½ΡΡΡ Π½Π° Redux DevTools. ΠΠΎΡΠ»Π΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π²ΠΊΠ»Π°Π΄ΠΊΠ° Π² Π²Π°ΡΠΈΡ
ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°Ρ
ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°. ΠΡΠ»ΠΈ Π²Ρ Π½Π°ΠΆΠΌΠ΅ΡΠ΅ Π½Π° State , Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π²ΡΠ΅ ΡΠ΅ΠΊΡΡΠ΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΠ΄Π΅ΡΡ Π΅ΡΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ, Π½ΠΎ Redux DevTools ΠΏΡΠΎΡΡΠΎ Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ΅Π½, ΠΊΠΎΠ³Π΄Π° Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠΎΠ² ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ.ΠΠ½ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π΅Ρ Π²ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² Π²Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΈ ΡΠΏΡΠΎΡΠ°Π΅Ρ ΠΎΡΠ»Π°Π΄ΠΊΡ ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΠΎΠ±ΡΡΠ½ΡΠΌ React.
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Redux
ΠΡΠ°ΠΊ, ΡΠ΅ΠΏΠ΅ΡΡ Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡ Π΄Π»Ρ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ, Π½ΠΎ Ρ Π½Π°Ρ Π½Π΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ, ΡΠΎ Π΅ΡΡΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ Π΅Π³ΠΎ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. ΠΠ΅ΠΉΡΡΠ²ΠΈΡ — ΡΡΠΎ ΡΠΎ, ΠΊΠ°ΠΊ ΠΌΡ ΠΎΠ±ΡΠ°Π΅ΠΌΡΡ Ρ ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠΌ Redux. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ Π±Π»ΠΎΠ³Π° ΠΌΡ Π·Π°Ρ ΠΎΡΠΈΠΌ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ ΠΈΠ· API ΠΈ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ ΠΈΡ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Redux.
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΠΌ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ΠΌ, ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΠ΅Π»Ρ Redux.Π ΡΡΠ°ΡΡΡΡ, Π½Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ Π½ΠΈΡΠ΅Π³ΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ thunk, ΠΊΡΠΎΠΌΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π΅Π³ΠΎ Π² ΠΌΠ°Π³Π°Π·ΠΈΠ½Π΅, ΡΡΠΎ ΠΌΡ ΡΠΆΠ΅ ΡΠ΄Π΅Π»Π°Π»ΠΈ.
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ actions / postsActions.js
. Π‘Π½Π°ΡΠ°Π»Π° ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠΌ ΡΠΈΠΏΠΎΠ² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ ΠΊΠ°ΠΊ ΠΊΠΎΠ½ΡΡΠ°Π½ΡΡ. ΠΡΠΎ Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π½ΠΎ ΡΡΠΎ ΠΎΠ±ΡΠ΅ΠΏΡΠΈΠ½ΡΡΠΎΠ΅ ΡΠΎΠ³Π»Π°ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΏΡΠΎΡΠ°Π΅Ρ ΡΠΊΡΠΏΠΎΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ ΠΈ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Π΅Ρ ΠΎΠΏΠ΅ΡΠ°ΡΠΊΠΈ. ΠΡ Ρ
ΠΎΡΠΈΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΈ Π²Π΅ΡΠΈ:
-
getPosts
— Π½Π°ΡΠ½ΠΈΡΠ΅ ΡΠΎΠΎΠ±ΡΠ°ΡΡ Redux, ΡΡΠΎ ΠΌΡ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΡΡ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ ΠΈΠ· API -
getPostsSuccess
— ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ Π² Redux ΠΏΡΠΈ ΡΡΠΏΠ΅ΡΠ½ΠΎΠΌ Π²ΡΠ·ΠΎΠ²Π΅ API -
getPostsFailure
— ΡΠΎΠΎΠ±ΡΠΈΡΡ Redux, ΡΡΠΎ Π²ΠΎ Π²ΡΠ΅ΠΌΡ Redux ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»Π° ΠΎΡΠΈΠ±ΠΊΠ° ΠΏΡΠΈ Π½Π΅ΡΠ΄Π°ΡΠ½ΠΎΠΌ Π²ΡΠ·ΠΎΠ²Π΅ API
Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ / ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉActions.js
ΡΠΊΡΠΏΠΎΡΡ const GET_POSTS = 'GET_POSTS'
ΡΠΊΡΠΏΠΎΡΡ const GET_POSTS_SUCCESS = 'GET_POSTS_SUCCESS'
ΠΊΠΎΠ½ΡΡΠ°Π½ΡΠ° ΡΠΊΡΠΏΠΎΡΡΠ° GET_POSTS_FAILURE = 'GET_POSTS_FAILURE'
ΠΠ°ΡΠ΅ΠΌ ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Π΅ΠΉ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ , ΡΡΠ½ΠΊΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ , ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· ΡΠΈΠΏΠ° ΠΈ Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ Π½Π°Π³ΡΡΠ·ΠΊΠΈ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅ΠΉ Π΄Π°Π½Π½ΡΠ΅.
Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ / ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉActions.js
export const getPosts = () => ({
ΡΠΈΠΏ: GET_POSTS,
})
export const getPostsSuccess = (posts) => ({
ΡΠΈΠΏ: GET_POSTS_SUCCESS,
ΠΏΠΎΠ»Π΅Π·Π½Π°Ρ Π½Π°Π³ΡΡΠ·ΠΊΠ°: ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ,
})
export const getPostsFailure = () => ({
ΡΠΈΠΏ: GET_POSTS_FAILURE,
})
ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Π²ΡΠΏΠΎΠ»Π½ΠΈΡΠ΅ Π°ΡΠΈΠ½Ρ
ΡΠΎΠ½Π½ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡΠ΅Π΅ Π²ΡΠ΅ ΡΡΠΈ Π²ΡΡΠ΅ΡΠΊΠ°Π·Π°Π½Π½ΡΡ
Π΄Π΅ΠΉΡΡΠ²ΠΈΡ.ΠΡΠΈ Π²ΡΠ·ΠΎΠ²Π΅ ΠΎΠ½ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ getPosts ()
, ΡΡΠΎΠ±Ρ ΡΠΎΠΎΠ±ΡΠΈΡΡ Redux ΠΎ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΊΠ΅ ΠΊ Π²ΡΠ·ΠΎΠ²Ρ API, Π·Π°ΡΠ΅ΠΌ Π² try / catch
Π΄Π΅Π»Π°Π΅Ρ Π²ΡΠ΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΠ΅ Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄Π°Π½Π½ΡΡ
ΠΈ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΡΡΠΏΠ΅Ρ
Π° ΠΈΠ»ΠΈ ΠΎΡΠΊΠ°Π·Π°, Π΅ΡΠ»ΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ. .
Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ / ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉActions.js
ΡΡΠ½ΠΊΡΠΈΡ ΡΠΊΡΠΏΠΎΡΡΠ° fetchPosts () {
return async (ΠΎΡΠΏΡΠ°Π²ΠΊΠ°) => {
ΠΎΡΠΏΡΠ°Π²ΠΊΠ° (getPosts ())
ΠΏΡΡΠ°ΡΡΡΡ {
const response = ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΠ΅ Π²ΡΠ±ΠΎΡΠΊΠΈ ('https://jsonplaceholder.typicode.com/posts')
const data = ΠΆΠ΄Π°ΡΡ ΠΎΡΠ²Π΅ΡΠ°.json ()
ΠΎΡΠΏΡΠ°Π²ΠΊΠ° (getPostsSuccess (Π΄Π°Π½Π½ΡΠ΅))
} catch (ΠΎΡΠΈΠ±ΠΊΠ°) {
ΠΎΡΠΏΡΠ°Π²ΠΊΠ° (getPostsFailure ())
}
}
}
ΠΡΠ»ΠΈΡΠ½ΠΎ, ΠΌΡ Π·Π°ΠΊΠΎΠ½ΡΠΈΠ»ΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ! ΠΡΠ΅, ΡΡΠΎ ΠΎΡΡΠ°Π»ΠΎΡΡ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡΡ, ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ.
Π Π΅Π°Π³ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π° Π΄Π΅ΠΉΡΡΠ²ΠΈΡ
ΠΠ΅ΡΠ½ΡΠ²ΡΠΈΡΡ ΠΊ Π½Π°ΡΠ΅ΠΌΡ ΠΏΠΎΡΡΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡΡ, Ρ Π½Π°Ρ Π΅ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π΅ΡΠ΅ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ Π΄Π΅Π»Π°Π΅Ρ.
Π Π΅Π΄ΡΠΊΡΠΎΡΡ / ΠΏΠΎΡΡΡ
Reducer.js
ΡΠΊΡΠΏΠΎΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ postsReducer (state = initialState, action) {
ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ (Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅.ΡΠΈΠΏ) {
ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ:
ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°
}
}
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Ρ Π½Π°Ρ Π΅ΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠ΅ΡΠ΅Π½Π΅ΡΡΠΈ ΠΈΡ
ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΡ postsActions
.
import * ΠΊΠ°ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΈΠ· '../actions/postsActions'
ΠΠ»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΌΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΡΠ»ΡΡΠ°ΠΉ
, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ Π²ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΠ»ΡΡ Π»ΡΠ±ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ Π² Π½Π΅Π³ΠΎ Π²Π½ΠΎΡΠΈΠΌ. ΠΠ»Ρ GET_POSTS
, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΡΠ΅, ΡΡΠΎ ΠΌΡ Ρ
ΠΎΡΠΈΠΌ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ loading
Π½Π° true
, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ Π΄Π΅Π»Π°ΡΡ Π²ΡΠ·ΠΎΠ² API.
ΠΊΠ΅ΠΉΡΡ. GET_POSTS:
return {... state, loading: true}
-
GET_POSTS
— Π½Π°ΡΠ°ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ -
GET_POSTS_SUCCESS
— Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π΅ΡΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ, Π½Π΅Ρ ΠΎΡΠΈΠ±ΠΎΠΊ, ΠΈ ΠΎΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΡΡΠ°ΡΡ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ -
GET_POSTS_FAILURE
— ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΎΡΠΈΠ±ΠΊΠΈ ΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΡΡΠ°ΡΡ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ
ΠΠΎΡ ΠΈ Π²Π΅ΡΡ ΡΠ΅Π΄ΡΠΊΡΠΎΡ.
Π Π΅Π΄ΡΠΊΡΠΎΡΡ / ΠΏΠΎΡΡΡ
Reducer.js
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ * ΠΊΠ°ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΈΠ· "../actions/postsActions"
export const initialState = {
ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ: [],
Π·Π°Π³ΡΡΠ·ΠΊΠ°: Π»ΠΎΠΆΡ,
hasErrors: Π»ΠΎΠΆΡ,
}
ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ postsReducer (state = initialState, action) {
ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ (Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅.ΡΠΈΠΏ) {
case actions.GET_POSTS:
return {... state, loading: true}
case actions.GET_POSTS_SUCCESS:
return {posts: action.payload, loading: false, hasErrors: false}
case actions.GET_POSTS_FAILURE:
return {... ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π·Π°Π³ΡΡΠ·ΠΊΠ°: false, hasErrors: true}
ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ:
ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°
}
}
Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΡΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΈ ΡΠ΅Π΄ΡΠΊΡΠΎΡΡ Π³ΠΎΡΠΎΠ²Ρ, ΡΠ°ΠΊ ΡΡΠΎ Π²ΡΠ΅, ΡΡΠΎ ΠΎΡΡΠ°Π»ΠΎΡΡ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ Π²ΡΠ΅ ΠΊ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ React.
ΠΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Redux ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌ React
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ΅ ΠΌΠ½ΠΎΠΉ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ React Router, ΡΡΠΎΠ±Ρ ΠΈΠΌΠ΅ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠ°ΡΡΡΡΡΠΎΠ² — ΠΏΠ°Π½Π΅Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ, ΡΠΏΠΈΡΠΎΠΊ Π²ΡΠ΅Ρ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ ΠΈ ΡΡΡΠ°Π½ΠΈΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ, Ρ ΡΠ΅ΠΉΡΠ°Ρ Π΄ΠΎΠ±Π°Π²Π»Ρ React Router.Π― ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²Π»Ρ ΠΏΠ°Π½Π΅Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΈ ΡΠΏΠΈΡΠΎΠΊ Π²ΡΠ΅Ρ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΡΡΠΎΠΉ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ.
App.js
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ React ΠΈΠ· React
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {BrowserRouter as Router, Switch, Route, Redirect} ΠΈΠ· 'response-router-dom'
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ DashboardPage ΠΈΠ· './pages/DashboardPage'
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ PostsPage ΠΈΠ· './pages/PostsPage'
const App = () => {
Π²ΠΎΠ·Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ (
<ΠΠ°ΡΡΡΡΡΠΈΠ·Π°ΡΠΎΡ>
<ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ>
<Π’ΠΎΡΠ½ΡΠΉ ΠΏΡΡΡ ΠΌΠ°ΡΡΡΡΡΠ° = "/" component = {DashboardPage} />
<Π’ΠΎΡΠ½ΡΠΉ ΠΏΡΡΡ ΠΌΠ°ΡΡΡΡΡΠ° = "/ posts" component = {PostsPage} />
<ΠΠ΅ΡΠ΅Π½Π°ΠΏΡΠ°Π²ΠΈΡΡ Π½Π° = "/" />
)
}
ΡΠΊΡΠΏΠΎΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ±ΡΡΠ½ΡΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠΌ React.
ΡΡΡΠ°Π½ΠΈΡ / DashboardPage.js
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ React ΠΈΠ· React
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {Link} ΠΈΠ· 'response-router-dom'
const DashboardPage = () => (
<ΡΠ°Π·Π΄Π΅Π»>
ΠΠ°Π½Π΅Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ
ΠΡΠΎ ΠΏΠ°Π½Π΅Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ.
<Π‘ΡΡΠ»ΠΊΠ° Π½Π° = "/ posts" className = "button">
ΠΡΠΎΡΠΌΠΎΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ
)
ΡΠΊΡΠΏΠΎΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ DashboardPage
ΠΠ»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΠΎΡΡΠ° ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Post
, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ ΠΎΡΡΡΠ²ΠΎΠΊ ΠΈΠ· ΡΠ΅ΠΊΡΡΠ° ΡΡΠ°ΡΡΠΈ.Π‘Π΄Π΅Π»Π°ΠΉΡΠ΅ Post.js
Π² ΠΏΠΎΠ΄ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π΅ components
.
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² / Post.js
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ React ΠΈΠ· React
ΡΠΊΡΠΏΠΎΡΡ const Post = ({post}) => (
{post.title}
{post.body.substring (0, 100)}
)
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡΡΡ ΠΊ Redux, ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π²Π°ΠΆΠ½Ρ ΠΈ ΠΏΠΎΠ»Π΅Π·Π½Ρ Π΄Π»Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΠΌΠ½ΠΎΠ³ΠΎΠΊΡΠ°ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΠΎΠ±Π»Π°ΡΡΠ΅ΠΉ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΡΡΠΎΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Post.
Π’Π΅ΠΏΠ΅ΡΡ ΡΠ°ΠΌΠΎΠ΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ — ΠΏΠ΅ΡΠ΅Π½ΠΎΡ Redux Π² React. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ , ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡΡ
Ρ react-redux
. ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ
, ΠΌΡ ΠΏΡΠΎΡΡΠΎ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΠΎΠ±ΡΡΠ½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΈΡΡ.
ΡΡΡΠ°Π½ΠΈΡ / PostsPage.js
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ React ΠΈΠ· React
const PostsPage = () => {
Π²ΠΎΠ·Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ (
<ΡΠ°Π·Π΄Π΅Π»>
Π‘ΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ
)
}
ΡΠΊΡΠΏΠΎΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ PostsPage
ΠΠ°ΡΠ΅ΠΌ Π²Π²Π΅Π΄Π΅ΠΌ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΠΌ
.Π€ΡΠ½ΠΊΡΠΈΡ connect — ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΡ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΎΠ³ΠΎ ΠΏΠΎΡΡΠ΄ΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΎΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ Ρ
ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ Redux Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠΌ React. ΠΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π΄ΠΈΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ mapStateToProps
Π² connect
. ΠΡΠ° ΡΡΠ½ΠΊΡΠΈΡ Ρ ΡΠ΄Π°ΡΠ½ΡΠΌ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π»ΡΠ±ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΈΠ· Ρ
ΡΠ°Π½ΠΈΠ»ΠΈΡΠ° Redux ΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°Π²Π°ΡΡ Π΅Π³ΠΎ Π² ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° React. ΠΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ , Π·Π°Π³ΡΡΠΆΠ°ΡΡΠΈΠ΅
, ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ
ΠΈ hasErrors
ΠΈΠ· ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ Redux Reducer
.
ΡΡΡΠ°Π½ΠΈΡ / PostsPage.js
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ React ΠΈΠ· React
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡΡΡ} ΠΈΠ· 'response-redux'
const PostsPage = ({Π·Π°Π³ΡΡΠ·ΠΊΠ°, ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ, hasErrors}) => {
Π²ΠΎΠ·Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ (
<ΡΠ°Π·Π΄Π΅Π»>
Π‘ΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ
)
}
const mapStateToProps = (ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅) => ({Π·Π°Π³ΡΡΠ·ΠΊΠ°: ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅.posts.loading, posts: state.posts.posts, hasErrors: state.posts.hasErrors,}) ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ (mapStateToProps) (PostsPage)
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ°, ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ ΡΠ°ΠΊΠΆΠ΅ Π½Π°ΠΏΠΈΡΠ°ΡΡ
state => state.posts
. ΠΠ΄Π½Π°ΠΊΠΎ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΈΡΠ°ΡΡ ΡΡΠΎ Π΄ΠΎΠ»Π³ΠΈΠΌ ΠΏΡΡΠ΅ΠΌ, ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π·Π½Π°ΡΡ Π² ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠΎΠ² Π² ΠΎΠ΄ΠΈΠ½ ΠΈ ΡΠΎΡ ΠΆΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ.
ΠΠ°ΠΊΠΎΠ½Π΅Ρ, ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π°ΡΠΈΠ½Ρ
ΡΠΎΠ½Π½ΡΠΉ fetchPosts
ΠΈΠ· Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅, ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡΠ΅Π΅ Π²Π΅ΡΡ ΠΆΠΈΠ·Π½Π΅Π½Π½ΡΠΉ ΡΠΈΠΊΠ» ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π²ΡΠ΅Ρ
ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ Π² ΠΎΠ΄Π½ΠΎ.ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ useEffect
ΠΎΡ React, ΠΌΡ ΠΎΡΠΏΡΠ°Π²ΠΈΠΌ
fetchPosts
ΠΏΡΠΈ ΠΌΠΎΠ½ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°. ΠΡΠΏΡΠ°Π²ΠΊΠ°
Π±ΡΠ΄Π΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π΄ΠΎΡΡΡΠΏΠ½Π° Π½Π° ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½Π½ΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅.
ΡΡΡΠ°Π½ΠΈΡ / PostsPage.js
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ React, {useEffect} ΠΈΠ· 'react'import {connect} ΠΈΠ·' react-redux '
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {fetchPosts} ΠΈΠ· "../actions/postsActions"
const PostsPage = ({ΠΎΡΠΏΡΠ°Π²ΠΊΠ°, Π·Π°Π³ΡΡΠ·ΠΊΠ°, ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ, hasErrors}) => {useEffect (() => {dispatch (fetchPosts ())}, [ΠΎΡΠΏΡΠ°Π²ΠΊΠ°])
Π²ΠΎΠ·Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ (
<ΡΠ°Π·Π΄Π΅Π»>
Π‘ΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ
)
}
const mapStateToProps = (ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅) => ({
Π·Π°Π³ΡΡΠ·ΠΊΠ°: ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅.posts.loading,
posts: state.posts.posts,
hasErrors: state.posts.hasErrors,
})
ΡΠΊΡΠΏΠΎΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ (mapStateToProps) (PostsPage)
ΠΡΠ΅, ΡΡΠΎ ΠΎΡΡΠ°Π»ΠΎΡΡ ΡΠ΄Π΅Π»Π°ΡΡ Π½Π° ΡΡΠΎΠΌ ΡΡΠ°ΠΏΠ΅, — ΡΡΠΎ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ Π²ΡΠ΅ ΡΡΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ — Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ Π»ΠΈ ΠΎΠ½Π°, Π΅ΡΡΡ Π»ΠΈ ΠΎΡΠΈΠ±ΠΊΠ° ΠΈΠ»ΠΈ ΡΡΠΏΠ΅ΡΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠ΅Π½Ρ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ ΠΈΠ· API.
ΡΡΡΠ°Π½ΠΈΡ / PostsPage.js
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ React, {useEffect} ΠΈΠ· "ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ"
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡΡΡ} ΠΈΠ· 'response-redux'
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {fetchPosts} ΠΈΠ· "../actions/postsActions"
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {Post} ΠΈΠ· '../components/Post '
const PostsPage = ({ΠΎΡΠΏΡΠ°Π²ΠΊΠ°, Π·Π°Π³ΡΡΠ·ΠΊΠ°, ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ, hasErrors}) => {
useEffect (() => {
ΠΎΡΠΏΡΠ°Π²ΠΊΠ° (fetchPosts ())
}, [ΠΎΡΠΏΡΠ°Π²ΠΊΠ°])
const renderPosts = () => {if (loading) return ΠΠ°Π³ΡΡΠ·ΠΊΠ° ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ ...
if (hasErrors) return ΠΠ΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ.
return posts.map ((post) => <ΠΠ»ΡΡ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠΈ = {post.id} post = {post} />)}
Π²ΠΎΠ·Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ (
<ΡΠ°Π·Π΄Π΅Π»>
Π‘ΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ
{renderPosts ()}
)
}
const mapStateToProps = (ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅) => ({
Π·Π°Π³ΡΡΠ·ΠΊΠ°: ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅.posts.loading,
posts: state.posts.posts,
hasErrors: state.posts.hasErrors,
})
ΡΠΊΡΠΏΠΎΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ (mapStateToProps) (PostsPage)
Π Π²ΡΠ΅ — ΡΠ΅ΠΏΠ΅ΡΡ Ρ Π½Π°Ρ Π΅ΡΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, ΠΈ ΠΌΡ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΈΠΌ Π΄Π°Π½Π½ΡΠ΅ ΠΈΠ· API Π² Π½Π°ΡΠ΅ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ Redux. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ Redux DevTools, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΠΈΠ΄Π΅ΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅, ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ, ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ (ΡΠ°Π·Π»ΠΈΡΠΈΠ΅) ΠΏΠΎΡΠ»Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ.
ΠΠΎΠ½Π΅Ρ
ΠΠ° ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΡΠΎΡΡΡΠΌ Redux Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°Π΅ΡΡΡ.ΠΡΠ»ΠΈ Π²Ρ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π±ΡΠ»ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ — ΡΠ΅Π΄ΡΠΊΡΠΎΡ ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ ΠΈ Π΄Π»Ρ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π².
Π― Π±Ρ ΠΏΠΎΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π» Π·Π°Π²Π΅ΡΡΠΈΡΡ Π²Π°Ρ ΠΏΡΠΎΠ΅ΠΊΡ, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π» Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΌΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΈΡ Π½ΠΎΠ²ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½ΡΠΆΠ½ΠΎ ΠΈΠ·ΡΡΠ°ΡΡ, Π½ΠΎ Π²Ρ ΡΠΎΠ·Π΄Π°Π΄ΠΈΡΠ΅ Π΅ΡΠ΅ Π΄Π²Π° ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ° ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΈ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΠΊΠ°ΠΊ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ Π΄Π²Π° ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π² ΠΎΠ΄ΠΈΠ½ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΎΠ΄Π½ΠΈΠΌ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ΠΌ, ΡΡΠΎ ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΠΌ ΠΊ ΡΡΠΎΠΌΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ.
ΠΡΡΡ Π΅ΡΠ΅ ΠΎΠ΄Π½Π° Π²Π΅ΡΡ, ΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ Ρ Ρ ΠΎΡΡ ΡΠ°ΡΡΠΊΠ°Π·Π°ΡΡ — Redux Toolkit.Redux Toolkit ΠΈΠ»ΠΈ RTK — ΡΡΠΎ Π±ΠΎΠ»Π΅Π΅ Π½ΠΎΠ²ΡΠΉ ΠΈ ΠΏΡΠΎΡΡΠΎΠΉ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Redux. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Redux ΠΈΠΌΠ΅Π΅Ρ Π»ΠΎΡ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΈ ΡΡΠ΅Π±ΡΠ΅Ρ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΠΏΠ°ΠΏΠΎΠΊ ΠΈ ΡΠ°ΠΉΠ»ΠΎΠ², ΡΠ΅ΠΌ ΠΎΠ±ΡΡΠ½ΡΠΉ React. ΠΠΎΡΠ²ΠΈΠ»ΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΏΡΡΠ°ΡΡΡΡ ΡΠΌΡΠ³ΡΠΈΡΡ Π²ΡΠ΅ ΡΡΠΎ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°Π±Π»ΠΎΠ½ Redux ducks, Π½ΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΏΡΠΎΡΡΠΈΡΡ Π΅Π³ΠΎ Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅.
ΠΡΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Redux Toolkit, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅ΠΌ ΠΆΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ ΡΠΎΠ·Π΄Π°Π»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Redux, Π½ΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ RTK. ΠΡΠ΅ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠ΅, Ρ Π΄ΡΠ°
.