Aplicação do status da requisição no Redux

Nas lições anteriores, usamos redutores adicionais para descrever o que nossa aplicação deve fazer se fetchProducts despacha as ações pending, fulfilled e rejected durante uma requisição. Agora podemos mostrar ao usuário em qual estágio a carga de dados está no momento.

Vamos abrir nossa aplicação de produtos, e nela o arquivo ProductsList.jsx. A primeira coisa que faremos é criar um componente separado para o cartão do produto ProductCard. Faremos isso logo após as linhas de importação, antes da função ProductsList. Passaremos product para ele como prop:

const ProductCard = ({ product }) => {
	return ()
}

E agora, nos parênteses vazios do return transferiremos todo o código para exibir os dados do produto de dispProducts:

const ProductCard = ({ product }) => {
	return (
		<div key={product.id} className="product-excerpt">
			<h3>{product.name}</h3>
			<SellerOfProd sellerId={product.seller} />
			<p>{product.desc.substring(0, 100)}</p>
			<UserReactions product={product} />
			<Link to={`/products/${product.id}`} className="link-btn">
				view
			</Link>
		</div>
	)
}

E removeremos em ProductsList a linha de código restante. Ela não é mais necessária:

const dispProducts = products.map((product) => ())

E agora, no início do código da função ProductsList criaremos mais algumas variáveis, error e content. A primeira será para o erro, na segunda registraremos um ou outro conteúdo dependendo do status da requisição. Faremos isso antes de const dataFetch = useRef(false):

const error = useSelector((state) => state.products.error)
let content

Agora, antes do comando return do componente ProductsList, escreveremos um bloco de código com condições sob as quais em content será registrado um ou outro conteúdo dependendo do status. Primeiro, descreveremos o status 'in progress' - quando nossa requisição é enviada. Neste caso, informaremos ao usuário que os dados estão sendo carregados:

if (productStatus === 'in progress') {
	content = <p>Carregando lista de produtos ...</p>
}

Se nosso carregamento for bem-sucedido (denotamos isso como 'success'), então precisamos exibir a lista de produtos obtidos. Vamos exibi-la no map usando o componente ProductCard, ao qual passaremos product como prop:

if (productStatus === 'in progress') {
	content = <p>Carregando lista de produtos ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
}

E o último status que temos - é 'fail'. Vamos adicioná-lo também. Usaremos aqui a variável error, na qual registramos anteriormente o erro do estado:

if (productStatus === 'in progress') {
	content = <p>Carregando lista de produtos ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
} else if (productStatus === 'fail') {
	content = <div>{error}</div>
}

E como último passo, no bloco de código para return substituiremos o antigo {dispProducts} por {content}.

Vamos executar nossa aplicação, clicar no menu em 'Products'. Tudo funciona. Vemos que por aproximadamente 2 segundos (como configuramos no servidor) temos a mensagem 'Products list loading ...' pendurada sob o formulário de adição de produto, e depois a lista de produtos aparece.

Abra sua aplicação de estudantes. Abra nela o arquivo StudentsList.jsx. Crie nele um novo componente StudentCard. Transfira para ele o código de dispStudents, como mostrado na lição.

Crie na função StudentsList as variáveis error e content. Atribua à variável content o conteúdo dependendo do status da requisição. Não se esqueça de substituir no retorno do JSX o antigo dispStudents por content.