Redux Dev Tools nos va a servir mucho para entender mejor el flujo de nuestra información en nuestra aplicación y poder realizar debugging de manera sencilla.
Solamente necesitas instalar la extensión según el navegador que tengas:
Muchas gracias por tu aporte. Fue de donde obtuve un guía para dejar mi código. Si tu reducer y la forma de hacerlo, hubiera quedado más largo
Buscador usando expresiones regulares
Yo usé expresiones regulares para obtener una lista de resultados que coincidan con el texto ingresado en el buscador
Creé un nuevo key en el estado de redux llamado searchText inicializado con un string vacío y un action que lo modifica, ese action lo apliqué en el input para que con cada cambio en el input cambie el estado en Redux así:
action
En el return del componente justo después del componente Search agregué una validación para saber si tengo algún texto en la barra de búsqueda y si lo tengo muestro una nueva categoría con la lista de resultados filtrando trends y originals haciendo la comparación con la expresión regular y el título de las películas.
{ searchText &&(<Categoriestitle='Resultados de la búsqueda'><Carousel>{ trends.filter((item)=> regex.test(item.title.toLowerCase())).map((item)=>(<CarouselItemkey={item.id}{...item}/>))}{ originals.filter((item)=> regex.test(item.title.toLowerCase())).map((item)=>(<CarouselItemkey={item.id}{...item}/>))}</Carousel></Categories>)}
Buena solucion
Bello, Antioquia
Genial esta herramienta!
Me genera un error al colocar el compose me sale un error Ayuda !
<code>Error:Expected the reducer to be a function.localhost:8080:1:33697 a http://localhost:8080/:1defaulthttp://localhost:8080/:1Khttp://localhost:8080/:1Redux2Ihttp://localhost:8080/:1 reduceRight self-hosted:335Ihttp://localhost:8080/:1 createStore Redux<anonymous> webpack:///./src/index.js?:170 js http://localhost:8080/bundle.js:1565 __webpack_require__ http://localhost:8080/bundle.js:20<anonymous> webpack:///multi_(webpack)-dev-server/client?:20http://localhost:8080/bundle.js:1612 __webpack_require__ http://localhost:8080/bundle.js:20<anonymous> http://localhost:8080/bundle.js:84<anonymous> http://localhost:8080/bundle.js:87
Prueba pasándolo como una función:
const store =createStore(reducer, initialState,composeEnhancers())
Siguiendo el aporte de un compañero, definí a composeEnhancers así:
esto se agrego al Home, además de las variables necesarias del state, por sierto al state agregue 2 variables mas una para indicar si se esta realizando una busqueda y otra donde se guarda un arreglos con los resultados de la busqueda:
che sabes que yo tengo una solucion muy parecida pero te quiero hacer una consulta en particular
en el conteiner home
) : (
<VideoNotFound />
);
si en input esta vacio al iniciar la aplicacion no te aparece desde ya el componente VideoNotFound?
T-gold, no renderiza el componente ya que eso lo controlo con la variable isSearching, en un principio isSearching=false, por lo que renderizo las listas, en caso de que comience una busqueda cambia a true y al no traer resultados mostraria el videoNotFound
He de decir que me basé en mayor medida en la solución de los compañeros, pero para eso está la comunidad (Hermosa comunidad)! jejej
Agregué un nuevo arreglo en el store el cual contiene los buscados.
Creé una nueva sección que ilustrará los buscados.
Creé el action y reducer que se encarga de hacer las validaciones necesarias para filtrar los videos que quiere el usuario.
Dentro del componente search, conecté el mensionado con el store, le pasé el action que recibe mis datos y creé la función handleSearch que recibe los datos que digita el usuario y los manda como payload al action.
Gracias Oscar por este gran curso! :D
Mi solución al reto:
1 - Agrego un array al initialState para guardar los resultados de la búsqueda
'searchResult':{}
2 - En el componente Search agrego toda la lógica para recibir el string del input y mostrar los resultados.
Si alguno está utilizando reduxthunk como middleware, para poder habilitar la opción del compose se debe pasar la propiedad de la siguiente manera.
const store =createStore( reducer, initalState,composeEnhancers(applyMiddleware(reduxThunk)));
Esta increíble el redux dev tools aunque creo que hubiera sido mas útil verlo antes para no poder resolver los problemas durante el curso
¿Por qué nos dejan estas herramientas tan buenas hasta el final del curso? Considero que todo hubiese sido mucho más fácil de entender si las hubiéramos usado a la par en el desarrollo del proyecto.
¡Me encantó esta herramienta! <3
Hubiera sido muy bueno verla antes en el curso, me hubiera ahorrado varios quebraderos de cabeza y menos console.log() por todos lados. La sumamos al cajón de herramientas del Developer :P
Lo solucioné basicamente así: mando todo el input del form como payload, en el initialstate añadi un nueva propiedad llamada "search" que tiene como valor un objeto con las propiedades 'exist' (para comprobar si hay algun resultado, esto lo hice porque tenia un bug que cuando borraba el input, los elementos iniciales no volvian a renderizar en el home)
En el home.jsx basicamente hago dos comprobaciones: una para ver si la propiedad 'exist' de Search existe, si es así hago otra segunda comprobacion para ver si hay algun elemento, si es así, mostrar los elemtnos, caso contrario mostrar un mensaje de que no hay resultados para la busqueda. En caso de que la primerae comprobacion NO se cumpla (si exist === false), se renderizan los elementos iniciales:
Este es todo el codigo de las comprobaciones en home.jsx:
{search.exist?(<>{search.searchContent.length>0?(<Categories title="Búsqueda"><Carousel>{search.searchContent.map((item)=>(<CarouselItem key={item.id}{...item}/>))}</Carousel></Categories>):(<div className="notfound-message"><h1>No se ha encontrado ningún resultado para tu búsqueda :(</h1><img width="75" src={emoticonCaraTriste} alt="Emoticon triste"/></div>)}</>):(<>{myList.length>0&&(<Categories title="Mi Lista"><Carousel>{myList.map((item)=>(<CarouselItem key={item.id}{...item} isList />))}</Carousel></Categories>)}<Categories title="Tendencias"><Carousel>{trends.map((item)=>(<CarouselItem key={item.id}{...item}/>))}</Carousel></Categories><Categories title="Originales de Platzi Video"><Carousel>{originals.map((item)=>(<CarouselItem key={item.id}{...item}/>))}</Carousel></Categories></>)}
Buenísima tu solución bro, tenía el mismo problema al borrar el input!
Para la solución de search box añadi un atributo al Store que se llama filter, y cada vez que se escriba algo en el input, su valor se vaya a filter, y luego ese valor es leido por el componente Home, el mismo que filtra los videos en base a filter y muestra los videos filtrados:
para el reducer empleé levenshtein que lo explican en el curso profesional, para reducir el procesamiento disparo el evento solo cuando se pulsa enter, aunque lo he probado con onChange y funciona bien.
caseACTIONS.searchRequest:const listItems = state.trends.concat(state.originals);return{...state,search: listItems.filter(item=>{const l =newLevenshtein(item.title,action.payload)return l.distance<4;})}```
Reto: quise hacer algo muy sencillo sin tener que meterme con mandar actions al store, y que pudiese ser rápido y minimalista sobre la misma pantalla:
