React How to render a component twice with one api request - reactjs

Question

There is a component:
const Navbar = ({...props}) => {
const dispatch = useDispatch()
const navigation = useSelector(state => state.navigation)
const [nav] = navigation.navs.filter(nav => nav.slug === props.navGroup)
useEffect(() => {
dispatch(fetchNavigation());
}, [dispatch])
return (
<nav className={styles.nav}>
{nav
? nav.all_elements.map(link =>
<Link
className={styles.navLink}
to={link.url}
key={link.id}
>
{link.name}
</Link>
)
: <div>Something else</div>
}
</nav>
)
}
Reducer:
import { createSlice } from "#reduxjs/toolkit";
import { fetchNavigation } from "../services/fetchNavigation"
const initialState = {
"count": 0,
"next": null,
"previous": null,
"navs": [],
"loaded": false
}
const navSlice = createSlice({
name: 'navigation',
initialState: initialState,
extraReducers: {
[fetchNavigation.fulfilled]: (state = initialState, action) => {
state.count = action.payload.count;
state.next = action.payload.next;
state.previous = action.payload.previous;
state.loaded = true
state.navs = action.payload.results;
}
},
})
Async action:
import { createAsyncThunk } from "#reduxjs/toolkit";
import { instance } from "../../API/config"
export const fetchNavigation = createAsyncThunk(
"navigation/fetchNavigation", async () => {
const response = await instance.get(`nav/`)
return response.data
}
);
Problem:
I show the component in the header and footer
therefore, it makes two requests to API, how can i check that the data is already in the store before calling createAsyncThunk?
I tried to get the current state of the 'loaded' key through getState() but it does not change InitialState before the request, so nothing came out