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

Question

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:

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?

Maybe your error is for another line of the code. did you try to comment the code to see what would happen? — Ali Torki
– Ali Torki, Commented Mar 30, 2020 at 18:42
@AliTorki, if I comment that line the code works like a charm... — assembler
– assembler, Commented Mar 30, 2020 at 19:38
check exporting functions or ... and also update react lib with npm update — Mohammad Oftadeh
– Mohammad Oftadeh, Commented Mar 30, 2020 at 21:03

Lacouleur · Accepted Answer · 2021-02-22 09:06:29Z

40

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";

answered Feb 22, 2021 at 9:06

Lacouleur

4014 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dawood Valeed Over a year ago

I was making this mistake which resulted in the above error, Thank you so much

Adrian Over a year ago

Wow very hard to figure out, very stupid mistake, I guess I was just running in autopilot. Thanks !

Daniel Lessa · Accepted Answer · 2020-06-08 18:49:36Z

11

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

answered Jun 8, 2020 at 18:49

Daniel Lessa

3773 silver badges6 bronze badges

Comments

assembler · Accepted Answer · 2020-05-14 16:28:38Z

1

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.

answered May 14, 2020 at 16:28

assembler

3,31813 gold badges51 silver badges102 bronze badges

Comments

kwang · Accepted Answer · 2020-09-14 07:19:18Z

0

Perhaps.. no initialState of Reducer state?

initialState match the data depth

I got the same error and solved it like this

const initialState = { loadingData: null };
    
export default function (state = initialState, action) {
  switch (action.type) {
    ...
  }   
}

https://redux.js.org/recipes/structuring-reducers/basic-reducer-structure

edited Sep 14, 2020 at 7:19

answered Sep 14, 2020 at 7:08

kwang

11 bronze badge

Comments

Ahmedakhtar11 · Accepted Answer · 2024-02-19 01:17:23Z

0

You're importing useSelector from react instead of react-redux.

Do:

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

answered Feb 19, 2024 at 1:17

Ahmedakhtar11

1,58819 silver badges9 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related