react-redux useSelector is telling "Uncaught TypeError: Object(...) is not a function"

user_8036670 0
Viewed 9598

I am quite new in React hooks, I am trying to replace the connect, mapStateToProps and so forth with useSelector, useDispatch. This is what I have:

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

function MyComponent(props) {
   const data = useSelector(state => state.app.loadingData);

   return (
      <div>
        {data}
      </div>
   );
}

Which, according to https://react-redux.js.org/api/hooks is well written. This is my Redux DevTools console:

enter image description here

So, app exists in the redux state tree and loadingData exists as well. Regardless of that, my browsers console points to const data = useSelector(state => state.app.loadingData); yelling me that there is this error:

Uncaught TypeError: Object(...) is not a function

So, what am I doing wrong or what am I missing here?

react-redux react-hooks
4 Answers

i had the same error and i figured out that i had miss-imported "useSelector". I was imported it from react instead of redux. :)

The mistake :

import React, { useState, useEffect, useSelector } from "react";

The good way :

import { useDispatch, useSelector } from "react-redux";
user_124862430

Check your react-redux version, the userSelector function its available from versions great then 7.1.0, for to update to the last version run:

yarn add react-redux
user_62739090

Solution:

Maybe not the best way, or the prettiest way, but working solution for me:

const data = useSelector(state => state.getIn(['app', 'loadingData']);

Hope this could be helpful. Please, the redux team might be providing light here if this solution could be improved.

user_80366700
user_142731820
Related