Componentes Container

Um componente do tipo container em React é responsável por lidar com lógica de negócios, gerenciamento de estado e/ou comunicação com APIs, passando dados e comportamentos para Componentes de Apresentação (ou “burros”). Esses componentes são também chamados de “smart components” porque encapsulam as operações mais complexas e permitem que os componentes de apresentação se mantenham simples e focados na UI.

Aqui está um exemplo de um componente container que busca dados de usuários de uma API e passa esses dados para um componente de apresentação para serem renderizados. Vou incluir também o componente de apresentação para ilustrar como os dados são passados e utilizados.

Exemplo em React (usando o componente de exemplo em Componentes de Apresentação):

import React, { useState, useEffect } from 'react';
import UsersDisplay from './UsersDisplay'; // Componente de apresentação
import { fetchUsers } from './services/apiService'; // Serviço de API
 
function UserListContainer() {
    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
 
    useEffect(() => {
        const loadUsers = async () => {
            setLoading(true);
            setError(null);
            try {
                const data = await fetchUsers();
                setUsers(data);
            } catch (err) {
                setError('Failed to fetch users');
                console.error(err);
            } finally {
                setLoading(false);
            }
        };
 
        loadDidUsers();
    }, []); // Executado apenas na montagem do componente
 
    return <UsersDisplay users={users} loading={loading} error={error} />;
}
 
export default UserListContainer;

Explicação:

• Este é o componente container. Ele usa o useState para gerenciar o estado dos usuários, se está carregando, e se há algum erro.
• O useEffect é utilizado para fazer a chamada de API quando o componente é montado. Dentro do useEffect, uma função assíncrona loadUsers é definida e executada.
• Ele lida com todas as operações assíncronas e a lógica de tratamento de erro.
• Os dados de usuários junto com as flags de loading e error são passados para o Componentes de Apresentação UsersDisplay.