TypeError: TypeError: (0, _reactRedux.useSelector) is not a function

Question

I am working on useSelector of react-redux inside my React Native application, I am getting the following error:

TypeError: TypeError: (0, _reactRedux.useSelector) is not a function.

My Code is :

import { useSelector } from 'react-redux';

const availableMeals = useSelector(state => state.meals.filteredMeals);

as per the official documentation, this is the simplest use of useSelector but I am getting this error.

Previously, I was getting another error related to Redux in my project but it got resolved automatically over a night, so is this issue related to some cache ?

How can I resolve this?

Here is my code:

import React from 'react';
import { useSelector } from 'react-redux';

import { CATEGORIES } from '../data/dummy-data';
import MealList from '../components/MealList';

function CategoryMealScreen(props) {
    const catId = props.navigation.getParam('categoryId');

    const availableMeals = useSelector(state => state.meals.filteredMeals);

    const displayedMeals = availableMeals.filter(meal => meal.categoryIds.indexOf(catId) >= 0);

    return <MealList listData={displayedMeals} navigation={props.navigation} />;
};

CategoryMealScreen.navigationOptions = navigationData => {
    //console.log(navigationData);
    const catId = navigationData.navigation.getParam('categoryId');
    const selectedCategory = CATEGORIES.find(cat => cat.id === catId);

    return {
        headerTitle: selectedCategory.name,
    };
};

export default CategoryMealScreen;

Answer 1

I upgraded react-redux version from ^5.1.1 to ^7.1.1 in package.json file.

This caused an upstream dependency error when I run;

npm install

I fixed that by upgrading react version from 16.8.0 to 16.8.3 in package.json file.

After that, I was able to install both dependencies and stopped receiving error below;

TypeError: TypeError: (0, _reactRedux.useSelector) is not a function

Answer 2

useSelector() hook only takes functions as input, so to resolve your issue you have to make a function that will handle your logic and then call it in useSelector. Here is an example:

This is an es6 function

    const getMeals(state) => {
return state.meals.filteredMeals;
}

And then pass your function into useSelector like this:

const availableMeals = useSelector(getMeals(myState));

You can put this function(getMeals) in your current component or even put it in your reducer.