Executando verificação de segurança...
1
mateusfg7
1 min de leitura ·

[Ajuda] Eventos em React

Tenho um website para fazer mixes de sons de ambiente, no qual tenho uma lista de botões (sons) em que você pode ativar o que desejar e regular seu volume, criando um ambiente sonoro pra relaxar/estudar/dormir/seilaoq.

Quero implementar um botão para desativar todos os sons de uma vez, mas como fazer com que o componente de sons receba uma ação que não esteja nele próprio?

Pensei em criar um estado global com o Zustand (já que meu website já usa Zustand), tipo um estado que receba 0 ou 1, e no componente de som colocar um useEffect com esse estado global como dependência para disparar uma função de desliga o áudio toda vez que o estado mudar, mas eu não preciso saber o valor desse estado, só preciso que meu componente saiba que a ação foi disparada.

Dito isso, acho que essa implementação com useEffect até pode funcionar, mas tem muito cheiro de gambiarra, ou é impressão minha? Tem jeitos melhores de se fazer isso? issue relacionada

1
thiagoomatheus

Amigo, ainda estou estudando react, mas pelo o que estudei até agora acho que daria pra fazer um state no App que receba todos os sons ativos e quando alguém clicar nesse botão de limpar, ele passa um state vazio.

1
KlayverXD

O ideal é que para estados globais não seja gerenciados por um state padrão, isso pode chegar a ser um prop drilling. Eis o motivo de ele estar usando Zustand - imagino.

Ainda não usei Zustand, mas vi que é algo mais simplificado que o Redux.

Imagino que para esta ação seja ideal um estado específico, um "mute global", porque limpando todos os estados acabaria perdendo a informação de quais sons estavam ativos para um possivel "desmute global".

Esse estado geral poderia até ser usado dentro mesmo do componente como condicional, caso dê. A ideia do Effect vem mais de uma necessidade de executar um handle (acho que é esse o caso).

1
1
mateusfg7
Autor
Autor

Eu até já tenho um controlador de volume global que da pra mutar tudo e desmutar, a ideia era realmente de limpar sons ativos, desligar todos de uma vez, pra esse cenário em específico não precisaria saber quais estão ativos pra voltar depois.

Gostei muito da ideia do @thiagoomatheus, eu poderia implementar outras features usando esse padrão inclusive.

Sobre eu estar usando o Zustand, é puramente uma questão de DX, não cheguei a comparar ele com o Redux feature-a-feature e outras questões como performance, então não sei dizer qual é melhor no setindo de possibilidades, mas o Zustand é infinitamente mais simples de se lidar, e ta me atendendo muito bem, até então. Porisso escolhi ele.