Co to jest Redux: wszystko, co musisz wiedzieć o tej bibliotece

Jeśli nadal nie wiesz co to jest Redux, w tym artykule skupimy się na wyjaśnieniu wszystkiego, co powinieneś wiedzieć o tej bibliotece JAVASCRIPToraz jego zastosowania, sposób jego wykorzystania itp. W ten sposób będziesz mieć wszystkie niezbędne narzędzia, aby móc zintegrować go z kolejnymi projektami JS.

Zobaczmy jak wygląda Redux!

Co to jest JavaScript?

JavaScript (JS), jest interpretowanym językiem programowania. Jest uważany za dialekt standardu ECMAScript i charakteryzuje się tym, że jest zorientowany obiektowo, oparty na prototypach, imperatywny, słabo typowany i dynamiczny. Pomimo swojej nazwy nie należy jej mylić z Javą. Jego powstanie opiera się na względach komercyjnych, po przejęciu firmy Sun Microsystems (twórcy Java) przez Netscape Navigator (twórcę LiveScript) i zmianie nazwy języka programowania.

Głównie używany po stronie klienta, stanowiący integralną część przeglądarek internetowych. Pozwala to na ulepszanie interfejsu użytkownika i tworzenie dynamicznych stron internetowych. Ponadto JavaScript może być używany po stronie serwera, znany jako JavaScript po stronie serwera lub SSJS. Jego zastosowanie wykracza poza sieć, znajdując zastosowanie w dokumentach PDF i aplikacjach komputerowych, głównie widżetach itp.

La Składnia JavaScript przypomina składnię języków takich jak C++ i Java, chociaż przyjmuje nazwy i konwencje z języka Java, stąd jego nazwa. Jednak, jak wspomniałem wcześniej, należy zauważyć, że pomimo podobnej nazwy, Java i JavaScript mają różną semantykę i cele.

Z drugiej strony musimy pamiętać, że JavaScript wykorzystuje implementację Document Object Model (DOM) i tyle JS to jedyny język programowania, który przeglądarki rozumieją natywnie. Początkowo był używany na stronach internetowych HTML do operacji na kliencie bez dostępu do serwera. Jednak obecnie jest on szeroko stosowany do wysyłania i odbierania informacji z serwera, często w połączeniu z technologiami takimi jak AJAX. JavaScript jest interpretowany w kliencie użytkownika, podczas gdy instrukcje są pobierane wraz z kodem HTML.

Aplikacje JS

JavaScript to język programowania szeroko stosowany w różnych zastosowaniach i kontekstach, takich jak:

• Tworzenie stron internetowych: Jest to niezbędne w tworzeniu stron internetowych. Służy do poprawy interaktywności i komfortu użytkowania stron internetowych i aplikacji internetowych. Wykorzystuje się go m.in. do tworzenia interaktywnych formularzy, efektów wizualnych, walidacji danych w czasie rzeczywistym i dynamicznej nawigacji. Obecny w:
  • Frontend WWW: Jest to kamień węgielny rozwoju front-endu. Frameworki i biblioteki, takie jak React, Angular i Vue.js, wykorzystują JavaScript do tworzenia interaktywnych i dynamicznych interfejsów użytkownika w aplikacjach internetowych.
  • Zaplecze sieciowe: Za pośrednictwem platform takich jak Node.js JavaScript jest używany po stronie serwera do tworzenia kompletnych aplikacji internetowych. Dzięki temu programista może używać JavaScript zarówno na froncie, jak i na zapleczu aplikacji, co ułatwia synchronizację danych i tworzenie aplikacji w czasie rzeczywistym.
  • Aplikacje serwerowe: Chociaż nie jest tak powszechny jak inne języki po stronie serwera, JavaScript jest używany w tworzeniu aplikacji serwerowych za pośrednictwem Node.js. Jest to szczególnie przydatne w przypadku aplikacji czasu rzeczywistego i aplikacji obsługujących dużą liczbę jednoczesnych żądań.
• Aplikacje mobilne: Wykorzystywany jest przy tworzeniu hybrydowych aplikacji mobilnych z wykorzystaniem frameworków takich jak React Native i Ionic. Frameworki te umożliwiają programistom jednorazowe napisanie i uruchomienie aplikacji na wielu platformach, takich jak iOS i Android.
• Gry online: Służy do tworzenia gier online i gier przeglądarkowych. Biblioteki takie jak Phaser i Three.js ułatwiają tworzenie interaktywnych gier 2D i 3D w przeglądarce.
• Aplikacje desktopowe: Dzięki narzędziom takim jak Electron możliwe jest tworzenie wieloplatformowych aplikacji komputerowych przy użyciu technologii internetowych, takich jak HTML, CSS i JavaScript.
• Rozszerzenia przeglądarki: W celu dodania dodatkowych funkcjonalności do przeglądarek internetowych stosowane są rozszerzenia. Rozszerzenia te są zwykle napisane w języku JavaScript.
• Aplikacje Internetu rzeczy (IoT): Wykorzystywany jest przy tworzeniu aplikacji i systemów dla urządzeń IoT ze względu na możliwość komunikacji ze sprzętem i czujnikami za pośrednictwem interfejsów API i wyspecjalizowanych bibliotek.

Co to jest Redux i jak działa?

Redux to biblioteka JavaScript typu open source który służy do zarządzania stanem w aplikacjach i jest pod wpływem języka funkcjonalnego Elm. Często łączy się go z innymi bibliotekami, takimi jak React lub Angular, w celu tworzenia interfejsów użytkownika. Został wymyślony przez Dana Abramova i Andrew Clarka, którzy zainspirowali się biblioteką Facebooka o nazwie Flux.

Ogólnie rzecz biorąc, Redux jest małą biblioteką zawierającą plik Proste i ograniczone API, zaprojektowany, aby działać jako przewidywalny kontener dla stanu aplikacji. Jego działanie jest podobne do koncepcji „redukcji” w programowaniu funkcjonalnym.

Historia Redux sięga 2015, kiedy Dan Abramov zaczął pracować nad pierwszą wersją Redux przygotowując się do wystąpienia na konferencji React Europe na temat Hot Reloading. Podczas tego procesu Abramov zauważył podobieństwo pomiędzy wzorem strumienia a funkcją reduktora. Ta obserwacja skłoniła go do zastanowienia się, czy magazyn strumienia może w rzeczywistości być funkcją redukującą.

Aby zrealizować ten pomysł, Abramov skontaktował się z Andrew Clarkiem, który był autorem implementacji Flux o nazwie Flummox. Razem współpracowali, aby ożywić Redux i zdefiniowali spójne API. Dodatkowo zaimplementowali możliwość rozszerzenie za pomocą oprogramowania pośredniczącego i wzmacniaczy sklepu, który znacząco przyczynił się do rozwoju obecnego ekosystemu Redux, jeszcze bardziej rozszerzając jego możliwości.

Relacja Redux i React: czym jest React

React to biblioteka JavaScript który koncentruje się na tworzeniu interfejsów użytkownika, choć jego wszechstronność wykracza poza tę definicję. To narzędzie, pierwotnie opracowane przez Facebooka, jest narzędziem typu open source i jest szeroko stosowane ze względu na możliwość szybkiego tworzenia interfejsów użytkownika w różnych aplikacjach, w tym w aplikacjach internetowych typu single page (SPA), aplikacjach na Androida i iOS.

W przeciwieństwie do innych frameworków, takich jak Angular, które oferują bardziej złożone podejścia, React jest wyróżnia się możliwością generowania interfejsów użytkownika wydajnie. Osiąga się to poprzez użycie plików .jsx, które łączą logikę i interfejs użytkownika w jednym pliku i są zorganizowane w jednostki zwane komponentami.

Wirtualny DOM: co to jest?

Kiedy zagłębiamy się w świat ReactJS, prawdopodobnie często słyszymy o koncepcji Wirtualny DOM. Pomysł ten wywodzi się z genialnego pomysłu: zamiast aktualizować cały rzeczywisty model DOM, modyfikujemy tylko tę część, która naprawdę wymaga zmian. W starych aplikacjach JavaScript otrzymywaliśmy dane w formacie JSON z serwera, a następnie generowaliśmy zupełnie nowy kod HTML do renderowania, co skutkowało odświeżeniem całej strony przy każdej modyfikacji.

Jak zainstalować i skonfigurować Redux w swoim projekcie

Jeśli chcesz wiedzieć jak zainstalować ReduxPrawda jest taka, że ​​nie jest to wcale skomplikowane. Aby to zrobić, musisz udać się do terminala i stamtąd wykonać następujące polecenie:

npm i -S redux

Teraz masz zainstalowaną stabilną wersję Redux w swoim systemie. Oczywiście prawdopodobnie będziesz musiał rozwiązać niektóre zależności, takie jak zainstalowanie npm, menedżera pakietów Node.js. Kiedy już to zrobimy, zainstalujemy teraz React, którego będziesz potrzebować, aby skorzystać z Redux, a także narzędzia programistyczne, aby móc rozpocząć tworzenie swoich projektów.

Aby zainstalować te inne pakiety, należy wykonać następujące polecenia:

npm i -S reagują-redux npm i -D redux-devtools

Teraz będziesz miał wszystko gotowe do rozpoczęcia. Jeśli przejdziesz do głównego folderu lub katalogu, w którym zainstalowano Redux, zobaczysz, że znajduje się tam kilka podkatalogów lub podfolderów, takich jak SKLEP, REDUKCJE, AKCJE, TYPY. Musisz wiedzieć, czym jest każdy z nich:

• DZIAŁANIA: Są to obiekty, które muszą mieć dwie właściwości, jedną opisującą typ (TYPE) akcji i drugą opisującą, co należy zmienić w stanie aplikacji.
• REDUKTORY- Reduktory to funkcje implementujące zachowanie akcji. Zmieniają stan aplikacji w zależności od opisu akcji i opisu zmiany stanu.
• SKLEP: to miejsce, w którym spotykają się działania i reduktory, utrzymując i zmieniając stan aplikacji. Tam jest tylko jeden.
• TYPY: jak powiedziałem wcześniej, jest to rodzaj działania.

Praktyczny przykład: Tworzenie aplikacji za pomocą Redux

Un przykład użycia Redux Może to być następująca sytuacja, w której prosta aplikacja księgowa jest tworzona przy użyciu Redux. Ale aby to zrobić, musisz najpierw skonfigurować Redux i zdefiniować swoje działania i reduktory:

// Importuj biblioteki Redux import { createStore } z 'redux'; // Zdefiniuj akcje const inkrementacjaAkcja = { type: 'INCREMENT' }; const dekrementacja = { typ: 'ZMNIEJSZANIE' }; // Zdefiniuj reduktor const counterReducer = (stan = 0, akcja) => { przełącznik (action.type) { case 'INCREMENT': return stan + 1; przypadek 'DECREMENT': zwrot stanu - 1; domyślnie: stan powrotu; } }; // Utwórz sklep Redux const store = createStore(counterReducer); // Subskrybuj zmiany w sklepie store.subscribe(() => { console.log('Aktualny stan licznika:', store.getState()); }); // Wysyłanie akcji w celu modyfikacji stanu store.dispatch(inkrementacja); store.dispatch(inkrementacja akcji); store.dispatch(dekrementacja akcji);

To bardzo prosty przykład użycia Redux. W większej aplikacji zdefiniujesz bardziej złożone akcje i reduktory oraz połączysz komponenty React, aby uzyskać dostęp i aktualizować stan sklepu. Ale to przynajmniej daje wyobrażenie o tym, jak to działa…