Състав на компонента срещу Redux Store

Работейки с React и Redux, използвам прост модел, за да направя моите компоненти за многократна употреба и да разсъждавам. През изминалата 1 и половина година, работеща с React, разбрах, че всеки, който започва да работи с React и Redux, винаги се сблъсква с объркване да решите кой компонент трябва да взаимодейства с магазина за редукс и кои компоненти трябва просто да зависят от собственото състояние.

Така че в тази статия ще направя опит да направя това разграничение между това кога да избера състоянието на компонента и кога да избера магазина Redux по-лесно.

Като начало, нека се съсредоточим първо върху React.

React има два вида компоненти: -

  1. Интелигентни компоненти
  2. Тъмни компоненти - наричани също като презентационни компоненти

Начинът, по който разграничавам двете:

Ако даден компонент трябва да поддържа състояние, той се класифицира като интелигентен компонент.
Ако даден компонент просто трябва да показва данни и може да получи тези данни от неговия родителски компонент, тогава те са класифицирани като презентационни компоненти или тъпи компоненти.

Например: - Да речем, че имаме приложение за електронна търговия, където в страницата с продуктови обяви, която показва списък с продукти.

В този сценарий скелетът или голото оформление биха имали следните компоненти от по-високо ниво: -


 
     

Компонентът ProductsContainer тук ще се съсредоточи върху получаването на списък на продуктите, а след това повторете всеки от продуктите и ще направите всеки компонент на продукта.

Тук можем да наречем ProductsContainer като интелигентен компонент, тъй като този компонент поддържа състоянието, което в този случай е списък на продуктите.

Примерният код за компонента на продукта, който е нашият представителен компонент, ще изглежда така:

Горното е презентационен компонент, тъй като той отговаря само за показването на данни и ги получава под формата на реквизит от родителския си компонент.

Така че в заключение, ако компонент държи състояние и го манипулира, това е интелигентен компонент и ако компонент просто показва данни, които получава под формата на реквизит, тогава той се класифицира като презентационен компонент.

Златен цитат от Дан Абрамов, който подчертава това е:

Когато забележите, че някои компоненти не използват реквизитите, които получават, а ги препращат надолу и трябва да пренастроите всички тези междинни компоненти по всяко време, когато децата имат нужда от повече данни, е подходящ момент да въведете някои компоненти на контейнерите.

Ставаше дума за състоянието на компонента, следващият въпрос, който ни идва на ум, е кои данни трябва да влязат в магазина за намаляване.

Начинът, по който го класифицирам, е когато някога състоянието трябва да бъде споделено от множество компоненти или няколко страници и трябва да запазим някои данни за промените на маршрута, всички тези данни трябва да влязат вътре в магазина за намаляване.

За да продължим със същия пример, нека кажем, че всички тези продукти имат бутон за покупка сега и имаме количка, която трябва да съхранява всички онези елементи, за които е натиснат бутона за покупка сега.

Тази информация за количката трябва да се запазва на много страници и в компоненти като заглавния компонент, където в него ще покажем броя на количките, страницата за плащане и страницата за плащане.

Това е ясна индикация, че добавените в количката продукти трябва да влизат вътре в резервоара, а не в състояние на компоненти.

Това ни води до още едно разграничение между компонентите: -

  1. Всеки компонент, който е свързан с магазина за редукс, е класифициран като компонент Container. Той може да изпраща действия и да актуализира хранилището на redux чрез редукторите.
  2. Компонентите, които не са свързани с магазина за редукс, влизат в папката на компонентите. Сега тези компоненти също могат да бъдат класифицирани като Smart и Dumb, тъй като въпреки че не са свързани към магазина на redux, те все още могат да държат състояние, като се обадят на някои API и поддържане на тези данни само до живота на този компонент.

Например:-

Компонентът ShoppingApp може да се класифицира като компонент на контейнер и да бъде отговорен за извличане на първоначалния брой колички и информация за вход.

Няма да навлизаме задълбочено във функционирането на redux и различните функции на redux като mapStateToProps, създатели на действия, диспечери.

Всички тези неща могат да бъдат прочетени от Redux Docs.

Макетът за крайното приложение, което ще изграждаме, ще бъде нещо подобно: -

След добавяне на редуктори, компоненти, контейнери, действия пример за това как би искала структурата на моята директория е: -

Тук ShoppingApp ще бъде свързан с магазина за намаляване и ще изпрати действие за получаване на първоначалните данни за количката. Това прави ShoppingApp като компонент на контейнера.

ShoppingApp ще предаде тези данни на компонента на заглавката.

Това прави заглавката само като компонент и тъй като няма собствено състояние на компонент, той допълнително се класифицира в презентационен компонент.

ProductsContainer в редукционни условия не се класифицира като контейнерен компонент, тъй като не е свързан към магазина за редукс, но тъй като има собствено състояние на компонент, което го класифицира като интелигентен компонент.

Пълният код за горния пример можете да намерите на следния URL адрес на кодове и карти: -

За някои стайлинг добавих реагиращ материал-ui.

И така, в заключение, ако вашият компонент трябва да взаимодейства с хранилището на redux, да обработва данни и да изпраща действия, тогава той трябва да влезе в контейнери, в противен случай вътре в компонентите.

Допълнителна информация

  • Компоненти за презентации и контейнери
  • Документация Redux
  • Компоненти на контейнерите