Checklist ContextApi

checklist-context.md

Checklist do Context API

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

• Criar uma pasta contexts;
• Dentro da pasta contexts 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 serão alimentados pelo value do Provider;

OBS: A construção dos estados dentro do Provider depende do componente ser funcional ou de classe:

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

// EXEMPLO

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

const INITIAL_STATE1 = { nome: 'Xablau1', idade: 101 };
const INITIAL_STATE2 = { nome: 'Xablau2', idade: 102 };

function Provider({ children }) {
  const [state1, setState1] = useState(INITIAL_STATE1);
  const [state2, setState2] = useState(INITIAL_STATE2);

  const values = useMemo(() => ({
    state1, state2, setState1, setState2
  }), [state1, state2, setState1, setState2])

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

export default Provider;

No arquivo index.js

• Vamos importar o nosso componente Provider englobando nosso app;

import Provider from './context/MyProvider'

<Provider>
   <App />
</Provider>

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.

// Uso com hook useContext

import React, { useContext } from 'react';
import MyContext from './context/MyContext';

const value = useContext(MyContext); // recebe o value provido pelo Contexto