CODEWITHSUNDEEP
react-reduxreact-hooks
assembler
assembler

Reputation: 3300

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

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?

Upvotes: 6

Views: 12404

Answers (5)

Ahmedakhtar11
Ahmedakhtar11

Reputation: 1480

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

Do:

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

Upvotes: 0

Lacouleur
Lacouleur

Reputation: 401

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

Upvotes: 40

kwang
kwang

Reputation: 1

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

Upvotes: 0

Daniel Lessa
Daniel Lessa

Reputation: 377

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

Upvotes: 11

assembler
assembler

Reputation: 3300

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.

Upvotes: 1

Related Questions