Jak zacząć od Redux?

Utwórz osobny folder w żądanej lokalizacji i otwórz okno terminala.

Po pomyślnym wykonaniu wspomnianego powyżej polecenia zobaczysz różne foldery na pasku bocznym naszego ekranu Visual Studio.

Tutaj możesz zobaczyć folder o nazwie src; usuń wszystkie pliki obecne w tym folderze SRC. Ponadto, wykonaj nowy plik i wymień, który indeksuje wraz z rozszerzeniem JS całkowicie indeks.JS. Po utworzeniu tego nowego pliku otwórz terminal i napisz następujące polecenie.

Jak widać w powyższym fragmencie, Menedżer pakietów węzłów (NPM) zainstaluje zestaw narzędzi Redux w naszym projekcie aplikacji React za pomocą polecenia instalacji.

Teraz utworzyliśmy naszą aplikację React i mamy również zakończenie instalacji zestawu narzędzi Redux. Czas ustawić nasze komponenty Redux w tym projekcie aplikacji React.

Po pierwsze, skonfigurujmy sklep naszego redukcji. W tym celu będziemy musieli zaimportować

Configurestore Funkcja od Redux.

Zwykle używamy Createstore wbudowana funkcja do tworzenia sklepu, ale Configurestore to ulepszony sposób na tworzenie sklepu, więc stworzymy nasz sklep za pomocą Configurestore funkcjonować. Składnia jest

import configurestore z „redux”;

Teraz ustawimy drugi najbardziej komponent Redux I-E, Reducer. Jak wiemy, bierze bieżący stan i wykonuje na nim akcję lub wydarzenie, więc teraz zdefiniujemy funkcję reduktora.

Sklep Funkcja musi być aktualizowana za każdym razem, gdy reduktor działa w stanie. Na każdym akcji wykonuje reduktor, wiemy, że obecny stan zmieni się w zaktualizowany stan. Aby zaktualizować wartości stanu sklepu, musimy użyć funkcji subskrybowania sklepu.

Powyższy fragment kodu mówi, w jaki sposób możemy ustawić nasz sklep i reduktor dla redukcji wraz z opisem. Jeśli uruchomi powyższy kod za pomocą komendy NPM Start, zobaczysz komunikat Reducer wyświetlony na ekranie konsoli.

Teraz, gdy wykonaliśmy nasz sklep i reduktor, sprawdźmy, czy sklep jest aktualizowany za każdym razem, gdy reduktor wykonuje zdarzenie lub działanie w obecnym stanie. W tym celu musimy wysłać akcję.

Każde działanie może mieć inny typ, ale działanie musi mieć typ. Tak jest, że chcemy coś wykonać z znaczącym celem. Rodzaj działania może być increment_number, dex_number, add_user, delete_records itp.

Zaktualizowaliśmy nasz kod o wysyłanie naszych działań ze sklepu do reduktora. Reduktor wykona te działania w bieżącym stanie i zwróci zaktualizowany stan. Później funkcja subskrypcji pomoże sklepowi zaktualizować wartości statusu w sklepie do przyszłego użycia.

W powyższym fragmencie można zobaczyć, że reduktor wykonał działanie numeru przyrostu do stanu = 0 i zwrócił stan = 1, sklep zaktualizował tę odpowiedź reduktora. Po wysyłce drugiej akcji z przyrostem, reduktor ponownie wzrósł w stanie i sprawił, że stan = 2. Po wykonaniu przez Reducer w wynikach, ostatnie wysłane działanie zmniejszania liczby aktualizuje stan ze stanu = 2 do stanu = 1.

Wniosek

W tym artykule utwórz prostą aplikację React, aby rozpocząć od Redux. Kod Visual Studio jest wykorzystywany do tworzenia aplikacji. W tym artykule pokazuje prosty kod, który ćwiczy Redux. Menedżer pakietów węzłów (NPM) instaluje zestaw narzędzi Redux w naszym projekcie aplikacji React za pomocą polecenia instalacji. Dlatego możesz to ćwiczyć i przeprowadzić inne eksperymenty dla własnej nauki.