Jak zintegrować React Redux i Firebase w 3 prostych krokach

W tym artykule dowiesz się, jak:

  • Utwórz prosty interfejs dla aplikacji za pomocą React
  • Dołącz sklep Redux do aplikacji React
  • Połącz bazę danych Firebase w czasie rzeczywistym ze sklepem Redux
  • Połącz te 3 rzeczy, aby stworzyć w pełni funkcjonalną aplikację do wykonania

Zanim zanurzymy się w tych 3 filarach. Oto jak będzie wyglądał przepływ aplikacji. Nasz komponent uruchomi akcję. Ta akcja wykona pewne żądanie w bazie danych Firebase w czasie rzeczywistym. Następnie dane z Firebase trafią do naszego reduktora. Od reduktora do sklepu. A ze sklepu można uzyskać dostęp do danych. Nic szczególnego, ale wykonuje zadanie.

Przepływ aplikacji integrujący Firebase

Tworzenie prostego interfejsu użytkownika

Użyjemy pakietu „Utwórz-zareaguj-aplikacja”, aby wygenerować nasz szablon. Jeśli jeszcze go nie masz, po prostu uruchom npm install -g stwórz-zareaguj-aplikację. Następnie przejdź do katalogu, w którym chcesz zlokalizować swój projekt, i uruchom polecenie create-React-App-React-Redux-Firebase lub dowolną nazwę, która Ci odpowiada. W katalogu src usuń niepotrzebne pliki. Pozostaw tylko plik index.js App.js i zarejestruj tam ServiceServiceWorker.js. Nie dotykaj registerServiceWorker.js. Inne pliki będą wyglądały następująco.

W porządku. Jesteśmy w dobrym punkcie wyjścia. Teraz jest idealny czas na stworzenie sklepu Redux dla naszej aplikacji i połączenie go.

Dołączanie sklepu Redux do aplikacji React

Sklep to miejsce przechowywania wszystkich danych dla naszej aplikacji. Gdy składnik potrzebuje danych. Po prostu podłączamy go do sklepu, a następnie możemy uzyskać dostęp do danych w samym komponencie. W tym celu musimy najpierw zainstalować kilka pakietów. Uruchamianie katalogu projektu

instalacja npm --save redux React-Redux Redux-Thunk

Okej… Mamy wszystkie zależności do tworzenia gotowego sklepu. Teraz stwórzmy moduł reduktorów. W katalogu src utwórz nowy folder o nazwie reduktory. Wewnątrz katalogu reduktorów utwórz plik dataReducer.js. Teraz reduktor jest tylko prostą funkcją z 2 argumentami. Stan początkowy i działanie. Wszystkie działania wyzwalane z komponentu przechodzą przez wszystkie reduktory. Teraz każdy reduktor sprawdza typ akcji, a jeśli to reduktor wie, aktualizuje dane w sklepie.

Tak będzie wyglądał nasz reduktor. Sprawdza, czy typ akcji to FETCH_TODOS i czy tak jest, aktualizuje listę naszych zadań do wykonania. Teraz w katalogu reduktorów utwórz plik index.js. Będzie to punkt wejścia dla naszych reduktorów. Możemy tutaj połączyć wiele reduktorów. W naszym przypadku mamy tylko jeden, ale jeśli aplikacja będzie rosła w przyszłości, na pewno będziemy potrzebować wielu reduktorów.

Jeśli dodalibyśmy nowy reduktor, po prostu tworzymy nowy plik w katalogu reduktorów. Następnie zaimportuj. I wreszcie dodaj go do funkcji CombineReducers. Ta funkcja bierze wszystkie reduktory i łączy je w jeden. A także informuje, który reduktor jest odpowiedzialny za dane w sklepie.

Teraz, gdy mamy gotowy moduł reduktorów, możemy stworzyć sklep i dołączyć go do naszej aplikacji. W katalogu głównym projektu otwórz plik index.js. W tym pliku mówimy, że chcemy renderować komponent aplikacji. Aby dołączyć aplikację do sklepu, musimy owinąć ją w składnik Provider. Dostawca przyjmuje propozycję sklepu, która reprezentuje sklep z aplikacjami. Do stworzenia sklepu używamy metody pomocniczej z pakietu redux. Ta metoda bierze nasze reduktory, oprogramowanie pośrednie, jeśli chcemy użyć niektórych i tworzy sklep. Indeks.js będzie wyglądał dokładnie tak. I to wszystko. Teraz mamy sklep podłączony do naszej aplikacji.

Łączenie bazy danych Firebase w czasie rzeczywistym ze sklepem Redux

Ten krok może wyglądać na trudny, ale w rzeczywistości jest bardzo łatwy. Najpierw zainstalujmy zależności, a my podzielimy się działaniem bazy danych Firebase.

npm install --save firebase

Teraz musimy zainicjować Firebase w naszej aplikacji. Utwórz nową konfigurację katalogu, a następnie utwórz nowy plik firebase.js. Tutaj importujemy zestaw Firebase SDK, inicjalizujemy aplikację, tworzymy referencję do bazy danych i eksportujemy ją. Użyjemy odwołania do bazy danych do zrobienia w celu wykonania nowej taksówki lub uzupełnienia jej później w module działań. Możesz zapytać, co to jest obiekt FirebaseConfig. Stworzymy go później, kiedy pokażę ci, jak stworzyć własną aplikację Firebase.

Zanim przejdziemy do modułu działań, dowiedzmy się, jak działa baza danych Firebase w czasie rzeczywistym. W naszym przypadku przechowujemy listę zadań w bazie danych. Nazywamy je „todos”. Dołączymy słuchacza do tej listy zadań i za każdym razem, gdy lista się zmieni, nasza aplikacja będzie wiedziała, że ​​nastąpiła zmiana danych. Pobierze nowe dane z bazy danych Firebase, a następnie je wyświetli. Oznacza to, że nie musimy mówić naszej aplikacji, aby ponownie pobierała dane, gdy tworzymy nowe zadanie lub wykonujemy je. Nasza aplikacja będzie o tym wiedzieć.

Teraz stwórzmy moduł działań. W katalogu src utwórz nowe akcje folderów. I tutaj utwórz pliki index.js i types.js. Plik typów po prostu przechowuje stałe ciągów dla typów akcji. Indeks jest punktem wejścia do naszego modułu akcji i będzie zawierał dokładnie 3 akcje. addToDo doda nowe zadanie do listy taks, completeToDo je usunie. I fetchToDos będzie nasłuchiwał zmian, a jeśli takie są, pobierze dane. Następnie wywoła metodę wysyłki. Ta metoda przyjmuje jeden argument, który jest obiektem typu i ładunku. Typ reprezentuje typ akcji, więc reduktor wie, czy powinien obsłużyć akcję. A ładunek reprezentuje rzeczywiste dane.

Teraz nadszedł czas, aby skleić wszystkie te rzeczy razem za pomocą komponentu React. Ale najpierw stwórzmy najpierw własną aplikację Firebase

Tworzenie aplikacji Firebase

  1. Przejdź na https://console.firebase.google.com/u/0/
  2. Zaloguj się przy użyciu swojego konta Google, a następnie kliknij Dodaj projekt
  3. Ustaw nazwę projektu i region i kliknij Utwórz projekt
  4. Powinieneś zobaczyć pulpit Firebase
Pulpit nawigacyjny Firebase

Teraz stwórzmy plik konfiguracyjny Firebase, który faktycznie informuje Firebase SDK, jakiej aplikacji używamy. Wewnątrz katalogu konfiguracji utwórz keys.js. To sprawdzi, czy jesteśmy w trybie produkcyjnym, czy nie. Rzecz, której nie chcesz dzielić się kluczami. Tworzymy dev.js i prod.js. Plik deweloperski będzie zawierał rzeczywiste ciągi, ale nigdy nie opublikujesz tego pliku. Plik Prod będzie odnosił się tylko do zmiennych środowiskowych.

Teraz wystarczy wypełnić dev.js rzeczywistymi wartościami. Klucz API i identyfikator projektu można znaleźć w ustawieniach projektu w desce rozdzielczej Firebase. Aby skonfigurować bazę danych, wykonaj następujące kroki

Następnie możesz zobaczyć adres URL swojej bazy danych. Powinno być

.firebaseio.com”

Wpisz wszystkie te wartości do dev.js, a Twoja aplikacja Firebase jest połączona z zestawem SDK Firebase. Teraz nadszedł czas, aby skleić wszystkie te części razem, a rezultatem będzie funkcjonalne zastosowanie

Łącząc wszystko razem

Przygotowaliśmy wszystkie rzeczy, teraz musimy tylko utworzyć 2 komponenty i połączyć je w celu przechowywania. Będziemy mieć ToDoListItem i ToDoList.

Wewnątrz katalogu src utwórz nowe składniki katalogu. Tutaj utwórz ToDoListItem.js. Ten komponent po prostu renderuje aktualne zadanie. Pokazuje rzeczywiste zadanie i zawiera przycisk. Po kliknięciu przycisku. Zadanie zostało zakończone i usunięte. W tym komponencie używamy akcji completeToDo. Aby dołączyć działania do tego komponentu, korzystamy z metody connect. Wymaga 2 argumentów. Pierwsza to funkcja, która pobiera dane ze sklepu, a druga to obiekt zawierający akcje.

Teraz dla składnika ToDoList. Będzie zawierał prosty formularz do tworzenia nowego zadania. Ten formularz pojawi się po kliknięciu przycisku Dodaj. I zniknie, gdy klikniemy go ponownie. Ten komponent wyzwoli akcję addToDo podczas przesyłania formularza. Będzie nasłuchiwał zmian w bazie danych za pomocą akcji fetchToDos. Ponownie skorzystamy z metody connect. Tym razem zajmuje to także funkcja mapStateToProps. Tam mówimy, że chcemy uzyskać dostęp do danych ze sklepu. Jeśli dane w sklepie zostaną zaktualizowane, nasz komponent również zostanie zaktualizowany. Na koniec stwórzmy również plik CSS dla tego komponentu i zaimportuj go.

Mamy wszystko ustawione. Teraz ostatnią rzeczą jest zmiana komponentu aplikacji na używanie ToDoList. Nasza aplikacja jest zakończona.

I o to chodziło. Stworzyliśmy sklep z reduktorami i załączyliśmy go do naszej aplikacji. Utworzyliśmy moduł działań, a następnie uruchamiamy te działania w naszych komponentach. Stworzyliśmy 2 komponenty. Komponent jest podłączony do sklepu i może również wyzwalać akcje. Zaowocowało to funkcjonalną aplikacją ToDo. Kod źródłowy aplikacji jest dostępny na Github.

Złe jest to, że można go używać z wieloma użytkownikami. Ponieważ teraz nie śledzimy, do kogo należy zadanie. Zrobimy to w następnym poście. Pokażemy, jak wykonać autoryzację za pomocą bazy ogniowej i wdrożymy aplikację w prawdziwym świecie.

Dziękuję za uwagę. Jeśli podobała ci się ta historia i nauczyłeś się czegoś nowego, daj światu poznać, klaszcząc. Jeśli chcesz zobaczyć więcej, kliknij przycisk „Obserwuj”. Co tydzień tworzę takie samouczki. Jeśli nie znasz reakcji, przygotowałem serię samouczków, które pomogą Ci zacząć. Możesz je sprawdzić tutaj https://medium.com/@bernardbad. Jeszcze raz dziękuję za uwagę i do zobaczenia następnym razem.