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

REACT, como manter os estados da minha aplicação sincronizada com a API?

Por exemplo, eu tenho um formulário onde adiciono um novo item, quando dou submit, ele da um post na minha api com esse novo item.

Porém essa mudança, corretamente não reflete na UI, então como posso manter minha UI sincronizada com a API?

Se eu uso o redux por exemplo, eu tenho que além de dar um post na api, dar um dispatch no reducer de adicionar novo item? Acredito que essa abordagem crie uma série de problemas.

Ou então, além do botão de submit dar o submit, ele também roda uma função que ativa o useEffect do componente dos items, fazendo com que ele faça outra chamada na API e pegando a última versão...

No geral a resposta que eu busco são tópicos/conceitos/ferramentas para que eu possa estudar sobre esse assunto.

Vlw

Carregando publicação patrocinada...
2
paulobatista

Fala vitor,

Confirmando a resposta do miguelaugl, recomendo o React Query. Ele faz esse trabalho de manter seus estados sincronizados, disponibilizando várias funcionalidades pra você interagir com suas queries (dados armazenados no cache, mutations, etc).

Depois que você pega a manha, fica delicinha!! Recomendo demais.

1
viniciusbecaleti

Sim, você mesmo respondeu. A ideia é manter um estado com os items, e quando você fazer um created por exemplo, você além de fazer a requisição pra API, já faz a atualização no estado.

1
miguelaugl

Fala, mano, tranquilo?

Com o passar dos anos acabei aprendendo que a melhor maneira de gerenciar o server state das minhas aplicações React é deixar que alguma biblioteca como a React Query ou a SWR cuide disso.

Isso porque elas já entregam diversas funcionalidades interessantes e que são complexas de se fazer de forma eficiente, como:

  • Manipulação e uso de cache;
  • Controle de quando os dados estão desatualizados;
  • Atualização de dados desatualizados em background (de forma que o usuário não perceba que uma nova requisição foi feita);
  • Deduplicação de requests;

Entre outros vários benefícios. Eu, particularmente, uso mais e recomendo a biblioteca React Query.

1
vitormarkis
Autor
Autor

boa miguel, mas em relação aos estados, como manipular valores de um input de um formulario mais complexo (cliche), numa rota de edição, os input devem receber como valores default, os valores desse usuario, que estão salvos aonde? em cache, gerenciador de estado, payload de uma mudança de rota? e o setter de estado de cada input, fica na mão de quem? redux, useState, useReducer?

quais abordagens voce lidaria para resolver esses problemas?

1
heuderdev

Então!

Se você tem a certeza que o cadastro deu sucesso na API, não venho nenhum problema de você adicionar o novo item no valor, sendo assim evitando fazer mais uma requisição a API;

[...old, new]

Abraços!