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:
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!