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?

Sibie

const data = useSelector(state => state.app.loadingData); – Amygdala

It was a misstyping... Fixed now. Error persists. – Sibie

Maybe your error is for another line of the code. did you try to comment the code to see what would happen? – Amygdala

@AliTorki, if I comment that line the code works like a charm... – Sibie

I'm wondered, I think your code is okay but the problem is a side effect of something like babel for transforming. Can you provide your babelrc file content? – Amygdala

check exporting functions or ... and also update react lib with npm update – Augustaugusta

Same problem. Tough thing is that this error comes up when people have pre-16.8 versions of React and those posts overwhelm search results. – Tilley

Answer 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.

Sibie

Answer 2

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

Windward

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

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

Answer 3

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

Swarm

Answer 4

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

Psalmody

Answer 5

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

Do:

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

Sulfamerazine