YouTube :

CodeSandbox :

Motivazione

Perché usare Context per gestire lo stato React? Lo stesso motivo per cui usi Redux per gestire il tuo negozio di applicazioni. Se i tuoi componenti parlano tra loro e lo stato di sollevamento diventa ingombrante, Context è un modo nativo per gestire lo stato dell'applicazione.

Prerequisiti

Faremo il refactoring <App>, che utilizza lo stato locale, per utilizzare Context:

Come puoi vedere, c'è un contatore con 2 pulsanti che incrementa o decrementa il conteggio.

Fornitore

Crea <Provider>e imposta prop valuea 0:

Rendering <Provider>come componente di primo livello in index.js:

Ottieni il provider valuecon :useContext<App>

useReducer

Crea una funzione di riduzione:

Passa lo stato e spedisci da useReducera Provider prop value:

Aggiorna <App>con il nuovo valore di contesto:

Consumatore

Un'alternativa a useContextè Consumer .

Innanzitutto, esporta Consumerda Context:

Quindi sostituire useContextcon <Consumer>:

<Consumer>richiede una funzione di callback per prop children. Il primo argomento è il Provider value.

Classe

Per i componenti di classe, è possibile accedere al valore Provider su this.context:

Da fare

Idee per miglioramenti:

• Costruisci un hook personalizzato per useContext(Context).
• Refactoring dei tipi di azione in costanti.
• Crea creatori di azioni.
• Impostare displayNamesu Contesto per migliorare la visibilità in React DevTools.

• Video Youtube
• Demo di CodeSandbox
• Contesto
• useReducer