Context API é uma maneira super bacana de passar estados pelos componentes sem precisar utilizar props, permitindo a atualização desse estado em qualquer parte da sua aplicação. Claro que em algumas situações é mais adequado o uso das props, mas , à medida que vamos aumentando àrvore de elementos, pode ficar bem chatinho transportar essas informações sem o uso de um gerenciador de estado global. E caso você não tenha notado esse é o trabalho da Context API. 😅
👾 Em resumo, é só imaginar que a Context API é um portal entre os componentes por onde você vai compartilhar as informações, independente se são elementos que se comunicam ao não. Belezinha?
❔ Como utilizar
-
Criar um diretório próprio para colocar o seu contexto.
Criar um arquivo
index.jsxe dentro dele importar ocreateContextdo react.
import React, {createContext, useState} from 'react';
- Criar e exportar o seu context (no mesmo arquivo)
export const MovieContext = createContext({});
👾 Detalhe: cada objeto Contexto (context) vem com um bicho chamado Provider e é através dele que você vai conseguir aplicar mudanças no seu context. E isso acontece porque ele aceita uma props ~eu nao disse que nao usaríamos props asuhuahs~ e todos os componentes filhos terão acesso a ela. Então no próximo passo vamos criar um provider chamado de MovieProvider, onde você vai inserir todas os estados que deseja utilizar na sua aplicação.
- Criar e exporta o seu provider (no mesmo arquivo)
export const MovieProvider = (props) => {
const [ movies, setMovies] = useState(()=>{
api.get('http://localhost:8000/home')
.then(response => { setMovies(response.data)
.catch(err => console.log(err))
});
const [ genres, setGenres ] = useState(()=>{
api.get('http://localhost:8000/home/genres')
.then(response => setGenres(response.data))
.catch(err => console.log(err))
});
const [ selected, setSelected ] = useState();
return(
<MovieContext.Provider
value={{
movies,
genres,
selected,
setSelected,
}}
>
{props.children}
</MovieContext.Provider>
)
}
- Importar o
providerno app, e utilizá-lo bem no topo da hierarquia de componentes para criar a sua camada de estados.
import React from 'react';
import { MovieProvider } from './providers/index.jsx';
import Routes from './routes/index.jsx'
function App() {
return (
<MovieProvider>
<GlobalStyle />
<Routes />
</MovieProvider>
);
}
export default App;
- Agora é só importar o contexto criado para utilizar as informações do seu provider.
import React, { useContext, useState } from 'react'
import { MovieContext } from '../../providers/index.jsx';
import Header from '../../components/Header'
import MovieList from '../../components/MovieList'
const Home = () => {
const { movies, genres } = useContext(MovieContext);
return (
<>
<Header page="home" className="clicked" ></Header>
{ genres ? genres.map(genre =>
<MovieList title={genre.title} movies={movies}/>
) : null}
</>
)
}
export default Home;
Prontinho, passar perrengue com props nunca mais! 😅
Top comments (0)