useSelector 无法从“react-redux”导出

Posted 2023-02-22

【中文标题】useSelector 无法从“react-redux”导出

【英文标题】：useSelector is not able to export from 'react-redux'

【发布时间】：2020-12-06 07:48:30

【问题描述】：

我有一个错误提示 Can't import 'UseSelector' from react-redux。我正在做的是一个名为Getting started的小项目我正在使用firebase并对此做出反应，这是错误出现的代码文件

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();
    
    
)

我试过重启 npm start，再次安装 react-redux 然后重启 npm start，运行 npm install 并关闭 Vscode 然后重新打开它。我尝试过的方法让我很困惑为什么它不起作用，但请帮我解决这个问题，谢谢：D。

【问题讨论】：

你安装的是什么版本的 react-redux？你是如何更新 react-redux 的？你是真的安装了新版本还是只是在 package.json 中指定了它？

你也应该安装包npm install

@DrewReese 我正在使用 react-redux 6.14.6 版，我的安装方式是在终端运行命令 npm install react-redux

@DennisVash 我现在试过了，但没用 :(

简单的是将package.json中的指定版本更新为你想要的版本并重新运行npm i，或者先卸载react-redux（从package.json中删除），然后安装最新的。

【参考方案1】：

React Redux hooks were first added in v7.1.0 所以你不能导入 useSelector 钩子，如果你使用 React Redux v6.14.6，就像你说的那样。

看起来你正在做一个类似教程的项目，所以我想你对包版本没有任何限制，你可以在没有重大问题的情况下更新它。 请注意 React Redux 7.1 requires React 16.8.3 or later，因此还要检查 package.json 文件中的 React 版本。

运行：

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

如果dependencies 条目包含"react-redux": "^7.2.1" 和"react": "^16.13.1"，则检查您的package.json。

【参考方案2】：

你必须更新你的 redux 和 react-redux 版本。 另外，请记住，您不能在功能或箭头组件之外使用“useSelector”挂钩，它必须是来自 redux 的子组件。