Vamos começar criando nossos arquivos dentro da pasta src
:
- Criar uma pasta
context
; - Dentro da pasta
context
vamos criar um arquivoMyContext.js
;
Dentro do arquivo MyContext.js
:
- Importar do react o
createContext
; - Criar uma variável
context
que vai receber o resultado docreateContext()
; - Exportar a nossa variável;
Exemplo:
import { createContext } from 'react';
const context = createContext();
export default context;
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 arquivoMyProvider.js
; - Vamos importar nosso
MyContext
nesse arquivo e criar o componenteProvider
; - Recebemos via props os
children
da árvore de componentes; - No retorno do Provider vamos chamar via tag o nosso
MyContext.Provider
que recebe umvalue
como prop; - Passamos dentro da tag os nossos
children
que serão alimentados pelovalue
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;
- 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