Manipulação estatal leve pendente
O gerenciamento do estado de carregamento é muito comum para reagir aplicativos, mas a maioria das maneiras de rastrear o estado de uma ação assíncrona é conectada a LIBs complexos para buscar dados (como a consulta de reação do TanStack, a consulta RTK) ou o gerenciamento de estado compartilhado (como o Redux Toolkit). Às vezes, adicionar um desses bibliotecas pode parecer um exagero. Então, o que podemos ir? Seria bom lidar com os estados pendentes e de erro de uma ação assíncrona sem reescrever a ação assíncrona, sem afetar o gerenciamento de estado do aplicativo existente e, no entanto, com uma maneira clara de compartilhar o estado da ação com vários componentes, quando necessário. Para abordar esta tarefa, criei um pequeno pacote chamado @t8/react-pendente. Aqui está o que é preciso para configurar o manuseio do estado de ação assíncrona com este pacote: + import {usependingState} de ‘@t8/react-pendente’; const itemList = () => {const [items, setItems] = Usestate ([]); + const [state, withState] = usePendingState (‘Item-List’); useeffect (() => { – fetchItems (). Então (setItems); + resistindo (fetchItems ()). Então (setItems);}, [fetchItems, withState]); + if (! State.complete) + Retornar carregamento …; + if (state.error) + retornar um erro ocorreu; retornar ; }; const status = () => { + const [state] = usePendingState (‘Item-List’); + + retorno state.complete? ‘Feito’: ‘ocupado’; }; Digite o modo de saída do modo de tela completa O código adicionado não altera a estrutura original e o código da ação assíncrona. Em nosso exemplo, os dados são armazenados no estado local, mas podem ser armazenados em outros lugares. O parâmetro String do gancho usePendingState () atribui uma chave única para o estado específico que pode ser usado dentro de outros componentes para se referir a esse estado (como no status no exemplo acima). Quando o estado pendente é necessário apenas em um único componente, podemos apenas omitir o parâmetro do gancho. Portanto, ao introduzir um complexo dados que busca a LIB parece redundante, este pequeno LIB de uso único pode oferecer uma maneira elegante e minimalista de configurar o manuseio do estado de ação assíncrono, local ou compartilhado, sem afetar o estado do aplicativo.
Fonte
