DEV Community

Luana Lessa
Luana Lessa

Posted on

🏁 Context API

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

  1. Criar um diretório próprio para colocar o seu contexto.

  2. Criar um arquivo index.jsx e dentro dele importar o createContext do react.

import React, {createContext, useState} from 'react';
Enter fullscreen mode Exit fullscreen mode
  1. Criar e exportar o seu context (no mesmo arquivo)
export const MovieContext = createContext({});
Enter fullscreen mode Exit fullscreen mode

👾 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.

  1. 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>
    )
}
Enter fullscreen mode Exit fullscreen mode
  1. Importar o provider no 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;
Enter fullscreen mode Exit fullscreen mode
  1. 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;
Enter fullscreen mode Exit fullscreen mode




Prontinho, passar perrengue com props nunca mais! 😅

Top comments (0)