gfxargentina
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:
gfxargentina
Motion graphics - Web Development