GFXARGENTINA
    Blog
  • Portfolio
  • Contacto
Funcionalidad de Busqueda en React con Redux Thunk
gfxargentina

gfxargentina

30-04-2022

Funcionalidad de Busqueda en React con Redux Thunk

Que tal gente, les comparto la 2 parte de como agregarle la funcionalidad de busqueda a un app MERN, la primera parte del backend la pueden ver aqui, en esta parte explico la parte del frontend en React.

En la app que yo hice utilizo React con Redux Thunk, les explico como arme el state con redux:

El store:

El store es la fuente unica de información, es de donde sacaran la informacion todos los componentes que la necesiten luego con el hook useSelector.

clientReducer.js

El reducer con el estado inicial vacio, los datos luego los recibe de la accion, clients, currentPage y numberPages vienen de la api.

types.js

Los tipos yo los tengo en un archivo separado, aqui solo muestro uno pero en mi aplicacion tengo un monton de tipos, pueden verlo en el gestion taller app

actionClients.js

La acción que le mandara los datos al reducer, si en el frontend se realiza una busqueda por nombre traera el nombre buscado, si no se realiza la busqueda devolvera solo todos los clientes.

Acción para la paginación:

con esta accion se realiza la paginación.

Para la paginacion utilizo React-Paginate lo pueden descargar aqui

Componente Clientes.js:

linea 13- selecciono el numero de paginas y los clientes que se mostraran del estado

linea 15- useState para setear el nombre a buscar

linea 17-useState para setear el numero de pagina que luego utilizara React Paginate

linea 19- funcion que cambia de pagina en el componente React Paginate

linea 23-la funcion para buscar el nombre, le puse un setTimeout para que recien empieze la busqueda despues de 500milisegundos, esto es para que la busqueda recien comienze despues de que se escriban unos cuantos caracteres, si no lo tuviera realizaria una busqueda por cada letra ingresada, llamaria a la api por cada letra.

linea 33-el useEffect llama a la api, si hay una busqueda por nombre, trae el nombre, si se cambia de pagina trae la pagina, si no trae todos los clientes

Html con TailwindCSS:

click derecho-abrir imagen en una pestaña nueva para que puedan ver bien el codigo

linea 141-Componente React Paginate.

Si llegaste hasta aqui te agradeceria cualquier comentario, si ves que algo esta mal o se podria realizar mejor escribeme un comentario, Gracias por leer.

Fuentes que utilize:

https://www.youtube.com/watch?v=HANSMtDy508

https://www.youtube.com/watch?v=soWg_UtD_AM

gfxargentina

gfxargentina

Motion graphics - Web Development

Escribir un Comentario

Posts Relacionados

Categorias