Context + Reducer: proste kontenery stanu
Połącz Context + useReducer, aby zbudować mały kontener stanu: Provider udostępnia stan i dispatch za pośrednictwem własnego hooka.
Context + Reducer: proste kontenery stanu to bezpłatna lekcja React Academy na CoddyKit. To lekcja 3 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 3 lekcji w sumie.
Po co łączyć Context z reducerem?
Cel: Umieszczenie logiki stanu w Providerze (Context) i reducerze. Elementy potomne odczytują dane za pomocą niewielkiego własnego hooka: bez prop drillingu i z przewidywalnymi aktualizacjami.
Etapy projektowania
Wzorzec:
- Utworzenie Context
- Wewnątrz Providera: useReducer(state, action)
- Udostępnienie {state, dispatch}
- Utworzenie hooka w stylu useCounter(), który wywołuje useContext
Demonstracja: kontener licznika
Minimalny CounterProvider udostępnia state i dispatch; elementy potomne używają useCounter() do odczytu i aktualizacji.
<div id="root"></div>
Wskazówki dotyczące akcji i API
Wskazówki:
- Akcje powinny być niewielkie (INC, DEC, RESET).
- Reducer należy umieścić razem z Providerem.
- Należy eksportować tylko własny hook, aby korzystanie z niego było proste.
Demonstracja: kontener zadań
Niewielki TodoProvider pokazuje przewidywalne aktualizowanie wielu pól za pomocą jednego reducera i przejrzystego API hooka.
<div id="root"></div>
Pułapki i wskazówki
Pułapki:
- Zapominanie o owinięciu elementów potomnych w Providera.
- Umieszczanie dużych obiektów w Context — należy przekazywać tylko to, co jest potrzebne.
- Modyfikowanie stanu w reducerze — zawsze należy zwracać nowe obiekty.
Kontrola wzorca kontenera
Podsumowanie
Podsumowanie: Context zapewnia dostęp, a useReducer zarządza przejściami stanu. Należy eksportować niewielki hook useXxx, który odczytuje {state, dispatch}, aby korzystanie z niego było proste.
Często zadawane pytania
Czy lekcja „Context + Reducer: proste kontenery stanu” jest bezpłatna?
Tak — pełny tekst „Context + Reducer: proste kontenery stanu” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 3 lekcji w sumie.
Co nauczysz się w „Context + Reducer: proste kontenery stanu”?
Połącz Context + useReducer, aby zbudować mały kontener stanu: Provider udostępnia stan i dispatch za pośrednictwem własnego hooka. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć React Academy?
Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 3.
Ile czasu zajmuje lekcja „Context + Reducer: proste kontenery stanu”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?
Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Podstawy Context i unikanie przekazywania propsów przez wiele poziomów
- Podstawy useReducer i wzorce akcji
- Context + Reducer: proste kontenery stanu