Dwie podstawowe idee w Redux

Zanim zaczniemy naukę biblioteki Redux, zapoznajmy się z jej dwiema podstawowymi ideami. Pierwszą ideę, dotyczącą zarządzania stanem, rozważymy na przykładzie zwykłego licznika na stanie w React:

jsxfunction Counter() {
  // State
  const [count, setCount] = useState(0)

  // Action:
  function clickHandler() {
    setCount(count + 1)
  }

  // View:
  return (
    <div>
      <span>{count}</span>
      <button onClick={clickHandler}>+</button>
    </div>
  )
}

W tym kodzie widzimy stan dla zmiennej count - to jest źródło prawdy dla licznika. Następnie widzimy działanie (action) - zdarzenie, które po kliknięciu użytkownika wywołuje aktualizację stanu. I wreszcie, widok (view), za pomocą którego wyświetlamy interfejs użytkownika.

Zatem schemat jest dość prosty: przycisk jest naciśnięty - stan count (State) po naciśnięciu (Action) zmienia się, zatem zmienia się widok (View) - w naszym przypadku jest to liczba na ekranie.

Jednakże wszystko będzie bardziej skomplikowane, jeśli mamy wiele komponentów, które powinny używać tego samego stanu. Można oczywiście, na przykład wynieść stan w górę do komponentów rodzicielskich, ale takie rozwiązanie nie zawsze może rozwiązać problem. Redux w tym przypadku proponuje nam stworzenie jednego miejsca w aplikacji, które zawierałoby stan globalny oraz określone wzorce zachowań przy aktualizacji tego stanu. Właśnie na tym polega pierwsza podstawowa idea (!).

Druga idea związana jest z niemutowalnością, czyli z niezmiennością danych. Ty, oczywiście, pamiętasz z JavaScript, że tablice i obiekty można zmieniać. Zmiana danych bezpośrednio w Redux, tak jak w innych frameworkach, jest uważana za złą praktykę i może prowadzić do nieprzewidywalnych konsekwencji. Dlatego w Redux nasze początkowe obiekty i tablice powinny pozostać niemutowalne, a zmieniać możemy tylko ich kopie.