Jak skutecznie unikam duplikowania kodu w React - poznaj 5 technik

Programowanie jest często postrzegane jak rzemiosło, a nie jak praca. I myślę, że istnieją ku temu solidne powody. Jako developerzy staramy się osiągnąć jak najlepszą jakość dla jakiegokolwiek oprogramowania, które tworzymy. Co więcej, istnieje kilka świetnych zasad, których warto się trzymać. A jedną z moich ulubionych jest DRY, czyli Don’t Repeat Yourself (albo nie powtarzaj się). 

Przedstawię Wam tutaj 5 technik, których sam używam, aby nie duplikować kodu w moim projekcie. 

1. Wywołania HTTP

Pobieranie danych z jakiegoś zewnętrznego źródła jest jednym z najpowszechniejszych zadań w jakiejkolwiek nowoczesnej aplikacji Reacta. Początkujący popełniają tutaj niestety sporo błędów. Oto, jak można błędnie rozwinąć taki projekt:

Krok 1: Pobieranie danych wewnątrz komponentu 

Po pierwsze, większość próbuje pobierać dane wewnątrz komponentu (większość tutoriali nas tego uczy). 

Krok 2: Abstrakcja logiki do postaci jakiegoś magazynu

Tutaj większość próbuje zabierać logikę na zewnątrz komponentu i umieszczać ją gdzieś w zarządzaniu stanem (np. Redux albo Context). Ale w kodzie nadal jest sporo duplikatów. 

Jak być bardziej DRY

Pierwszy sposób: spróbuj stworzyć oddzielną klasę HttpUtility albo niestandardowym hooku UseHttp, aby tak zarządzać wszystkimi wywołaniami. Możesz też użyć axios do obsługi zewnętrznego wywołania. Niemniej jednak sprawdzanie progresu ładowania i obsługa błędów mogą być trochę trudne. 

Lepszy sposób: polecam bibliotekę react-query. Zapewnia ona świetne funkcje, które mogą się przydać przy każdym rozmiarze aplikacji. 

2. Obsługa błędów

Widziałem ludzi, którzy nie radzą sobie z obsługą błędów. Wywoływanie toastów w każdym komponencie nie jest zbyt dobrym pomysłem. Często zdarza się też, że chcemy dać użytkownikowi jakiś feedback. 

Błąd w wywołaniu HTTP

Middleware (który przechwyci każdą akcję, zanim trafi ona do store w Reduxie) bardzo się przydaje przy obsłudze błędów, bo je przechwytuje po wywołaniu HTTP i pokazuje toasta. Ja, używając w moich aplikacjach Reduxa, robię to w taki sposób:

const ErrorMiddleware = (state) => (next) => (action) => {
    const response = action.payload;
    if (response instanceof HttpErrorResponseModel) {
        next(CommonAction.showErrorToast(action.payload.message))
    }
    next(action)
}

Błędy w logice komponentów

Możemy też zaimplementować ideę ErrorBoundary, czyli łapania wszystkich błędów związanych z ładowaniem komponentów. Dzięki temu będziemy mogli pozbyć się większości null checków. 

Błąd związany z walidacją

Kolejnym przypadkiem, w którym chcemy pokazać toast z błędem, jest pokazanie błędów walidacji. Dla tego scenariusza można skorzystać z biblioteki do sprawdzania formularzy (np. Yup), aby obsłużyć błędy w walidacji i natychmiast przekazać użytkownikom feedback. Możesz też użyć react-hook-form — biblioteki, która zrobi to za Ciebie. 

3. Tworzenie komponentów 

To akurat łatwizna. Często jednak ci, którzy zaczynają z Reactem nie rozumieją jego najlepszej funkcji - tworzenia komponentów, których można użyć wielokrotnie. 

Zawsze rozbijaj komponenty na mniejsze części — oto korzyści takiego podejścia: 

1. Poprawia jakość i czytelność kodu
2. Nie duplikujemy tych samych komponentów UI w projekcie

4. Używaj niestandardowych hooków

Osobiście uwielbiam hooki — wydaje mi się, że nowi developerzy powinni się ich nauczyć tak szybko, jak to tylko możliwe. 

Gdy widzimy, że powtarzamy tę samą logikę w paru miejscach, warto ją opakować w abstrakcję. React dał nam takie rozwiązania jak komponent wyższego rzędu (ang. Higher Order Component, lub HOC). 

import React from "react";

const withDataFetching = props => WrappedComponent => {
  class WithDataFetching extends React.Component {

    render() {
      return (
        <WrappedComponent />
      );
    }
  }

  return WithDataFetching;
};

export default withDataFetching;

Powyżej przykład komponentu wyższego rzędu.

Często lepszym podejściem będzie użycie hooka, który zrobi to samo, ale za to krócej i czyściej. Powyższy kod można przepisać w następujący sposób: 

import React, { useState, useEffect } from "react";

function useDataFetching(dataSource) {

  return {};
}

export default useDataFetching;

Hook — przykład

5. Unikaj duplikacji stylów

Aplikowanie stylów zawsze było dla mnie problemem. I mam wrażenie, że niektórzy początkujący podzielą moje zdanie. Tak to u mnie wyglądało: 

Krok 1. Korzystanie z plików .css dla komponentów stylu 

Jak wszyscy wiemy, jeśli nie jesteś zbyt dobry w organizowaniu plików ze stylem, możesz się lekko zagubić w zduplikowanej logice CSS. 

Krok 2. Na tym etapie nauczyłem się Sass

Sass jest świetny, jeśli chodzi o pisanie CSS w sposób modularny. Zapewnia nam możliwość ponownego używania kodu CSS i wprowadza koncepcje mixinów i zmiennych w CSS. Niemniej jednak ciężko się w tym odnaleźć. Być może to po części moja wina. 

Na szczęście wpadłem na styled-components - świetną bibliotekę, która pozwala na ponowne używanie stylów. Pomaga mi w tworzeniu o wiele bardziej czytelnych komponentów — pozbyłem się className z mojego kodu!

Oto styled-components w akcji:

Podsumowanie

No i tyle. Przedstawiłem kilka technik, które mogą pomóc pisaniu kodu, który jest "DRY" w React. Nie są to co prawda rozwiązania, które sprawdzą się zawsze i wszędzie, ale zrozumienie jak one działają, na pewno Ci pomoże.

Jeśli interesujesz się zaawansowanymi dobrymi praktykami, to sprawdź ten artykuł. 

Oryginał tekstu w języku angielskim możesz przeczytać tutaj.