checklist-context.md

Checklist do Context API

Vamos começar criando nossos arquivos dentro da pasta src:

• Criar uma pasta context;
• Dentro da pasta context vamos criar um arquivo myContext.js;

Dentro do arquivo myContext.js:

• Importar do react o createContext;
• Criar uma variável context que vai receber o resultado do createContext();
• Exportar a nossa variável;

Exemplo:

import { createContext } from 'react';

const context = createContext();

export default context;

Criando o Provider

Lembrando que o Provider é um componente que vai conter nossos estados globais da aplicação, geralmente importamos ele no index.js que é o ponto mais alto da hierarquia de componentes para prover nossos estados para todos os seus filhos.

• Dentro da pasta context vamos criar um arquivo myProvider.js;
• Vamos importar nosso MyContext nesse arquivo e criar o componente Provider;
• Recebemos via props os children da árvore de componentes;
• No retorno do Provider vamos chamar via tag o nosso MyContext.Provider que recebe um value como prop;
• Passamos dentro da tag os nossos children que seram alimentados pelo value do Provider;

import React, { useState } from 'react';
import MyContext from './myContext';

function Provider({ children }) {
  const INITIAL_STATE = { nome: 'Xablau', idade: 100 };
  const [state, setState] = useState(INITIAL_STATE);

  return (
    <MyContext.Provider value={ state }>
      {children}
    </MyContext.Provider>
  )
}

export default Provider;

OBS: Os estados dentro do Provider depende do componente ser funcional ou classe:

• Para classes utilizamos o this.state;
• Para funções utilizamos hooks, useState;

No arquivo index.js

• Vamos importar o nosso componente Provider englobando nosso app;

Agora toda nossa aplicação está sendo alimentada pelos dados disponibilizados no value do nosso Provider. Por fim só precisamos resgatar esses dados em qualquer componente da nossa aplicação.

OBS: Para consumir os dados também vai depender do componente ser funcional ou classe:

• Para classes utilizamos o MyContext.Consumer ou podemos utilizar o contextType;
• Para funções utilizamos hooks, useContext;