Comments (7)
Fala @SallesCosta! Você está certo em partes, mas vamos lá que eu vou explicar tudo =)
O teste que você fez, adicionando dados na action
(especificamente o type
) vai quebrar mesmo, e isso independe do uso do createReducer
.
E pra entender o motivo, nós precisamos voltar lá para as primeiras aulas do módulo, onde eu expliquei como funciona o createStore
e os reducers:
Todo reducer espera sempre como input um valor do estado, e uma action (objeto com a propriedade type
).
Se o estado não for passado (igual a undefined
), o valor que essa variável de estado recebe é o initialState
definido para aquele reducer, correto?
Seria algo assim:
function counterReducer (state = 0, action) {
return state
}
No caso do exemplo acima, se state
for undefined
, o valor de state
dentro da função nunca será undefined
, e sim zero.
E assim que uma action é passada, e o seu type
é um type
esperado pelo reducer, o reducer vai retornar a lógica com base naquele type
:
function counterReducer (state = 0, action) {
if (action.type === 'INCREMENT') {
return state + 1
}
return state
}
Então aqui está a explicação do porquê o seu teste quebra: como você passou uma action válida, essa action foi executada pelo reducer, independente do valor anterior do estado, e o reducer vai retornar o novo valor do estado, não mais o initialState
, que é o que o seu teste espera.
Passar o estado em before
como undefined
só vai acontecer em um momento, e nunca isso vai ser feito manualmente por você: quem faz isso é o Redux!
Lembra da aula onde falamos sobre o createStore
? Nessa linha aqui é onde acontece o dispatch
do estado inicial vazio (undefined
) e nenhuma action válida é usada, só pro Redux já iniciar a store com todos os estados "prontos", apontando para o estado inicial de cada reducer.
Esse é o único momento em que uma action vai ser disparada sem o type
, e o estado inicial vai ser undefined
.
É esse cenário que nós estamos testando ali no primeiro print que você mandou: eu só coloquei o estado inicial como undefined
, pois é assim que o Redux vai fazer o primeiro dispatch
.
Dessa forma, o teste fica declarativo o suficiente pra dar a entender que, quando o estado inicial for undefined
e nenhuma action for passada, significa que esse é o primeiro dispatch
feito pelo Redux, que vai fazer o nosso estado se tornar o estado inicial.
Eu poderia ter passado qualquer coisa no before
, mas aí eu não estaria simulando exatamente o que o Redux faz =)
Ficou mais claro?
from curso-reactjs-ninja.
Boa, perfeito! Se algo não ficou muito claro, ou se vc tiver qualquer outra dúvida, fique à vontade pra mandar aqui :D
from curso-reactjs-ninja.
Nesse caso você pode usar o Object.hasOwn
no lugar do hasOwnProperty
.
Só substituir:
handleActions.hasOwnProperty(action.type)
por:
Object.hasOwn(handleActions, action.type)
from curso-reactjs-ninja.
Deu certo! Muito Obrigado!
from curso-reactjs-ninja.
o teste está aqui
from curso-reactjs-ninja.
Entendi.. um pouco sofisticado para uma primeira leitura.. mas ao reler eu entendi.
Ficou mais claro.
Obrigado!
from curso-reactjs-ninja.
Aproveito a Issue M3#A41
pois o Lint está me bloqueando o create-reducer.ts
para o commit.
Pra subir pro repo eu comentei a parte correta e deixei visível a parte errada
Estou usando Ts.. então tem bastante any
espalhado aí no projeto.
De que forma eu posso contornar essa questão do hasOwnProperty
?
Obrigado!
from curso-reactjs-ninja.
Related Issues (20)
- Cursoo está desatualizado webpack server HOT 5
- Projeto para uma Associação de crianças carentes HOT 3
- Não consigo gerar o bundle.js utilizando o comando webpack no terminal HOT 2
- M3#A33 - Redux HOT 3
- MRW#02 Configuração do Webpack HOT 1
- m1#a03 - começando a trabalhar com react HOT 4
- MMR#A06 - Usando sistema de módulos do ES6 HOT 4
- Aula - mrw#08 HOT 3
- React no frontend HOT 5
- Versão standardJS HOT 8
- Hooks HOT 3
- m1#a46 - setState sequenciais HOT 6
- Recomendação de curso firebase HOT 2
- Modulo 2 - Problema com rotas para alguns arquivos. HOT 2
- Atualização de código incorreto =) HOT 6
- Expor um estado - Caso simples HOT 4
- M1#A13 HOT 5
- Sobre o curso HOT 2
- Probelmas com a função .error() em M1#45 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from curso-reactjs-ninja.