React Reduxjs工具包没有使用Typescript读取useSelector中的状态.Is显示一个错误，log

Question

我正在从store.tsx文件向组件传递一个状态，它显示了一个错误。该状态的const loggedIn中存在错误。loggedIn.log不是布尔值。以下是组件的代码

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