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