Debug con Redux Devtools

Clase 28 de 29 • Curso de React Router 5 y Redux

Resumen

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:

Una vez instalado dentro de nuestro index.js vamos a añadir el siguiente código:

// importamos compose  
import { createStore, compose } from ‘redux’;  
...  
  
  
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose  
  
const store = createStore(reducer, initialState, composeEnhancers

Carlos Hernández Méndez

student•

Leyendo la documentación, yo sólo agregué lo siguiente y me funcionó a la perfección.

const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION__ &amp;&amp; window.__REDUX_DEVTOOLS_EXTENSION__()

const store = createStore(rootReducer, initialState, composeEnhancers)

Link de la documentación oficial: https://github.com/zalmoxisus/redux-devtools-extension#installation

Mayra Macedo

student•

Buen aporte amigo!

ANTHONY JEAMPIER RANGEL RODRIGUEZ

student•

gracias compañero

Edison Proaño

student•

Mi solución:

En el JSON de initialState en index.js:

"searchResult": [],

En el componente Search:

import React from 'react';
import classNames from 'classnames';
import { getVideoSearch } from '../actions';
import { connect } from 'react-redux';
import '../assets/styles/components/Search.scss';


const Search = (props) => {

    const { isHome, getVideoSearch } = props;

    const inputStyle = classNames('input', {
        isHome
    });

    const handleInput = (event) => {
        getVideoSearch(event.target.value);       
    }

    return (
        <section className="main">
            <h2 className="main__title">¿Qué quieres ver hoy?</h2>

            <input 
                className={inputStyle} 
                type="text" 
                placeholder="Buscar..."
                onKeyUp={handleInput}
            />

        </section>
    )
};

const mapStateToProps = state => {
    return {
        searchResult: state.searchResult,
    }
}

const mapDispatchToProps = {
    getVideoSearch,
}


export default connect(mapStateToProps, mapDispatchToProps)(Search);

Se crea una accion en index.js en la carpeta action:

export const getVideoSearch = payload => ({
    type: 'GET_VIDEO_SEARCH',
    payload,
});

Se crea la función en un caso en el reducer en index.js:

 case 'GET_VIDEO_SEARCH':
            
            if(action.payload === "") return { ...state, searchResult: []};

            const listas = [...state.trends, ...state.originals];

            return {
                ...state,
                searchResult: listas.filter(item => item.title.toLowerCase().includes(action.payload.toLowerCase()))
            };

Dentro del Home, utilizamos la lógica de estas funciones para crear una sección de búsqueda:

import React from 'react';
import {connect} from 'react-redux';
import Header from '../components/Header';
import Search from '../components/Search';
import Categories from '../components/Categories';
import Carousel from '../components/Carousel';
import CarouselItem from '../components/CarouselItem';
import '../assets/styles/App.scss';

const Home = ({ myList, trends, originals, searchResult }) => {

    return (
        <>
            <Header />          
            <Search isHome />

            { 
                Object.keys(searchResult).length > 0 && 
                    (
                        <Categories title="Resultados de la busqueda...">
                            <Carousel>
                                {searchResult.map(item =>
                                    <CarouselItem 
                                    key={item.id} 
                                    {...item}
                                    />
                                )}
                            </Carousel>
                        </Categories>
                    )                        
            }

const mapStateToProps = state => {
    return {
        myList: state.myList,
        trends: state.trends,
        originals: state.originals,
        searchResult: state.searchResult,
    };
};

export default connect(mapStateToProps, null)(Home);

Irungaray Agustin

student•

Hola, lo implemente como hiciste vos pero no logro que se llame a la acción, me podrías pasar tu repo?

Irungaray Agustin

student•

Ya lo solucioné, tenía un typo en el action!

Manuel Ojeda

student•

Reto solucionado:

Dentro del JSON que se encuentra en index.js puse un array con todo el contenido: content.
Generé un action con el nombre searchVideo y un reducer con SEARCH_VIDEO.
Dentro del reducer hice (la búsqueda se hace en minúsculas para hacerlo insensitive case):

if (action.payload === '') {
        return {
          ...state,
          search: [],
        };
      }
      return {
        ...state,
        search: state.content.filter((items) => items.title.toLowerCase().includes(action.payload.toLowerCase())) ||
          [],
      };

En Search añadí los componentes de Categories, Carousel, CarouselItem para hacer el render de los resultados.
En Search vincule la acción para obtener los resultados
Hice un handleInput para capturar el valor del input cada que hay un cambio en el valor.

Dejo mi repositorio para mejor referencia: https://github.com/manuelojeda/escuela-js-platzi-video/tree/feature/router-redux

Jesús Miguel Quinto Teran

student•

Curiosamente llegue a la misma conclusión que tu, con la diferencia que yo estoy uniendo los resultados de las búsquedas de trends y originals.

    case 'SEARCH_VIDEO':
      if (action.payload === '') return {...state, results: []}

      let results = []
      const textSeach = action.payload.toLocaleLowerCase();
      const resultsTrends = state.trends.filter(item => item.title.toLowerCase().includes(textSeach))
      const resultsOriginals = state.originals.filter(item => item.title.toLowerCase().includes(textSeach))
      results = results.concat(resultsTrends);
      results = results.concat(resultsOriginals);

      return {
        ...state,
        results
      }

Mauricio Henao

student•

Genial! Gracias por los aportes a ambos!

Nadir Antonio Soza Solis

student•

Esta clase se debió impartir posterior a la instalación y uso inicial de Redux, se hubiera entendido mejor la explicación.

Leandro Videla

student•

import React from "react";
import { connect } from "react-redux";
import { searchVideo } from "../actions/";
import classNames from "classnames";
import "../assets/styles/components/Search.scss";

const Search = props => {
  const { isHome, searchVideo } = props;
  const inputStyle = classNames("input", {
    isHome
  });

  const handleInput = () => {
    searchVideo(event.target.value);
  };

  return (
    <section className="main">
      <h2 className="main__title">¿Qué quieres ver hoy?</h2>
      <input
        type="text"
        className={inputStyle}
        onChange={handleInput}
        placeholder="Buscar..."
      />
    </section>
  );
};

const mapDispatchToProps = { searchVideo };

export default connect(null, mapDispatchToProps)(Search);

case "SET_SEARCH":
      if (action.payload === "") return { ...state, search: [] };

      const listas = [...state.trends, ...state.originals];

      return {
        ...state,
        search: listas.filter(item =>
          item.title.toLowerCase().includes(action.payload)
        )
      };

export const searchVideo = payload => ({
  type: "SET_SEARCH",
  payload
});

import React from "react";
import { connect } from "react-redux";
import Search from "../components/Search";
import Categories from "../components/Categories";
import Carousel from "../components/Carousel";
import CarouselItem from "../components/CarouselItem";

import "../assets/styles/App.scss";

const Home = ({ myList, trends, originals, search }) => {
  return (
    <div className="App">
      <Search isHome />
      {search.length > 0 && (
        <Categories title="Search">
          <Carousel>
            {search.map(item => (
              <CarouselItem key={item.id} {...item} />
            ))}
          </Carousel>
        </Categories>
      )}
      {myList.length > 0 && (
        <Categories title="Mi Lista">
          <Carousel>
            {myList.map(item => (
              <CarouselItem key={item.id} {...item} isList={true} />
            ))}
          </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>
    </div>
  );
};

const mapStateToProps = state => {
  return {
    myList: state.myList,
    trends: state.trends,
    originals: state.originals,
    search: state.search
  };
};

export default connect(mapStateToProps, null)(Home);

Andrés Felipe Eslava Zuluaga

student•

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

Edwin García

student•

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

export const setSearchText = (payload) => ({
  type: 'SET_SEARCH_TEXT',
  payload,
});

reducer

case 'SET_SEARCH_TEXT':
      return {
        ...state,
        searchText: action.payload,
      };

Search.jsx

import React from 'react';
import { connect } from 'react-redux';
import classNames from 'classnames';
import { setSearchText } from '../actions';
import '../assets/styles/components/Search.scss';

const Search = ({ isHome, setSearchText }) => {
  const inputStyle = classNames('input', {
    isHome,
  });

  const handleInput = (event) => {
    setSearchText(event.target.value);
  };

  return (
    <section className='main'>
      <h2 className='main__title'>¿Qué quieres ver hoy?</h2>
      <input
        className={inputStyle}
        type='text'
        placeholder='buscar...'
        onChange={handleInput}
      />
    </section>
  );
};

const mapDispatchToProps = {
  setSearchText,
};

export default connect(null, mapDispatchToProps)(Search);

En el Home agregué searchText al mapStateToProps y creé una expresión regular usando su valor en lower case.

const regex = new RegExp(`.*${searchText.toLowerCase()}.*`);

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 && (
        <Categories title='Resultados de la búsqueda'>
        <Carousel>
            {
            trends.filter((item) => regex.test(item.title.toLowerCase()))
                .map((item) => (
                <CarouselItem key={item.id} {...item} />
                ))
            }
            {
            originals.filter((item) => regex.test(item.title.toLowerCase()))
                .map((item) => (
                <CarouselItem key={item.id} {...item} />
                ))
            }
        </Carousel>
        </Categories>
    )
}

Sofia Nupieri

student•

Buena solucion

José Luis Burgon Cervantes

student•

Bello, Antioquia

Seba Cardoso

student•

Genial esta herramienta!

Andrés Carrillo

student•

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/:1
    default http://localhost:8080/:1
    K http://localhost:8080/:1
    Redux 2
    I http://localhost:8080/:1
    reduceRight self-hosted:335
    I http://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?:2
    0 http://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

mgl Brv

student•

Prueba pasándolo como una función:

const store = createStore(reducer, initialState, composeEnhancers())

Juan Camilo Urbano Gómez

student•

Siguiendo el aporte de un compañero, definí a composeEnhancers así:

const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

Funciona :D

Roso Peñaranda

student•

así que el codigo del buscador

import React from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { getVideos, isSearching } from "../actions";

import classNames from "classnames";
import "../assets/styles/components/Search.scss";

const Search = props => {
  const { isHome } = props;
  const inputStyle = classNames("input", {
    isHome,
  });

  const handleChance = event => {
    if (event.target.value === "") {
      props.isSearching(false);
    } else {
      props.isSearching(true);
      props.getVideos(event.target.value);
    }
  };

  return (
    <section className="main">
      <h2 className="main__title">¿Qué quieres ver hoy?</h2>
      <input
        type="text"
        className={inputStyle}
        onChange={handleChance}
        placeholder="Buscar..."
      />
    </section>
  );
};

Search.prototype = {
  isHome: PropTypes.bool,
  getVideos: PropTypes.func,
};

const mapToDispatchToPros = {
  getVideos,
  isSearching,
};

export default connect(null, mapToDispatchToPros)(Search);

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:

if (isSearching) {
    return searching.length > 0 ? (
      <>
        <Search isHome />
        <Categories title="Búsqueda">
          <Carousel>
            {searching.map(item => (
              <CarouselItem key={item.id} {...item} isMyList={true} />
            ))}
          </Carousel>
        </Categories>
      </>
    ) : (
      <VideoNotFound />
    );
  }

VideoNotFound es un componente donde solo doy la respuesta al no conseguir nada se agregan estos 2 actions


export const getVideos = payload => ({
  type: "GET_VIDEOS",
  payload,
});

export const isSearching = payload => ({
  type: "IS_SEARCHING",
  payload,
});

y los reducers:


 case "IS_SEARCHING":
      return {
        ...state,
        isSearching: action.payload,
      };

      break;

    case "GET_VIDEOS":
      return {
        ...state,
        searching: state.trends
          .concat(state.originals)
          .filter(item =>
            item.title.toLowerCase().includes(action.payload.toLowerCase())
          ),
      };
      break;

El repositorio completo esta en:

https://github.com/RosoPenaranda/reactPractico

Tomas Goldenberg

student•

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?

Roso Peñaranda

student•

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

el codigo completo del home es:


import React from &quot;react&quot;;
import { connect } from &quot;react-redux&quot;;
import Search from &quot;../components/Search&quot;;
import Categories from &quot;../components/Categories&quot;;
import Carousel from &quot;../components/Carousel&quot;;
import CarouselItem from &quot;../components/CarouselItem&quot;;
import VideoNotFound from &quot;../components/VideoNotFound&quot;;
import &quot;../assets/styles/App.scss&quot;;

const Home = props =&gt; {
  const { isSearching, myList, trends, originals, searching } = props;

  if (isSearching) {
    return searching.length &gt; 0 ? (
      &lt;&gt;
        &lt;Search isHome /&gt;
        &lt;Categories title=&quot;Búsqueda&quot;&gt;
          &lt;Carousel&gt;
            {searching.map(item =&gt; (
              &lt;CarouselItem key={item.id} {...item} isMyList={true} /&gt;
            ))}
          &lt;/Carousel&gt;
        &lt;/Categories&gt;
      &lt;/&gt;
    ) : (
      &lt;VideoNotFound /&gt;
    );
  }
  return (
    &lt;&gt;
      &lt;Search isHome /&gt;
      {myList.length &gt; 0 &amp;&amp; (
        &lt;Categories title=&quot;Mi lista&quot;&gt;
          &lt;Carousel&gt;
            {myList.map(item =&gt; (
              &lt;CarouselItem key={item.id} {...item} isMyList={true} /&gt;
            ))}
          &lt;/Carousel&gt;
        &lt;/Categories&gt;
      )}

      &lt;Categories title=&quot;Tendencias&quot;&gt;
        &lt;Carousel&gt;
          {trends.map(item =&gt; (
            &lt;CarouselItem key={item.id} {...item} /&gt;
          ))}
        &lt;/Carousel&gt;
      &lt;/Categories&gt;

      &lt;Categories title=&quot;Originales Platzi Video&quot;&gt;
        &lt;Carousel&gt;
          {originals.map(item =&gt; (
            &lt;CarouselItem key={item.id} {...item} /&gt;
          ))}
        &lt;/Carousel&gt;
      &lt;/Categories&gt;
    &lt;/&gt;
  );
};
const mapStateToProps = state =&gt; {
  return {
    isSearching: state.isSearching,
    searching: state.searching,
    myList: state.myList,
    trends: state.trends,
    originals: state.originals,
  };
};

export default connect(mapStateToProps, null)(Home);

Jesús Miguel Quinto Teran

student•

Reto: Use debounce para lanzar la búsqueda solo después que el usuario terminara de tipear

Seach.jsx:

...
import { debounce } from "debounce";
import { searchVideo } from '../actions';

const Search = (props) => {
  const { isHome } = props;
  const inputStyle = className('input', {
    isHome
  });

  const inputhandler = () => {
    const value = document.querySelector('#seach-input').value;
    props.searchVideo(value);
  }

  return (
    <section className="main">
      <h2 className="main__title">¿Qué quieres ver hoy?</h2>
      <input
        id="seach-input"
        type="text"
        className={inputStyle}
        placeholder="Buscar..."
        onChange={debounce(inputhandler, 500)}
      />
    </section>
  )
};

const mapDispatchToProps = {
  searchVideo,
};

export default connect(null, mapDispatchToProps)(Search);

actions:

export const searchVideo = payload => ({
  type: 'SEARCH_VIDEO',
  payload
});

reducer: ...

    case 'SEARCH_VIDEO':
      if (action.payload === '') return {...state, results: []}

      let results = []
      const textSeach = action.payload.toLocaleLowerCase();
      const resultsTrends = state.trends.filter(item => item.title.toLowerCase().includes(textSeach))
      const resultsOriginals = state.originals.filter(item => item.title.toLowerCase().includes(textSeach))
      results = results.concat(resultsTrends);
      results = results.concat(resultsOriginals);

      return {
        ...state,
        results
      }
...

Sofia Nupieri

student•

tuviste que instalar el debounce en tu proyecto?

Jose Anibal Garcia Giraldo

student•

Reto terminado!

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

Byron Bustamante López

student•

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.

import React from 'react';
import { connect } from 'react-redux';
import classNames from 'classnames';
import { searchRequest } from '../actions';
import Categories from './Categories';
import Carrousel from './Carrousel';
import CarrouselItem from './CarrouselItem';
import '../assets/styles/components/Search.scss';

const Search = (props) => {
  const { searchResult, isHome } = props;
  const inputStyle = classNames('input', { isHome });

  const handleEnter = (event) => {
    if (event.key === 'Enter') {
      props.searchRequest(event.target.value);
    }
  };

  return (
    <section className='main'>
      <h2 className='main__title'>¿Qué quieres ver hoy?</h2>
      <input
        name='search'
        className={inputStyle}
        type='text'
        placeholder='Buscar...'
        onKeyUp={handleEnter}
      />

      {searchResult.length > 0 && (
        <Categories title='Resultados'>
          <Carrousel>
            {searchResult.map((item) => (
              <CarrouselItem
                key={item.id}
                {...item}
              />
            ))}
          </Carrousel>
        </Categories>
      )}
    </section>
  );
};

const mapStateToProps = (state) => {
  return {
    searchResult: state.searchResult,
  };
};

const mapDispatchToProps = {
  searchRequest,
};

export default connect(mapStateToProps, mapDispatchToProps)(Search);

3 - En reducers/index.js agrego un case para hacer la búsqueda y guardarlo en 'searchResult'

case 'SEARCH_REQUEST':
      return {
        ...state,
        searchResult: state.trends.filter((item) => item.title.toLowerCase().search(action.payload.toLowerCase()) !== -1) ||
        state.originals.filter((item) => item.title.toLowerCase().search(action.payload.toLowerCase()) !== -1) ||
        [],
      };

4 - En actions/index.js creamos el método 'searchRequest'

export const searchRequest = (payload) => ({
  type: 'SEARCH_REQUEST',
  payload,
});

Carlos David Ramírez Gómez

student•

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))
);

Alessandri Fonseca

student•

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

Miguel Angel Reyes Moreno

student•

¿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.

Patricio Manuel Ugarte

student•

¡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

Jorge Amaolo

student•

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)

Reducer:

case "SEARCH_VIDEO":
      if (!action.payload == "") {
        return {
          ...state,
          search: {
            exist: true,
            searchContent: state.trends
              .concat(state.originals)
              .filter((elemento) => {
                return elemento.title
                  .toLowerCase()
                  .includes(action.payload.toLowerCase());
              }),
          },
        };
      } else {
        return {
          ...state,
          search: {
            exist: false,
          },
        };
      }

Home.jsx:

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>
        </>
      )}

Pedro Alejandro Silva Perez

student•

Buenísima tu solución bro, tenía el mismo problema al borrar el input!

Cristian Iñiguez

student•

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:

// Search.jsx
const Search = ({ isHome, setFilter }) => {
  const inputStyle = classNames('input', {
    isHome,
  });
  const handleSearch = (event) => {
    setFilter(event.target.value);
  };
  return (
    <section className='main'>
      <h2 className='main__title'>¿Qué quieres ver hoy?</h2>
      <input type='text' className={inputStyle} placeholder='Buscar...' onChange={handleSearch} />
    </section>
  );
};

const mapDispatchToProps = {
  setFilter,
};

export default connect(null, mapDispatchToProps)(Search);

// actions/index.js
export const setFilter = (payload) => ({
  type: 'SET_FILTER',
  payload,
});

// reducers/index.js
case 'SET_FILTER':
  return {
    ...state,
    filter: action.payload,
  };

// Home.jsx
const Home = ({ myList, trends, originals, filter }) => {
  const myListFiltered = myList.filter((item) =>
    item.title.toLowerCase().includes(filter.toLowerCase()),
  );
  const trendsFiltered = trends.filter((item) =>
    item.title.toLowerCase().includes(filter.toLowerCase()),
  );
  const originalsFiltered = originals.filter((item) =>
    item.title.toLowerCase().includes(filter.toLowerCase()),
  );
  return (
    <>
      <Header />
      <Search isHome />
      {myListFiltered.length > 0 && (
        <Categories title='Mi Lista'>
          <Carousel>
            {myListFiltered.map((item) => (
              <CarouselItem key={item.id} {...item} isList />
            ))}
          </Carousel>
        </Categories>
      )}
      {trendsFiltered.length > 0 && (
        <Categories title='Tendencias'>
          <Carousel>
            {trendsFiltered.map((item) => (
              <CarouselItem key={item.id} {...item} />
            ))}
          </Carousel>
        </Categories>
      )}
      {originalsFiltered.length > 0 && (
        <Categories title='Originales de Platzi Videos'>
          <Carousel>
            {originalsFiltered.map((item) => (
              <CarouselItem key={item.id} {...item} />
            ))}
          </Carousel>
        </Categories>
      )}
    </>
  );
};

const mapStateToProps = (state) => {
  return {
    myList: state.myList,
    trends: state.trends,
    originals: state.originals,
    filter: state.filter,
  };
};

export default connect(mapStateToProps, null)(Home);

carlos Francisco Pinto Guerrero

student•

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.

case ACTIONS.searchRequest:
            const listItems = state.trends.concat(state.originals);
            return{
                ...state,
                search: listItems.filter(item => {
                                            const l = new Levenshtein(item.title,action.payload)
                                            return l.distance < 4;
                                        })

            }```

Daniel Mendoza

student•

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:

Search.jsx:

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import classNames from "classnames";
import "../assets/styles/components/Search.scss";

const Search = ({ isHome, available_videos }) => {
    const inputStyle = classNames("input", {
        isHome,
    });

    const [showResults, setShowResults] = useState(false);
    const [searchResults, setSearchResults] = useState([]);

    const searchVideos = (event) => {
        setSearchResults(
            available_videos.filter((video) =>
                video.title.toLowerCase().includes(event.target.value)
            )
        );
        setShowResults(event.target.value.length > 3);
    };

    return (
        <section className="main">
            <h2 className="main__title">¿Qué quieres ver hoy?</h3>
            <input
                type="text"
                className={inputStyle}
                placeholder="Buscar..."
                onChange={searchVideos}
            />
            {showResults && (
                <div className="search-results">
                    <ul>
                        {searchResults.length === 0 ? (
                            <li>Sin resultados</li>
                        ) : (
                            searchResults.map((item) => (
                                <li className="result">
                                    <Link to={`/player/${item.id}`}>
                                        {item.title}
                                    </Link>
                                </li>
                            ))
                        )}
                    </ul>
                </div>
            )}
        </section>
    );
};

const mapStateToProps = (state) => {
    return {
        available_videos: [...state.trends, ...state.originals],
    };
};

export default connect(mapStateToProps, null)(Search);

Código agregado a Search.scss:

.search-results {
    background-color: #fff;
    min-height: 2em;
    width: 67%;
    top: -20px;
    position: relative;
    ul {
        display: block;
        width: 100%;
        list-style: none;
        padding: 0;
        list-style-type: none;
        li {
            padding: 10px 20px;
            &.result {
                display: block;
                a {
                    display: block;
                    height: 100%;
                    width: 100%;
                    color: #000;
                    text-decoration: none;
                }
                &:hover {
                    cursor: pointer;
                    background-color: #8f57fd;
                    a {
                        color: #fff;
                    }
                }
            }
        }
    }
}

Debug con Redux Devtools

Bienvenida al curso

Todo lo que aprenderás sobre React Router y Redux

¿Qué es React Router? y Aplicarlo en tus proyectos

¿Qué es React Router y cómo instalarlo?

Crear nuestro archivo de Rutas

Container: Login

Container: Register

Container: 404 Not Found

Componente: Layout

Manejando enlaces y configuraciones

¿Qué es Redux?

Qué es Redux

¿Qué es Redux? Profundizando en la herramienta

Instalación de Redux

Creando el Store de Redux

Aplicando Redux a nuestra aplicación

Creando los reducers

Finalizando reducers y eliminar favoritos

Debuggeando nuestro proyecto (agregando validaciones a nuestro componente card)

Crear Formulario de Login

Formulario de Login con Redux

Creando un Servicio para Gravatar

Uso de gravatar en nuestro proyecto

Validación para LogIn LogOut

Register

Register con Redux

Vista general del player

Arreglando la funcionalidad del player

Terminando de detallar nuestro player

Validaciones

Validaciones de UI

Debug con Redux Devtools

Cierre del curso

Cierre del Proyecto