useSelector is not able to export from 'react-redux'

Viewed 5882

I have an error that says Can't import 'UseSelector' from react-redux. What I'm making is a small project called Getting started I'm using firebase and react to do this, here is the code file where the error came

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from './store/reducers/rootReducer'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import {createFirestoreInstance, reduxFirestore, getFirestore } from 'redux-firestore'
import { ReactReduxFirebaseProvider, getFirebase, reactReduxFirebase } from 'react-redux-firebase';
import firebase from 'firebase/app'
import fbConfig from './config/fbConfig'
import { useSelector } from 'react-redux'
import { isLoaded } from 'react-redux-firebase';



`
const store = createStore(rootReducer,
    compose(
        applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
        reduxFirestore(fbConfig),
        reactReduxFirebase(fbConfig, {attachAuthIsReady:true, firebase:'firebaseReducer'})    )
);


const rrfProps = {
    firebase,
    config: fbConfig,
    dispatch: store.dispatch,
    createFirestoreInstance,
    userProfile: 'users', // where profiles are stored in database
    presence: 'presence', // where list of online users is stored in database
    sessions: 'sessions'
}




function AuthIsLoaded({ children }) {
    const auth = useSelector(state => state.firebase.auth)
    if (!isLoaded(auth)) return <div>Loading Screen...</div>;
        return children
}

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

I have tried restarting npm start, installing react-redux again then restarting npm start, running npm install and closing Vscode then reopening it. That what I tried I'm very confused about why it didn't work but please help me fix this, thank you :D.

2 Answers

React Redux hooks were first added in v7.1.0 so you can't import useSelector hook if you are using React Redux v6.14.6 as you said.

It seems like you are working on a tutorial-like project, so I suppose you don't have any constraint about package versions and you can update it without significant problems. Be aware that React Redux 7.1 requires React 16.8.3 or later, so check also React version in your package.json file.

Run:

npm uninstall react react-redux
npm i react react-redux

Then check in your package.json if dependencies entry contains "react-redux": "^7.2.1" and "react": "^16.13.1".

you have to update your redux and react-redux version. also, keep in mind you can not use "useSelector" hook out of the functional or arrow component and it must be a child of from redux.

Related