JS Experience 2017 - React + Redux. Pensando em Redux
Transferir como PPTX, PDF1 gostou193 visualizações
O documento é uma introdução ao uso de React e Redux, abordando a definição, aplicação e os três pilares do Redux: uma única fonte de verdade, estado somente leitura e mudanças realizadas com funções puras. Também fornece orientações práticas sobre como iniciar um projeto com Redux, incluindo planejamento da estrutura e criação de componentes. Links úteis para recursos adicionais são incluídos ao final.
JS Experience 2017 - React + Redux. Pensando em Redux
- 1. REACT + REDUX PENSANDO EM REDUX
- 2. Meu nome é Guilherme Ventura Desenvolvedor Front-end apaixonado por novas tecnologias OLÁ!
- 3. INTRODUÇÃO Vamos começar pelo começo, certo?
- 4. REACT ∎ O que é?
- 5. Uma biblioteca Javascript para construir interfaces de usuário. - React Homepage
- 6. REDUX ∎ O que é? ∎ Quando utilizar no meu projeto? ∎ Os três pilares do redux
- 7. Redux is a tool for managing both data-state and UI- state in JavaScript applications. It's ideal for Single Page Applications (SPAs) where managing state over time can be complex. It's also framework-agnostic, so while it was written with React in mind, it can even be used with Angular or a jQuery application. - Brad Westfall, on Leveling Up with React: Redux
- 8. QUANDO USAR NO MEU PROJETO?
- 9. Don't use Redux until you have problems with vanilla React. - Dan Abramov You'll know when you need Flux. If you aren't sure if you need it, you don't need it. - Pete Hunt
- 11. ∎ Single source of truth ∎ State is read-only ∎ Changes are made with pure functions
- 12. SINGLE SOURCE OF TRUTH O estado de toda sua aplicação é armazenado em uma árvore de objetos dentro de um único store.
- 13. STATE IS READ-ONLY A única maneira de mudar o estado é emitindo uma ação, um objeto descrevendo o que aconteceu.
- 14. CHANGES ARE MADE WITH PURE FUNCTIONS Para especificar como a árvore de estado é transformada pelas ações, você escreve reducers puros.
- 16. OK, por onde começar a usar o REDUX?
- 17. PRA CADA COMPONENTE... Planeje a estrutura Crie Componente s de Apresentaçã o Escreva as Ações Escreva os Reducers Amarre as ações aos seus componentes
- 18. PLANEJE A ESTRUTURA Disseque cada ponto da sua aplicação antes de começar a codificar. Identifique os componentes, a relação entre cada um deles, quais ações/dados cada um deve ter. Ou enfrente as consequências depois...
- 19. CRIE OS COMPONENTES DE APRESENTAÇÃO Antes de começar a criar actions, reducers e containers, crie os componentes que não vão lidar diretamente com a lógica da aplicação para facilitar a visualização e a estrutura.
- 20. ESCREVA AS AÇÕES
- 23. EXEMPLO: REDUCER
- 24. AMARRE AS AÇÕES AOS SEUS COMPONENTES ∎ O método connect ∎ mapStateToProps ∎ mapDispatchToProps
- 28. E finalmente… Repita tudo outra vez :)
- 29. LINKS UTÉIS ∎ http://redux.js.org/ ∎ https://egghead.io/series/getting-started-with-redux ∎ http://blog.isquaredsoftware.com/series/idiomatic-redux/ ∎ https://hackernoon.com/thinking-in-redux-when-all-youve- known-is-mvc-c78a74d35133