Librería para realizar llamadas a urls, y manejar usuarios dentro de la app.
Ventajas:
Se escribe menos código.
Se puede llamar tanto sincrónico como asincrónico.
Manejo de usuario en React y React-Native
Se unifican las URLS que se consumen
Se usan las ultimas funciones de React, Context, useReducer
Cada request que se haga, va a estar disponible en la totalidad de la aplicación al estilo del redux.
Uso
importReact,{Component}from'react'
import{WSProvider}from'formws'
constApp=()=>{
const[user,setUser]=useState({nombre:'Tano'})
return(
<WSProvider
urls={{
ejemplo:'www.ejemplo.com',
ejemplo1:'www.ejemplo1.com'
}}// Objeto con las urls para consumir dentro de la app
}}// Método que se llama cuando desde algún componente se utliza setUser. Ideal para usar tanto en react como react-native ya que podes guardarlo de la forma que pinte.
user={user}// Si guardaste el usuario en algun lado, acá se lo pasas
isLoading,// Cuando se llama a call, se pone true, cuando termina false
call,// Se usa para llamar al endpoint
clean,// Limpia el context de la última llamada
hookId,// Para debuguear mejor
url,// La url del endpoint
data,// La data que devuelve el endpoint
error// SI ocurrió algun error se llena esta variable
}=useFetch('ejemplo')
return(
<Components
onClick={()=>{
constresult=awaitcall({
method:'GET'// Metoodo HTTP
query: {},// Objeto con los parametros a enviar, dependiendo el metodo
data:undefined||{}||[],// Objeto o array Para poner en el contexto antes de llamar
transformData:undefined||(data)=>{returndata},//Metodo para modificar el resultado antes de ponerlo en la variable data, lo que devuelva, va a estar ahí
isFormData:undefined||true||false// Si estás mandando archivos, usar en true
forceSync: undefined||true||false// Solo se usa el axios, no se guarda el estado en el contexto ni se rerenderiza el componente