Nas aulas finais do capítulo 1, sobre SRP, temos o código refatorado para isolar as funções de cada componentes.
A didática é ótima, e de fácil entendimento. Porém, na aba de Opinião do Instrutor, nos deparamos com algumas inconsistências de sintaxe de código, e com a estrutura do código em si.
- Inconsistência de sintaxe:
Enquanto nas aulas em vídeo escrevemos o tipo de props que são função da seguinte maneira: handleRedirect: () => void;, vemos a seguinte implementação na seção de Opinião do Instrutor: handleRedirect: (e: React.MouseEvent<HTMLElement>) => void;.
Isso significa que alguma das implementações está errada? É...depende. Se o método handleRedirect vai tratar de algum evento, então a segunda implementação estaria correta. Mas, se o método não vai lidar com nenhuma lógica direcionada a eventos, e vai servir como um método genérico que não precisa de parâmetros, então a primeira implementação seria a melhor a se encaixar aqui.
Tudo na vida fica melhor com exemplos, então vamos lá!
- Lidando com Eventos
const handleRedirect: (e: React.MouseEvent<HTMLElement>) => void = (e) => {
e.preventDefault();
console.log("Evento de clique tratado.");
};
- Métodos genéricos (sem necessidade de lidar com eventos)
const handleRedirect: () => void = () => {
console.log("Redirecionando...");
};
- Diferentes Estruturas de Código
Mais especificamente na seção de Cart Actions, dentro das props, vemos o método onPayment. Porém, ele não foi mencionado ou implementado durante as aulas do primeiro módulo.
Isso pode gerar algum tipo de confusão para o aluno que for pego de surpresa pela presença desse método/prop aqui.
Espero ter ajudado!
