Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Reducers e propriedades diversas na tela

Olá Alberto, na minha aplicação possuo um botão de Busca e controlo o estado dele (disabled) através uma propriedade que criei, chamada "isLoading" que estava no "state" da aplicação.

Após todas as refatorações eu fiquei um pouco perdido em como seria a melhor forma para atualizar ela.

Eu fiz igual você fez no curso para atualizar a "msg" na sua busca no Header. Porém cai num pequeno problema.

A "reducer" correspondente a essa página se chama "products":

export function products(state=[], action){

if( action.type === 'search' ){

return action.result; }

if( action.type === 'isLoading' ){

return action.isLoading; }

return state; }

Porém para tratar esta propriedade do botão, o React corretamente não aceita que eu passe True ou False, pois a entrada do state é um array.

O que eu deveria fazer aqui?

Criar uma nova Reducer só para este estado de botão? Igual você fez na mensagem do curso.

Eu achei meio confuso criar uma nova Reducer só para este controle, apesar que terei outros parecidos. Além de outras telas como a mesma lógica.

O que você me indicaria como boa prática, quero deixar tudo bem organizado pois será uma aplicação bem grande.

Obrigado!

6 respostas

O botão está "isLoading" ou não, depende de alguma outra coisa? To achando que na sua store poderia ficar os outros estados, mas o isLoading ta me parecendo um estado do botão mesmo que pode ser modificado em função de outra coisa na store...

Caso não seja essa a situação, não vejo problema em você disparar uma action informando o isLoading.

Essa propriedade "isLoading" está relacionada ao carregamento da lista de produtos. Quando apertar o botão eu passo ela para True. Após a lista voltar, vazia ou não, eu passo para False.

O mesmo comportamento têm uma modal que criei. Quando quero exibir eu passo True, quando quero fechar False.

Como eu poderia deixar elas na mesma Reducer da Lista de produtos? Ou devo criar outra Reducer mesmo?

Acho melhor criar outro mesmo. Para não acontecer isso que você falou, de uma hora chegar um array e outra chegar um boolean.

Bom dia Alberto, ainda estou com problemas neste ponto, se puder me explicar um pouco melhor, agradeço.

Tenho uma tela onde faço o controle "boleano" de vários botões.

Segue um exemplo do formato da reducer "reducer":

export function exemploReducer(state=false, action){

if( action.type === 'btnA' ){ return action.btnA; }

if( action.type === 'btnB' ){ return action.btnB; }

if( action.type === 'btnC' ){ return action.btnC; }

return state; }

Desta forma, toda vez que altero o valor de cada botão, ele altera também para os outros. Estou chamando desta forma: dispatch( btnA( true ) );

Está errada esta implementação? Eu preciso criar uma Reducer para cada Botão?

solução!

Acho que você não precisa de um reducer para cada botão... mas o seu reducer precisar retornar um objeto literal indicando o status de cada botão.. do jeito que está, o boolean retornado pelo reducer vai ser o mesmo para os três botões.. não tem como você saber se é o a, b ou c que está habilitado.

{
 a:true,
b: false,
c:false
}

retornando algo assim, você vai poder diferenciar.

Perfeito agora, resolvido, assim ficou bem prático.

Muito obrigado!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software