Π Π°Π·Π½ΠΎΠ΅

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 для обновлСния Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°.
  • константы содСрТат Π΄Π°Π½Π½Ρ‹Π΅ констант для нашСго прилоТСния.
  • И, Π½Π°ΠΊΠΎΠ½Π΅Ρ†, индСкс ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ нашС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² DOM.

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}

/>

)

}

}

экспорт ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 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;
    Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ (
      
<Π²Π²ΠΎΠ΄ type = "тСкст" Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ = {Π½Π°Π·Π²Π°Π½ΠΈΠ΅} onChange = {это.handleChange} />
); } } 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. ВсС Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‰Π΅, с Π΄Ρ€Π°

.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *