Aprovecha el precio especial

Antes:$249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comienza ahora

Termina en:

03d

20h

01m

35s

1

Ultimo Reto, Input Filter con Redux

En index.js agreguen:

const initialState = {
    "user": {}, 
    "searchedList" : [], // este"search": '', // y este"loadingPlaying": true,
    "playing": {},
	.............

En Home, uso de searchedList y search

const Home = ({ myList, trends, originals, searchedList, search }) => {
  return (
    <><Header /><Search />
      {searchedList.length > 0 && (
        <Categories title={`Buscando por ${search}`}><Carousel>
            {searchedList.map((item) => (
              <CarouselItem key={item.id} {...item} isMyList={true} />
            ))}
          </Carousel></Categories>
      )}
....
const mapStateToProps = (state) => {
  return {
    myList: state.myList,
    trends: state.trends,
    originals: state.originals,
    searchedList: state.searchedList,
    search: state.search,
  };
};

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

Luego, en Search. Por medio del event onChange setear el search del estado

constSearch = (props) => {
  const { setSearch } = props;
  const location = useLocation();
  const inputStyle = location.pathname === "/" ? "input-home" : "";
  const handleOnChange = (e) => {
    setSearch(e);
  }
  return (
    <section className="main">
      <h2 className="main__title">¿Qué quieres ver hoy?</h2>
      <inputtype="text"
        className={`input${inputStyle}`}
        placeholder="Buscar..."
        onChange={(e) => handleOnChange(e.target.value)}
      />
    </section>
  );
};

const mapDispatchToProps = {
  setSearch,
};

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

Siguiente, el action: Mi action es diferente respecto al del curso, pero se entiende

exportconst setSearch = (inputValue) => async (dispatch, getState) => {
    if (!inputValue) {
        dispatch({
            type: types.search,
            payload: ''
        });
        dispatch({
            type: types.searchedList,
            payload: []
        });
        return;
    } else {
        dispatch({
            type: types.search,
            payload: inputValue
        });
        const { trends, originals } = getState();
        const selected = await trends.filter(item => item.title.toLowerCase().includes(inputValue.toLowerCase())) || originals.trends.filter(item => item.title.toLowerCase().includes(inputValue.toLowerCase())) || [];
        dispatch({
            type: types.searchedList,
            payload: selected
        });
    }
}

Finalmente, mi reducer

case types.search:
            return {
                ...state,
                search: action.payload
            }
        case types.searchedList:
            return {
                ...state,
                searchedList: action.payload
            }
....
Escribe tu comentario
+ 2