TypeError: Object(...) is not a function React.js

Question

[![enter image description here][1]][1]Filename : productScreen.js

Error : line 6 - TypeError: Object(...) is not a function

Path :src/Screens/ProductScreen.js

Code as follows:

  3 | import { Link } from "react-router-dom";
  4 | import { detailsProduct } from "../actions/productActions";
  5 | function ProductScreen(props){
  >6|     const productDetails= useSelector(state => state.productDetails);
  7 |     const {product , loading , error} = productDetails;
  8 |     const dispatch = useDispatch();
  9 |     useEffect(()=>{
  10|          dispatch(detailsProduct(props.match.params.id));
  11|         return () => {
  12|        };
  13|    } , [])

Filename : store.js

Path : src/store.js

Code as follows:

    1|const initialState = {}
    2|const reducer = combineReducers({
    3|productList: productListReducer,
    4|productDetails: productDetailsReducer
    5| })
    6|const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
    7|const store = createStore(reducer , initialState , composeEnhancer(applyMiddleware(thunk)));
    8|export default store;

Filename : index.js

Path :src/index.js

Code as follows:

    ReactDOM.render(
    <Provider store = {store}>
    <App />
    </Provider>,
    document.getElementById('root')
    );
    serviceWorker.unregister();

All imports are made correctly

Answer 1

It seems that you're missing useSelector import statement.

Add import { useSelector } from "react-redux"; in your ProductScreen.js file.