I have encountered an error while passing a state from the store.tsx file to the component. The issue lies in the const loggedIn where state.loggedIn.loggedIn is not recognized as a boolean value. Below is the code snippet for the component:
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>
);
};
Here is how the store.js file is structured. I have omitted the logOutSlice portion of the provided code to avoid confusion.
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 },
});