Qarmaqlar üzərində əyri: Reaksiyalardan necə istifadə edirəmReducer ()?

Unsplash-də Paskal van de Vendelin fotosu

Beləliklə Reaksiya Konfransı sadəcə oldu və həmişə olduğu kimi, yeni bir şey baş verdi. Qarmaq olur! React komandası gərginlik, gecikmiş yükləmə, eyni vaxtda göstərmə və qarmaqlar barədə danışdı: D.

İndi ən çox istifadə etdiyim istifadəReducer çəngəlim və necə istifadə edəcəyim barədə danışacağam.

PokemonInfo komponentimdə:

const [{saymaq, yükləmə}, göndərmə] = istifadəReducer (azaltma, ilkinState);

Sinonim olan:

const [vəziyyət, göndərmə] = useReducer (Reducer, initialState); const {saymaq, yükləmə} = vəziyyət;

Beləliklə, const [vəziyyət, göndərmə] = useReducer (parametr1, parametr2) nədir?

const [vəziyyət, göndərmə] = useReducer (initialState);

Burada serialın məhv edilməsinə bir nümunə:

let myHeroes = ['Qarışqa adam', 'Batman']; // mix DC & Marvel: D let [marvelHero, dcHero] = myHeroes; // array məhv / ** * myHeroes [0] == marvelHero => 'qarışdır' * myHeroes [1] == dcHero => 'Batman' * /

Buna görə UseReducer metodu, serial vəziyyəti və göndərmə vəziyyətində iki elementə malikdir. UseReducer də iki parametr qəbul edir: biri reduktor, digəri ilkin vəziyyətdir.

UseReducer parametr reduktoruna aşağıdakıları daxil edirəm:

Bu iki arqument tələb edir. Biri reduktorun hazırkı vəziyyətidir, digəri isə hərəkətdir. Action.type reduktorun necə yeniləndiyini və yeni bir statusun bizə qaytarıldığını müəyyənləşdirir.

Beləliklə, əgər action.type === artımları

case 'artım': {qayıt {... vəziyyət, say: dövlət.count + 1, yükləmə: yalan}; }

... Nömrənin +1 ilə yeniləndiyi və yüklənmə səhv olduğu vəziyyətini qaytarır. State.count + 1 burada olsa da, dövlət əslində əvvəlki vəziyyətdədir.

IstifadəReducer param ilkinState daxil edirəm:

const initialState = {Yükləmə: səhv, nömrə: 0};

Beləliklə, bu başlanğıc vəziyyətdədirsə, istifadəReducer metodu öz elementindən, vəziyyətindən və göndərilməsindən iki elementi qaytarır. Vəziyyət metodu, iki açar sayım və pozulduğum serialda məhv etdiyim bir obyektdir.

Beləliklə, bir silsiləni məhv edirəm və serialın içərisində aşağıdakı kimi serialın ilk indeksindəki bir obyekti məhv edirəm.

const [{saymaq, yükləmə}, göndərmə] = istifadəReducer (azaltma, ilkinState);

Gecikmə deyilən bir üsulum da var

// 1500ms arqumentini vaxtında ötürdükdən sonra həqiqi qayıt. const gecikməsi = (vaxt = 1500) => {qayıdıb yeni söz verin (qərar => {setTimeout (() => {həll edin (doğru);}, vaxt);}); };

İndi + düyməsini basdığımda göstərmə metodumda

 

OnHandleIncrement funksiyası yerinə yetirilir və aşağıdakı hərəkətləri yerinə yetirir:

const onHandleIncrement = async () => {göndərmə ({növü: 'yükləmə'}); Gecikməni gözləyir (500); göndərmə ({növü: 'artım'}); };

Əvvəlcə yükü doğru təyin edir, 500 ms gecikmə əlavə edir və sonra sayğacı artırır. İndi bilirəm ki, bu həqiqi bir iş deyil, ancaq reduktorun necə işlədiyini izah edir.

Son şey:

Saymaq {yükləmə? 'yüklənir ..': sayı}

Yükləmə doğrudursa, Yükləmə sayını göstərirəm .. əks təqdirdə Mən {dəyəri} göstərirəm.

İstifadəçi interfeysində göründüyü budur:

Misalı istifadəReducer çəngəl ilə sayın

Dan Abramovun React Conference 2018-də təqdim etdiyi kodunu təkrarlamağa çalışdım. Kod kodu depozitinə bağlantı burada. Zövq alın. :)

Unutmayın ki, qarmaqlar React-ın bir alfa versiyasındadır və istehsalda istifadə üçün heç bir şəkildə tövsiyə edilmir. Ancaq gələcəkdə ekosistemin vacib bir hissəsi olma ehtimalı çox yüksəkdir. Beləliklə, indi reaksiya kancaları ilə ətrafında oynamağa başlamalısınız.