08. useReducer — wzorzec reducer jako alternatywa dla useState

useReducer — przewidywalne zarządzanie stanem

useReducer to alternatywa dla useState przy złożonym stanie z wieloma powiązanymi akcjami. Reducer to czysta funkcja (state, action) => newState. Logika aktualizacji stanu jest scentralizowana i testowalna w izolacji. Wzorzec znany z Redux.

Gdy useState prowadzi do wielu powiązanych setterów i trudno śledzić co zmienia stan — czas na useReducer. Koszyk zakupów, formularz wielostepowy, slider z wieloma stanami UI — to idealne przypadki.

1. Wyjaśnić wzorzec reducer — czysta funkcja, akcje, dispatch
2. Opisać useReducer API: reducer, initialState, dispatch
3. Pokazać kiedy useReducer jest lepszy niż useState
4. Omówić jak reducer ułatwia testowanie logiki stanu

1. Wzorzec reducer — (state, action) => newState, czystość
2. Akcje — obiekt z type i opcjonalnym payload
3. useReducer API — const [state, dispatch] = useReducer(reducer, initialState)
4. Przykład koszyka — ADD_ITEM, REMOVE_ITEM, CLEAR, UPDATE_QUANTITY
5. Kiedy useReducer vs useState — tabela decyzyjna

• Struktura minimalna

1. Wstęp — problem złożonego stanu z useState
2. Rozdział 1: Wzorzec reducer — teoria, czysta funkcja, akcje
3. Rozdział 2: useReducer w praktyce — koszyk zakupów
4. Rozdział 3: useState vs useReducer — kiedy co
5. Podsumowanie
6. Bibliografia

Reducer = logika stanu w jednym miejscu!

Pokaż ewolucję: mały komponent z useState → rozrasta się → useReducer jako rozwiązanie. To narracja którą każdy developer przeżył.