M3#A33 - Redux

[SallesCosta]

*Subi neste Repo para você ver como está o código Bom dia mestre Daciuk. Esta aplicação de TodoList com Redux eu comecei a desenvolver a partir do boilerplate de Vite + TS.. e tenho conseguido avançar até esta aula onde eu, provavelmente, deixei passar alguma coisa. O <Provider store={sotre} /> está em main.tsx e neste arquivo o <App /> está pedindo as propriedades handleAddTodo e Todos. Se eu entendi direito, estas props deveriam vir da store. Inclusive eu coloquei as duas props que ele estava pedindo só para poder commitar... Mas para você ver o erro, teria que tirar estas duas e deixar só :

<StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
</StrictMode>

Então, na situação atual, o botao adicionar está dando o reload na pagina porque ele não está executando a func handleAddTodo que tem o e.preventDefault(). Você pode me ajudar a entender o que estou fazendo de errado?

Obrigado 👍🏻

@fdaciuk

[fdaciuk]

Oi @SallesCosta! O problema está relacionado com o componente que você está importando. Veja: o componente que está "conectado" no redux está sendo exportado com export default, e o componente "padrão" App, que espera as props, está sendo exportado de forma nomeada (export function App), e você está importando o componente nomeado ao invés do default.

A diferença é sutil: usando as chaves, você está fazendo um import nomeado. Sem as chaves, você dá o nome que quiser, pois aí sim você estará importando que foi exportado de forma default ;)

Você só vai precisar desse componente exportado de forma nomeada se precisar escrever testes unitários, por exemplo, pois aí você consegue injetar suas próprias props para testar o comportamento do componente.

No seu app, você vai sempre usar o componente que foi exportado com o connect, pois é ele que vai fazer o trabalho de injetar as props no componente App automaticamente, à partir do que você passar em mapStateToProps e mapDispatchToProps =)

Sacou a ideia? =)

[SallesCosta]

Bom dia @fdaciuk. Deu certinho. Eu nao tinha entendido que o connect iria fornecer/injetar o matStateToProps e o mapDispatchToProps (o conteúdo destes dois). Pois bem a importação do App ficou da forma mais simples possível import App from './app e voilà !!! a vida voltou a fazer sentido! 🤣 Muito obrigado por esse olhar cirúrgico!

[fdaciuk]

Boa! Qualquer coisa avisa ae :D