YouTube :

CodeSandbox :

Motywacja

Po co używać kontekstu do obsługi stanu reakcji? Z tego samego powodu, dla którego używasz Redux do zarządzania sklepem z aplikacjami. Jeśli twoje komponenty komunikują się ze sobą i stan podnoszenia staje się kłopotliwy, Context jest natywnym sposobem radzenia sobie ze stanem aplikacji.

Warunki wstępne

Będziemy dokonywać refaktoryzacji <App>— która wykorzystuje stan lokalny — w celu użycia kontekstu:

Jak widać, jest licznik z 2 przyciskami, które zwiększają lub zmniejszają licznik.

Dostawca

Utwórz <Provider>i ustaw rekwizyt valuena 0:

Renderuj <Provider>jako komponent najwyższego poziomu w index.js:

Uzyskaj dostawcę valuew useContext:<App>

użyjReduktora

Utwórz funkcję reduktora:

Przekaż stan i wyślij z useReducerdo dostawcy prop value:

Zaktualizuj <App>z nową wartością kontekstu:

Konsument

Alternatywą dla useContextjest Konsument .

Najpierw wyeksportuj Consumerz kontekstu:

Następnie zamień useContextna <Consumer>:

<Consumer>wymaga funkcji zwrotnej dla prop children. Pierwszym argumentem jest Dostawca value.

Klasa

W przypadku składników klasy wartość Provider jest dostępna na this.context:

Do zrobienia

Pomysły na ulepszenia:

• Zbuduj niestandardowy hak dla useContext(Context).
• Refaktoryzuj typy akcji na stałe.
• Twórz twórców akcji.
• Ustaw displayNamena Context, aby poprawić widoczność w React DevTools.

• Film z YouTube
• Demo CodeSandbox
• Kontekst
• użyjReduktora