React Reduxjs 工具包未使用 Typescript 读取 useSelector 中的状态。是向我显示 loggedIn 不是布尔值的错误

Question

我正在将 store.tsx 文件中的状态传递给组件，它向我显示错误。 const loggedIn 中的错误是 state.loggedIn.loggedIn 不是布尔值。下面是组件

的代码

  import React from "react";
import { StyledNavBar, StyledNavButton } from "./styles";
import { useSelector } from "react-redux";

export const NavBar = () => {
  interface IisLoggedInProp {
    loggedIn: boolean;
  }

  **const loggedIn = useSelector(
    (state: IisLoggedInProp) => state.loggedIn.loggedIn
  );**

  return (
    <StyledNavBar>
      <StyledNavButton>Dodaj Post</StyledNavButton>
      {loggedIn && <StyledNavButton>Dodaj Komentarz</StyledNavButton>}
      <StyledNavButton>Toggluj kolory</StyledNavButton>
      <StyledNavButton>Wyślij wiadomość</StyledNavButton>
    </StyledNavBar>
  );
};

这就是 store.js 的样子我已经从提供的代码中取消了 logOutSlice，以免造成混淆。

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

const initialLoggedInState = {
  loggedIn: false,
};

const loggedInSlice = createSlice({
  name: "loggedIn",
  initialState: initialLoggedInState,
  reducers: {
    withLogIn(state) {
      state.loggedIn = true;
    },
    withoutLogIn(state) {
      state.loggedIn = false;
    },
  },
});

export const loggedInActions = loggedInSlice.actions;   

export const store = configureStore({
  reducer: { loggedIn: loggedInSlice.reducer, logOut: logOutSlice.reducer },
});

Answer 1

useSelector 始终从您的根状态读取，因此您必须在此处使用 RootState 类型而不是 IisLoggedInProp。

Answer 2

状态类型是RootState

这样做

const loggedIn = useSelector(
    (state: RootState) => state.loggedIn.loggedIn
  );

React Reduxjs 工具包未使用 Typescript 读取 useSelector 中的状态。是向我显示 loggedIn 不是布尔值的错误

React Reduxjs toolkit is not reading state in useSelector, using Typescript. Is shows me an error that loggedIn is not a boolean

typescript

react-redux

redux-toolkit