I am using the useSelector() hook to pass state as a prop but I am getting an error saying:
TypeError: undefined is not an object (evaluating 'availableMeals.filter')
/store/reducers/meals.js:
import { MEALS } from "../../Data/Dummy-Data"; const intialState = { meals: MEALS, filteredMeals: MEALS, FavouriteMeals: [], }; const mealsReducer = (state = intialState, action) => { return action; }; export default mealsReducer;
CategoryMealScreen.js:
import React from "react"; import { useSelector } from "react-redux"; import { CATEGORIES } from "../Data/Dummy-Data"; import MealListData from "../component/mealListData"; const CategoryMealScreen = (props) => { const catId = props.navigation.getParam("categoryId"); const availableMeals = useSelector((state) => state.meals.filteredMeals); const DisplayedMeal = availableMeals.filter( (meal) => meal.categoryIds.indexOf(catId) >= 0 ); return ( <MealListData listData={DisplayedMeal} navigation={props.navigation} /> ); }; CategoryMealScreen.navigationOptions = (navigationData) => { const catId = navigationData.navigation.getParam("categoryId"); const selectedCategory = CATEGORIES.find((cat) => cat.id === catId); return { headerTitle: selectedCategory.title, }; }; export default CategoryMealScreen;
I don’t know why I am getting this error.
Advertisement
Answer
The issue is with your reducer ,
const mealsReducer = (state = intialState, action) => { return action; };
You are returning an action instead of state . Please change this to
const mealsReducer = (state = intialState, action) => { return state; };