Falha na utilização do reduce | JavaScript: conhecendo o Browser e padrões de projeto

Estou praticando as aulas e me deparei com um problema, onde o reduce n~;ao está somando e sim concatenando os valores. Segue meu código: ClienteView

class ClienteView extends View {
    constructor(elemento){
        super(elemento);
    }

    template(model){
        return `
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th>Nome</th>
                    <th>Data Nascimento</th>
                    <th>CPF</th>
                    <th>Renda</th>                    
                </tr>
            </thead>

            <tbody>
                ${model.clientes.map(n => `
                        <tr>
                            <td>${n.nome}
                            <td>${DateHelper.dataParaTexto(n.data)}</td>
                            <td>${n.cpf}</td>
                            <td>${n.renda}</td>
                        </tr>
                    `
                ).join('')}
            </tbody>

            <tfoot>
                <td colspan="3"></td>
                <td>${model.clientes.reduce((total, n) => total + n.renda, 0.0)}
                </td>
            </tfoot>        
        </table>
        `;
    }
}

Index

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Cadastro Clientes</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">

</head>
<body class="container">

    <h1 class="text-center">Cadastro de Cliente</h1>

    <form class="form" onsubmit="clienteController.adiciona(event)">

        <div class="form-group">
            <label for="nomeCompleto">Nome Completo</label>
            <input type="text" min="1" step="1" id="nomeCompleto" class="form-control" required/>
        </div>

        <div class="form-group">
            <label for="data">Data Nascimento</label>
            <input type="date" id="data" class="form-control" required autofocus/>        
        </div>    

        <div class="form-group">
            <label for="renda">Renda</label>
            <input id="renda" type="number" class="form-control"  min="0.01" step="0.01" value="0.0" required />
        </div>

        <div class="form-group">
            <label for="cpf">CPF</label>
            <input id="cpf" type="number" class="form-control"  required />
        </div>

        <button class="btn btn-primary" type="submit">Incluir</button>
    </form>

    <div class="text-center">        
        <button class="btn btn-primary text-center" type="button">
            Apagar
        </button>
    </div> 
    <br>
    <br>

    <div id="clienteView"></div>

    <script src="js/app/models/Pessoa.js"></script>    
    <script src="js/app/models/PessoaFisica.js"></script>
    <script src="js/app/models/ListaClientes.js"></script>
    <script src="js/app/controllers/ClienteController.js"></script>
    <script src="js/app/views/View.js"></script>
    <script src="js/app/views/ClienteView.js"></script>
    <script src="js/app/helpers/DateHelper.js"></script>        
    <script>
        let clienteController = new ClienteController();
    </script>

</body>
</html>

Model

class Pessoa {
    constructor(nome, data, renda){
        this._nome = nome;
        this._data = new Date(data.getTime());
        this._renda = renda;
    }

    get nome(){
        return this._nome;
    }

    get data(){
        return new Date(this._data.getTime());
    }

    get renda(){
        return this._renda;
    }
}

Ola Fabrício, isso acontece porque todo valor que você pega de um input ele pega como string,o do curso funcionou porque la o professor estava somando o total com volume e volume e um resultado de uma multiplicação la em Negociacao ou seja assim:

get volume(){ return this._quantidade * this._valor; }

nesse caso ele multiplica string com string porem o javaScript quando multiplica 2 strings ele por debaixo dos panos sabe que e uma multiplicação e converte tudo pra numero, ele impõe uma operação,retornando assim como resultado um numero,porem se você somar 2 strings ou um numero com string ele não faz a mesma coisa ele concatena,e no cado de renda você la em reduce ta somando um float 0.0 com n.renda que e um valor que você pegou do input ou seja uma string por isso a concatenação,no seu caso la em pessoa faça assim que resolve:

get renda(){ return parseInt(this._renda); }

espero ter ajudado e bons estudos ;)

Mergulhe em programação