Skocz do treści

Już wkrótce odpalamy zapisy na drugą edycję next13masters.pl. Zapisz się na listę oczekujących!

useReducer — przenoszenie logiki poza komponent

useReducer to alternatywa dla useState. Ale po co i kiedy jej używać? W skrócie: Gdy logika komponentu się rozrasta i chcemy oddzielić ją całkowicie od widoku. Zgodnie z dobrymi praktykami!

Ten artykuł jest częścią 38 z 43 w serii React.js.

Zdjęcie Michał Miszczyszyn
JavaScript1 komentarz

Użycie useReducer

useReducer i useState pełnią bardzo podobne role: Służą do ustawiania stanu komponentu. Robią to jednak w inny sposób. Przypominam: useState przyjmuje stan początkowy, a zwraca aktualny stan i funkcję do ustawiania stanu:

const [count, setCount] = useState(0);

Więcej o tym doczytasz w artykule:

https://typeofweb.com/react-hooks-usestate-czyli-stan-w-komponentach-funkcyjnych/

React Hooks: useState, czyli stan w komponentach funkcyjnych

Wbudowanych Hooków w React jest kilka, a jeszcze więcej możesz tworzyć sam(a). Zaczniemy jednak od podstawowego wbudowanego Hooka useState. Dodamy stan do komponentu funkcyjnego!

Dla odmiany, useReducer jako argument przyjmuje reducer i stan początkowy, a zwraca stan oraz funkcję dispatch:

const [count, dispatch] = useReducer(countReducer, 0);

Jeśli znasz Reduksa, to na pewno od razu kojarzysz ten koncept!

Napiszmy reducer

Kontynuujmy przykład z prostym licznikiem. Tak, wiem, banały, ale od czegoś trzeba zacząć 🙄

function countReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
  }
}

function App() {
  const [count, dispatch] = React.useReducer(countReducer, 0);

  return (
    <div>
      {counter}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

Po kliknięciu w przyciski wysyłane są akcje: increment i decrement. Są one obsługiwane przez countReducer, który odpowiednio zwiększa lub zmniejsza licznik o 1.

Pytania?

zapisz się na szkolenie z React. Jeśli chcesz na bieżąco śledzić kolejne części kursu React.js to koniecznie polub mnie na Facebooku i zapisz się na newsletter.

Podsumowanie

useReducer jest dobrym zamiennikiem useState w sytuacjach, gdy potrzebujemy wymodelować bardziej rozbudowane komponenty i ich stany. Możliwość łatwego wydzielenia reducera oraz testowania go jednostkowo to wisienka na torcie. useReducer na pewno się przyda!

👉  Znalazłeś/aś błąd?  👈Edytuj ten wpis na GitHubie!

Autor