How do I pass a Redux param to a component? - reactjs

Question

I am doing a project with React y React-Redux
I am using an api, create a Search component to bring data from this api but I do not know how to pass the word (from what is searched) of redux to the component.
If I want to look for the word "pasta", I don't know how I should pass it on. I'm learning how to use Redux
----- REDUX ----
const INITIAL_STATE = {
search: '',
};
const reducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
case SEARCH: return {
...state,
recipes: action.payload,
};
default:
return {...state}
}
};
export function getByName(query) {
return function (dispatch) {
return axios.get("https://www.themealdb.com/api/json/v1/1/search.php?s="+query).then((response) => {
dispatch({
type: SEARCH,
payload: response.data.meals
})
}).catch((error) => console.log(error));
}
}
---- COMPONENTE SEARCH ---
const [search, setSearch ] = useState('')
const query = useSelector((state) => state.recipeReducer.search);
const dispatch = useDispatch();
useEffect(() => {
dispatch(getByName(query))
}, [dispatch])
const handleFilter = e => {
e.preventDefault();
setSearch(e.target.value)
dispatch(getByName(search))
}
return (
<div>
<form>
<label>
Search:
<input type="text" id="title" placeholder='Search recipe...' value={search} onChange={(e) => handleFilter(e)} />
</label>
</form>
</div>
)
}

Answer 1

One thing I noticed is that the "search" in your initial state is redundant. The results are the thing you care about for this toy problem. You should have:
const INITIAL_STATE = {
recipes: [],
}
Then the issue is the construction of your search component. This is the component which is defining your query, not reading it.. Something like this would be more like what you want:
const SearchComponent = ({}) => {
const [search, setSearch] = useState('')
const recipes = useSelector((state) => state.recipeReducer.recipes);
const dispatch = useDispatch();
const handleFilter = e => {
e.preventDefault();
setSearch(e.target.value)
getByName(search)(dispatch) // getByName returns a function.
// That function takes dispatch as an argument.
}
return (
<div>
<form>
<label>
Search:
<input type="text" id="title" placeholder='Search recipe...' value={search} onChange={(e) => handleFilter(e)} />
</label>
</form>
</div>
);
}