CODEWITHSUNDEEP
reactjsreact-nativereact-redux
Chetan S.
Chetan S.

Reputation: 59

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

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;

Upvotes: 5

Views: 17261

Answers (5)

Hitesh Prajapati
Hitesh Prajapati

Reputation: 1411

As per my issue, It is resolved by clearing the cache of jest with the following command.

npm run jest --clearCache

Upvotes: 0

Gustavo Hern&#225;n Crucianelli
Gustavo Hern&#225;n Crucianelli

Reputation: 184

My problem was importing useSelector from react...

import React, { useSelector } from 'react';

, but it actually is:

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

Upvotes: 1

aminous
aminous

Reputation: 218

If you verified that react >= 16.8.3 and react-redux >= 7.1.1 try the solution below. The workaround for me was to install metro package version 0.56.0 .

Via npm: npm install [email protected]

Via yarn yarn add [email protected]

Upvotes: 0

Berk
Berk

Reputation: 1329

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

Upvotes: 4

Blessing
Blessing

Reputation: 2720

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.

Upvotes: 1

Related Questions