YouTube :

CodeSandbox :

Motivação

Por que usar Contexto para lidar com o estado React? O mesmo motivo pelo qual você usa o Redux para gerenciar sua loja de aplicativos. Se seus componentes conversam entre si e levantar o estado se torna complicado, então o Contexto é uma maneira nativa de lidar com o estado do seu aplicativo.

Pré-requisitos

Estaremos refatorando <App>— que usa estado local — para usar Contexto:

Como você pode ver, há um contador com 2 botões que aumenta ou diminui a contagem.

Fornecedor

Crie <Provider>e defina prop valuepara 0:

Renderize <Provider>como o componente de nível superior em index.js:

Obtenha o provedor valuecom useContextem <App>:

useReducer

Crie uma função redutora:

Passe o estado e despache useReducerpara a prop do Provedor value:

Atualize <App>com o novo valor de contexto:

Consumidor

Uma alternativa useContexté Consumer .

Primeiro, exporte Consumerdo Contexto:

Em seguida, substitua useContextpor <Consumer>:

<Consumer>requer uma função de retorno de chamada para prop children. O primeiro argumento é o Provedor value.

Classe

Para componentes de classe, o valor Provider pode ser acessado em this.context:

Façam

Ideias para melhorias:

• Crie um gancho personalizado para useContext(Context).
• Refatorar tipos de ação para constantes.
• Crie criadores de ação.
• Defina displayNameem Contexto para melhorar a visibilidade no React DevTools.

• Vídeo do youtube
• Demonstração do CodeSandbox
• Contexto
• useReducer