Lekcja 11: Podnoszenie Stanu (Lifting State Up)

Często zdarza się, że kilka komponentów w aplikacji React potrzebuje dostępu do tych samych, zmieniających się danych lub musi na nie reagować. W takich sytuacjach pojawia się pytanie: gdzie przechowywać ten wspólny stan? Odpowiedzią jest wzorzec "podnoszenia stanu" (lifting state up).

Problem: Stan Rozproszony

Wyobraźmy sobie aplikację z konwerterem temperatur, gdzie mamy dwa pola input: jedno dla stopni Celsjusza, drugie dla Fahrenheita. Chcemy, aby zmiana wartości w jednym polu automatycznie aktualizowała wartość w drugim.

Gdyby każdy komponent input zarządzał swoim własnym, lokalnym stanem, synchronizacja wartości między nimi byłaby trudna. Zmiana w jednym komponencie musiałaby jakoś poinformować drugi komponent o potrzebie aktualizacji, co prowadziłoby do skomplikowanych przepływów danych.

Przykład: Konwerter Temperatur

import React, { useState } from \'react\';

// Funkcje konwertujące temperatury
function toCelsius(fahrenheit) {
  return (fahrenheit - 32) * 5 / 9;
}

function toFahrenheit(celsius) {
  return (celsius * 9 / 5) + 32;
}

// Funkcja próbująca konwersji, zwraca pusty string w razie błędu
function tryConvert(temperature, convert) {
  const input = parseFloat(temperature);
  if (Number.isNaN(input)) {
    return \'\';
  }
  const output = convert(input);
  const rounded = Math.round(output * 1000) / 1000;
  return rounded.toString();
}

// Komponent wyświetlający informację o wrzeniu wody
function BoilingVerdict({ celsius }) {
  if (celsius >= 100) {
    return <p>Woda wrze.</p>;
  } 
  return <p>Woda nie wrze.</p>;
}

const scaleNames = {
  c: \'Celsjusza\',
  f: \'Fahrenheita\'
};

// Komponent dla pojedynczego pola input temperatury
function TemperatureInput({ scale, temperature, onTemperatureChange }) {
  const handleChange = (e) => {
    // Informujemy rodzica o zmianie
    onTemperatureChange(e.target.value);
  };

  return (
    <fieldset>
      <legend>Wprowadź temperaturę w stopniach {scaleNames[scale]}:</legend>
      <input value={temperature} onChange={handleChange} />
    </fieldset>
  );
}

// Komponent nadrzędny - Calculator
function Calculator() {
  // Stan podniesiony do komponentu nadrzędnego
  const [temperature, setTemperature] = useState(\'\');
  const [scale, setScale] = useState(\'c\'); // \'c\' lub \'f\'

  // Handlery przekazywane do dzieci
  const handleCelsiusChange = (temp) => {
    setScale(\'c\');
    setTemperature(temp);
  };

  const handleFahrenheitChange = (temp) => {
    setScale(\'f\');
    setTemperature(temp);
  };

  // Obliczanie wartości dla obu pól na podstawie stanu
  const celsius = scale === \'f\' ? tryConvert(temperature, toCelsius) : temperature;
  const fahrenheit = scale === \'c\' ? tryConvert(temperature, toFahrenheit) : temperature;

  return (
    <div>
      <TemperatureInput 
        scale="c" 
        temperature={celsius} 
        onTemperatureChange={handleCelsiusChange} />
      
      <TemperatureInput 
        scale="f" 
        temperature={fahrenheit} 
        onTemperatureChange={handleFahrenheitChange} />

      <BoilingVerdict celsius={parseFloat(celsius)} />
    </div>
  );
}

export default Calculator;

Analiza przykładu:

• Stan temperature (aktualnie wpisywana wartość) i scale (skala tej wartości) jest przechowywany w Calculator.
• Calculator renderuje dwa komponenty TemperatureInput.
• Do TemperatureInput dla Celsjusza przekazuje obliczoną wartość celsius i funkcję handleCelsiusChange.
• Do TemperatureInput dla Fahrenheita przekazuje obliczoną wartość fahrenheit i funkcję handleFahrenheitChange.
• Gdy użytkownik wpisuje coś w polu Celsjusza, wywoływany jest handleCelsiusChange, który ustawia scale na \'c\' i aktualizuje temperature.
• Gdy użytkownik wpisuje coś w polu Fahrenheita, wywoływany jest handleFahrenheitChange, który ustawia scale na \'f\' i aktualizuje temperature.
• Przy każdym renderowaniu Calculator oblicza wartości celsius i fahrenheit na podstawie aktualnego stanu temperature i scale, a następnie przekazuje je do odpowiednich pól input.

Dzięki temu oba pola są zawsze zsynchronizowane, a stan jest zarządzany w jednym miejscu.

Zalety Podnoszenia Stanu

• Jedno źródło prawdy: Upraszcza rozumowanie o stanie aplikacji, ponieważ dane znajdują się w jednym, przewidywalnym miejscu.
• Łatwiejsza synchronizacja: Komponenty zależne od tego samego stanu są automatycznie aktualizowane, gdy stan się zmienia.
• Lepsza reużywalność: Komponenty podrzędne stają się bardziej "głupie" (dumb components), ponieważ tylko wyświetlają dane (propsy) i wywołują funkcje zwrotne, co czyni je bardziej reużywalnymi.

Kiedy Podnosić Stan?

Podnoś stan, gdy:

• Kilka komponentów potrzebuje odzwierciedlać te same zmieniające się dane.
• Stan musi być dostępny dla komponentu nadrzędnego lub rodzeństwa.
• Chcesz uniknąć skomplikowanej komunikacji między komponentami na tym samym poziomie.

Zawsze staraj się umieszczać stan na najniższym możliwym wspólnym przodku.

Cel: Stworzyć dwa niezależne liczniki, których sumę będzie wyświetlał komponent nadrzędny.

Kroki:

1. Stwórz komponent Counter, który ma własny lokalny stan dla licznika i przycisk do jego inkrementacji. Wyświetla aktualną wartość licznika.
2. Stwórz komponent nadrzędny CountersContainer.
3. W CountersContainer użyj useState do przechowywania wartości dla dwóch liczników (np. count1 i count2).
4. Zmodyfikuj komponent Counter tak, aby przyjmował aktualną wartość licznika (value) i funkcję do jej aktualizacji (onIncrement) jako propsy. Usuń z niego lokalny stan.
5. W CountersContainer wyrenderuj dwa komponenty Counter, przekazując im odpowiednie wartości stanu (count1, count2) i funkcje aktualizujące (np. () => setCount1(c => c + 1)).
6. W CountersContainer wyświetl sumę obu liczników (count1 + count2).

Rozwiązanie

// src/Counter.jsx
import React from \'react\';

// Komponent Counter teraz przyjmuje wartość i funkcję onIncrement z propsów
function Counter({ label, value, onIncrement }) {
  return (
    <div style={{ border: \'1px solid grey\', padding: \'10px\', margin: \'5px\' }}>
      <p>{label}: {value}</p>
      <button onClick={onIncrement}>Zwiększ {label}</button>
    </div>
  );
}

export default Counter;

// src/CountersContainer.jsx
import React, { useState } from \'react\';
import Counter from \'./Counter\';

function CountersContainer() {
  // Stan podniesiony do rodzica
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  // Funkcje aktualizujące przekazywane jako propsy
  const handleIncrement1 = () => {
    setCount1(prevCount => prevCount + 1);
  };

  const handleIncrement2 = () => {
    setCount2(prevCount => prevCount + 1);
  };

  const total = count1 + count2;

  return (
    <div>
      <h2>Liczniki</h2>
      <Counter label="Licznik 1" value={count1} onIncrement={handleIncrement1} />
      <Counter label="Licznik 2" value={count2} onIncrement={handleIncrement2} />
      <h3>Suma: {total}</h3>
    </div>
  );
}

export default CountersContainer;

// W App.jsx
import React from \'react\';
import CountersContainer from \'./CountersContainer\';

function App() {
  return (
    <div>
      <CountersContainer />
    </div>
  );
}

export default App;

Stwórz aplikację z listą zadań (Todo List), gdzie stan listy zadań jest podniesiony do komponentu nadrzędnego.

1. Stwórz komponent TodoList, który przyjmuje listę zadań (todos) jako props i renderuje ją (użyj map i pamiętaj o kluczach).
2. Stwórz komponent AddTodoForm, który zawiera pole input i przycisk do dodawania nowego zadania. Gdy użytkownik wpisze zadanie i kliknie przycisk, komponent powinien wywołać funkcję zwrotną (np. onAddTodo) przekazaną przez props, podając tekst nowego zadania.
3. Stwórz komponent nadrzędny TodoApp.
4. W TodoApp użyj useState do przechowywania tablicy zadań (todos).
5. Zdefiniuj w TodoApp funkcję handleAddTodo, która przyjmuje tekst nowego zadania, tworzy nowy obiekt zadania (z unikalnym ID) i aktualizuje stan todos, dodając do niego nowe zadanie.
6. Wyrenderuj w TodoApp komponenty AddTodoForm (przekazując handleAddTodo jako onAddTodo) i TodoList (przekazując aktualną listę todos).