Toast não exibe mensagens de erro | React: boas práticas e refatoração

Olá Candinho, tudo bem com você?

Peço perdão pela demora em te responder, mas dando uma analisada no seu projeto foi um erro bem simples, veja:

Quando você criou o validador de formulário, foi dessa maneira:

validacao[regra.campo] = {
    isInvalid: true,
    message: regra.mensagem
}

Ou seja, cada campo tem 2 atributos: isInvalid e message, entretanto na hora de fazer o reduce, você fez da seguinte maneira:

(erros, campo) => erros + campo.mensagem + '. ',

Porém, não há esse atributo mensagem (por isso o undefined), modificando para message, da seguinte maneira:

(erros, campo) => erros + campo.message + '. ',

Já irá funcionar corretamente!

Uma dica que pode te auxiliar com esses erros é substituir momentaneamente o reduce em uma linha, por um em bloco e testar as variáveis, por exemplo:

            const erros = camposInvalidos.reduce(
                (erros, campo) => { 
                    console.log(erros);
                    console.log(campo);
                    erros + campo.message + '. '
                },
                ''
            )

AI podemos ter um feedback de se o nome das propriedades estão corretos, por exemplo:

Object { isInvalid: true, message: "Informe um valor númerico" }

Isso me auxilia bastante quando estou desenvolvendo, com map | filter | reduce e me perco nas propriedades, e após corrigir podemos voltar para a maneira reduzida :)

Abraços e Bons Estudos!