Javascript 使用React-redux工具包在React中将useSelector设置为未定义

我有一个简单的应用程序，我试图使用React Redux Toolkit创建一个身份验证系统，但我得到了

类型错误：\u useSelector未定义

，但这对我来说没有意义，如果有人能看到我做错了什么，请告诉我

我有一片：

import { createSlice } from "@reduxjs/toolkit";

export const initialState = {
  loading: false,
  hasErrors: false,
  userData: {},
};

const loginSlice = createSlice({
  name: "login",
  initialState,
  reducers: {
    login: (state) => {
      state.loading = true;
    },
    loginSuccess: (state, { payload }) => {
      state.usuario = payload;
      state.loading = false;
      state.hasErrors = false;
    },
    loginFailure: (state) => {
      state.loading = false;
      state.hasErrors = true;
    },
  },
});

export const { login, loginSuccess, loginFailure } = loginSlice.actions;

export const loginSelector = (state) => state.userData;

export default loginSlice.reducer;

export const fetchLogin = (username, password) => {
  return async (dispatch) => {
    dispatch(login());

    try {
      const response = await fetch("http://10.2.54.8:8085/login-api/auth", {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
        credentials: "same-origin",
        body: JSON.stringify({
          username: username,
          password: password,
        }),
      });

      const data = await response.json();

      dispatch(loginSuccess(data));
    } catch (error) {
      console.log(error);
      dispatch(loginFailure());
    }
  };
};

我的切片索引：

import { combineReducers } from 'redux'

import postsReducer from './posts'
import postReducer from './post'
import commentsReducer from './comments'
import loginReducer from './login-slice'

const rootReducer = combineReducers({
  posts: postsReducer,
  comments: commentsReducer,
  post: postReducer,
  login: loginReducer
})

export default rootReducer

我有一个签名组件：

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchLogin, loginSelector } from "../slices/login-slice";
...
const SignInSideComponent = () => {
  const dispatch = useDispatch();
  const { userData, loading, hasErrors } = useSelector(loginSelector); // The error happens here, when I remove it the error vanishes, but I need this
...

我不明白为什么useSelector没有定义，这一点

My package.json：

{
  "name": "general-manager",
  "version": "1.0.0",
  "description": "A general manager react-redux-toolkit",
  "keywords": [],
  "main": "src/index.js",
  "dependencies": {
    "@material-ui/core": "^4.9.9",
    "@material-ui/icons": "^4.9.1",
    "@reduxjs/toolkit": "1.2.5",
    "react": "16.12.0",
    "react-dom": "16.12.0",
    "react-redux": "7.2.0",
    "react-router-dom": "5.1.2",
    "react-scripts": "3.0.1",
    "redux": "4.0.5"
  },
  "devDependencies": {
    "typescript": "3.3.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

{
“姓名”：“总经理”，
“版本”：“1.0.0”，
“描述”：“总经理react redux工具包”，
“关键词”：[]，
“main”：“src/index.js”，
“依赖项”：{
“@material ui/core”：“^4.9.9”，
“@material ui/图标”：“^4.9.1”，
“@reduxjs/toolkit”：“1.2.5”，
“反应”：“16.12.0”，
“react dom”：“16.12.0”，
“react redux”：“7.2.0”，
“反应路由器dom”：“5.1.2”，
“反应脚本”：“3.0.1”，
“redux”：“4.0.5”
},
“依赖性”：{
“类型脚本”：“3.3.3”
},
“脚本”：{
“开始”：“反应脚本开始”，
“构建”：“反应脚本构建”，
“测试”：“反应脚本测试--env=jsdom”，
“弹出”：“反应脚本弹出”
},
“浏览者”：[
">0.2%",
“没有死”，
“不是ie，你确定你已经完成了
npm安装
来安装所有依赖项吗？@AlexWayne是的，我确定，因为我还有其他“页面”在使用还原程序，所以我将把我的package.json放在这里。我想你没有注意到选择器中的“状态”是根状态，而不是片的状态。试试
console.log（useSelector（state=>state））；
你确定你已经安装了
npm install
来安装所有依赖项吗？@AlexWayne是的，我确定，因为我还有其他“页面”在使用简化程序，所以我将把我的package.json放在这里。我想你没有注意到选择器中的“状态”是根状态，而不是片的状态。试试
console.log（使用选择器（state=>state））；
import React from 'react'
import { render } from 'react-dom'
import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'

import App from './App'
import rootReducer from './slices'

import './index.css'

const store = configureStore({ reducer: rootReducer })

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