🏁 컨텍스트 API

Context API é uma maneira super bacana de passar estados pelos componentes sem precisar utilizar props, qualquer parte da sua aplicação에서 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. 이 경우에는 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. 벨레지냐?

❔ 코모 활용자

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

Criar um arquivo index.jsx e dentro dele importar o createContext do 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. MovieProvider에 대한 공급자 채널이 없는 경우에는 이 서비스를 사용할 수 있는 방법을 찾을 수 없습니다.

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 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;

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! 😅