[PITCH] - Uma biblioteca React que vai melhorar a sua vida em 19.25%!

Você já se cansou de passar props para baixo da árvore de componentes? 😖

Eu sei que isso é chato. Na verdade, muito chato.

Além de abrir brechas para falhas de segurança.

Às vezes, você usa o Redux ou Context API, mas nem sempre é a melhor solução.

Porque você precisa criar muito código que não é necessário.

Ou pior, você só precisa passar um valor simples de um componente para outro.

E foi por isso que eu criei o React Trigger State.

Ele faz, mais ou menos, isso daqui:

Isso mesmo! O React Trigger State permite uma comunicação entre componentes sem ter uma relação pai-filho.

Mas... e se o usuário for para outra página e voltar?

Bem, não se preocupe, porque nós armazenamos os dados, então você não precisa perder seu tempo!

Curioso?

Espero que sim!

Se tiver, tem essas histórias que eu criei com o Storybook:

Tente mudar o valor do estado e veja o que acontece:

E depois tente ir em outra história e voltar para ver se o estado continua o mesmo.

Como usar?

useTriggerState

É um hook que dispara mudanças de estado de qualquer lugar na aplicação.

Seu funcionamento é quase igual ao do useState:

import { useTriggerState } from "react-trigger-state";

// num componente:
const [state, setState] = useTriggerState({
  name: "meu_primeiro_estado",
  initial: "Wow, parece que é mágica!",
});

E então você pode pegar o valor do estado:

import { useTriggerState } from "react-trigger-state";

// em outro componente:
const [state, setState] = useTriggerState({
  name: "meu_primeiro_estado",
});

Sim!! É mágica! Você não precisa mais de um componente pai para compartilhar o estado.

Isso virou problema do passado!

Se você se interessou, veja o exemplo no CodeSandbox:

Também há o useTriggerFunction e useGetFunction para compartilhar funções entre componentes.

E o useTriggerRef para compartilhar referências entre componentes.

Posso fazer um post sobre eles também?

Me avise nos comentários!

Se ficou curioso, acesse o perfil na NPM e veja a documentação completa.

E se ainda tiver um minutinho, por favor, acesse a página do projeto no GitHub e de uma estrela!

Me ajuda de montãoo

Obrigado!

#michelTeloMeNotaPorFavor

thmhz há 2 anos

Cara, não me entenda mal mas alguém precisa falar.

Sei que vc deve estar empolgado e tal, mas sua biblioteca não resolve problema nenhum no gerenciamento de estado.

Muito pelo contrário...

Eu estava analisando o código e vc está armazenando o estado em uma variável global dentro do objeto Window!!

Isso é uma péssima prática há anos e tem inúmeros problemas de segurança. Sem contar que é um baita anti-pattern no React.

Fica aqui o alerta, abs!

geavila há 2 anos

Olá, obrigado pelo feedback. Como eu estou desenvolvendo essa biblioteca há umas duas semanas, com certeza ainda há muito o que se melhorar. Em relação ao armazenamento do estado, o ```window.REACT_TRIGGER_STATE``` funciona para inicializá-lo. Isto é, quando um componente é montado, verifica-se, no ```window.REACT_TRIGGER_STATE```, se há tal variável, se não existir, ele a cria, de outra forma, utiliza-se o valor disponível. Depois disso, quando o state é alterado, o ```window.REACT_TRIGGER_STATE``` é atualizado. Mas o que compartilha, de fato, que X estado fora alterado é um ```CustomEvent```. Por isso, cada estado tem um ```CustomEvent``` associado a ele que monitora as atualizações. Espero que tenha conseguido expor a minha ideia e do porquê de eu ter feito dessa forma. Infelizmente, não consegui pensar numa forma de armazenar o ```state``` sem utilizar o ```window``` e o ```CustomEvent``` ao mesmo tempo que não seja necessário encapsular toda a aplicação. Mas, se você tiver alguma sugestão, eu ficaria muito feliz em te ouvir. Obrigado pela crítica, ela é muito importante para o meu crescimento.

RodrigoMedeiros há 2 anos

Gostei pela praticidade! Realmente isso é um problema em tudo que faço no React, e tenho resolvido agora com ContextAPI. Vi um comentário aqui criticando como foi desenvolvido, precisa ver isso com mais calma, mas achei genial.

Devo usar em breve! Mas tente evoluir e pegar mais opiniões, principalmente no desenvolvimento por baixo dos panos.

Obrigado!

geavila há 2 anos

Oiii então, aquela crítica realmente me ajudou. Hoje eu refatorei o código utilizando um Hook do React: [useSyncExternalStore](https://react.dev/reference/react/useSyncExternalStore). Esse hook permite criar um *subscriber* e uma função *getSnapshot*. Em suma, a primeira vai iniciar o ```state```. Já a segunda pega as alterações que ele vem a sofrer. Então, eu consigo emitir que X alteração aconteceu e todos os states que o contém conseguem pegar as modificações. O melhor de tudo: não precisa usar o ```window``` e tampouco adicionar um ```eventListener``` para cada novo state. O hook do ```React``` faz isso por nós! Por causa disso, o usuário final, não tem como saber a informação crua do ```state``` ou alterá-la. E isso também reduziu o size de 24kb para apenas 11kb!!

lucasbcoliveira há 2 anos

Cara, adorei sua lib, ela é EXTREMAMENTE útil e se você conseguir construí-la de forma consistente e segura para ir a produção, você irá quebrar alguns paradigmas de estrutura de aplicações react, pois vai simplificar MUITO. Quantos componentes avôs eu eliminarei da minha aplicação? Quantos ContextApi, ou estados globais criados apenas para servir de comunicação simples entre dois componentes?

O que falta é você comprovar sua solidez em produção, principalmente em aplicativos Next e etc..

Boa sorte!

geavila há 2 anos

vlw manito!

RenatoDevOficial há 2 anos

Boa! bem prático e fácil.

geavila há 2 anos

Brigadão! 😼

maxleon52 há 2 anos

Eu gostei muito. Parabéns pela iniciativa.

geavila há 2 anos

obrigado!! ah e feliz pascoa hehe. alias, eu já dei uma terceira melhorada nela, agora vc consegue setar o state como um localStorage e ele altera globalmente :) ```js import { stateStorage, useTriggerState } from "react-trigger-state"; // em alguma função const value = stateStorage.set("my_first_state_storage", "testeee"); // esse cara pega as alterações q o de cima fzr (sem estar no msm componente :D) const [state, setState] = useTriggerState({ name: "my_first_state_storage", }); ``` daí se consegue fzr umas loucuras q nem essas: ```js import { stateStorage, useTriggerState } from "react-trigger-state"; // em alguma função const value = stateStorage.set("my_first_state_storage", "testeee"); const value2 = stateStorage.set("outro_state", "testeee 1"); const value3 = stateStorage.set("outro_state2", "testeee 2"); ``` sem precisar importar um milhao de states kk

maxleon52 há 2 anos

Por favor, vá mantendo a DOC sempre atualziada, para facilitar e fortalecer o crescimento da sua lib.

yac há 2 anos

Muito interessante. Principalmente pela simplicidade de uso. Consigo facilmente me enxergar usando esses hooks :smile: Quanto ao título "19.25%" trata-se de algum dado real que você mediu em relação à performance ou algo assim?

Além disso, gostaria de mencionar que ainda vejo o valor do Redux e ContextAPI, porque os estados e funções não pertencem a nenhum componente, simplesmente são compartilhados e podem ser acessados por todos.

Porém, da mesma forma, vejo grande valor na sua biblioteca também. Tudo depende do caso de uso. Por exemplo se é algo que precisa ser acessado por apenas um componente que não tem essa relação de pai e filho, então por que ter que criar uma estrutura para servir todos os outros componentes? Apesar de que mesmo assim, com sua lib, ainda é possível que qualquer outro componente acesse esse estado, enquanto poupa linhas de código.

Sendo assim, parabéns pela excelente ideia e atitude :handshake:

Ganhou mais uma estrelinha :star:

geavila há 2 anos

Oi ```@cay```, obrigado pelo feedback! Sobre o título, eu criei esse número para chamar a atenção, mas não é um dado real. Todavia, em relação a praticidade, eu percebo que consigo poupar tempo e linhas de código com ela. E sim, não tenho como objetivo principal substituir o Redux ou o ContextAPI, mas sim, complementá-los. Por exemplo, eu uso o Redux para gerenciar o estado de autenticação do usuário, e o React Trigger State para gerenciar o estado de um componente específico. Pra motivos de curiosidade, um estagiário meu que deu essa ideia, tipo, se é possível pegar o ```onClick``` de um botão, por que não pegar o ```useState``` de um componente? E eu fiquei pensando nisso, e pensei, por que não? E aí eu fiz essa lib. Por causa disso, já consegui utilizar numa outra lib de design que eu tô fazendo ainda (gt-design hehehe) que tem o objetivo de ser o melhor design system de react (hueheu), daí o usuário nem precisa se preocurar em ficar criando um monte de estado, só precisa criar um nome para o componente da lib e pronto, ele já tem pelo menos 3 estados compartilhados com informações da página. Ahhh, e muitíssimo obrigado pela estrelinha! 🤗 [edit] Mas tava pensando agora... talvez, com algumas melhorias, daria pra usar o React Trigger State como um substituto do Redux, mas, enfim, isso é pra um futuro bem distante hehehe.

RodrigoSalomonDev há 2 anos

Bom dia! Tô começando agora na programação e tive a impressão que o Redux faz isso, não? Me ajudem a entender por favor. Abraço!

yac há 2 anos

Sim, faz. Porém exige criar uma estrutura pra isso (no caso de Redux, tem _store_, _actions_, etc.) Tem também a Context API (onde é necessário criar _contexts_ e _providers_, etc.), que na minha opinião é mais fácil de usar, e tem o mesmo objetivo, gerenciamento de estado. No caso a biblioteca que o `@geavila` criou, também tem o mesmo objetivo, que é evitar _prop drilling_ e facilitar o compartilhamento de estados entre componentes, só que de uma forma diferente, e simples de usar.

RodrigoSalomonDev há 2 anos

Obrigado pela explicação!

geavila há 2 anos

Oi! ```@RodrigoSalomonDev```, então, como o ```@cay``` escreveu, o objetivo do React Trigger State, é complementar o Redux. Então, enquanto o Redux é uma biblioteca que permite que você gerencie o estado da sua aplicação de forma global. O React Trigger State, permite que você compartilhe o estado entre componentes sem ter que passar por props. Um exemplo seria, um componente que cria um estado para um input, e outro componente que consome esse estado. Você não precisaria criar um avô para compartilhá-lo, você poderia usar o React Trigger State. Olhe nesse exemplo (usando redux):

Redux Example

Já aqui, usando o React Trigger State:

React Trigger State Example

Consegue ver a diferença? Com o React Trigger State, você poupa tempo neste processo de compartilhamento de estado, sobretudo, com informações que não precisam ser compartilhadas com toda a aplicação. Mas... talvez... no futuro ... eu melhore o React Trigger State para que ele possa ser usado como um substituto do Redux hehehe. Espero que tenha conseguido tirar a tua dúvida!

RodrigoSalomonDev há 2 anos

Conseguiu sim, demais! Vlw!