React: useContext is not updating current state - reactjs

Question

i'm actually stuck, i'm trying to find a way to centralize data into my app.
When i'm clicking on the button, isDisplay is supposed to be true ; the state is changing in my context file but not into the app.
thx !
Button.tsx
const Button = () => {
const { state, dispatch } = useContext(AppContext);
const { isDisplay } = state;
return (
<Fragment>
<BootstrapButton
onClick={() => {
dispatch({
type: "DISPLAY_USERS",
payload: state.users,
});
}}
variant={isDisplay ? "success" : "primary"}
>
{isDisplay ? "Albums chargés!" : "Charger les albums"}
</BootstrapButton>
</Fragment>
);
};
export default Button;
reducer.ts
import { RawUser } from "../interfaces";
import { InitialStateType } from "./context";
type ActionMap<M extends { [index: string]: any }> = {
[Key in keyof M]: M[Key] extends undefined
? {
type: Key;
}
: {
type: Key;
payload: M[Key];
};
};
type UsersPayload = {
["LOAD_USERS"]: RawUser[];
["DISPLAY_USERS"]: RawUser[];
};
export type LoadUsersActions =
ActionMap<UsersPayload>[keyof ActionMap<UsersPayload>];
export const loadUsersReducer = (
state: InitialStateType,
action: LoadUsersActions
) => {
switch (action.type) {
case "LOAD_USERS":
return {
...state,
users: action.payload,
isLoading: true,
};
case "DISPLAY_USERS":
return {
...state,
isDisplay: true,
};
default:
return state;
}
};
context.tsx
export type InitialStateType = {
users: RawUser[];
isLoading: boolean;
isDisplay: boolean;
};
export const initialState = {
users: [],
isLoading: true,
isDisplay: false,
};
const AppContext = createContext<{
state: InitialStateType;
dispatch: Dispatch<LoadUsersActions>;
}>({
state: initialState,
dispatch: () => null,
});
const mainReducer = (data: InitialStateType, action: LoadUsersActions) => ({
data: loadUsersReducer(data, action),
});
const AppProvider: FC = ({ children }) => {
const [state, dispatch] = useReducer(mainReducer, initialState as never);
useEffect(() => {
axios.get("https://jsonplaceholder.typicode.com/users").then((result) => {
dispatch({ type: "LOAD_USERS", payload: result.data });
});
}, []);
return (
<AppContext.Provider value={{ state, dispatch }}>
{children}
</AppContext.Provider>
);
};
export { AppProvider, AppContext };
App.tsx
import React, { useContext, useEffect, useState } from "react";
import Jumbotron from "react-bootstrap/Jumbotron";
import Container from "react-bootstrap/Container";
import DefaultButton from "./components/button/Button";
import UserCards from "./components/cards/UserCardsPlaceHolder";
import { AppContext, AppProvider } from "./context/context";
import UsersLoaded from "./components/cards/UsersLoaded";
import { UseGetUsers } from "./api/usersList";
function App() {
const { state } = useContext(AppContext);
const { isDisplay } = state;
console.log(state);
return (
<AppProvider>
<main className="main">
<Jumbotron fluid>
<Container fluid="md">
<h1 className="mb-5">Keep calm, take a deep breath...</h1>
<DefaultButton />
</Container>
</Jumbotron>
<Container fluid="md">
{isDisplay ? <UsersLoaded /> : <UserCards />}
</Container>
</main>
</AppProvider>
);
}
export default App;

Answer 1

It looks like in App.tsx you are accessing an undefined value isDisplay - does it compile?
it should be
const { state: { isDisplay } } = useContext(AppContext);
instead of
const { state } = useContext(AppContext);