Redux subscribed async State empty - reactjs

Question

I have a Login Handler which takes the response and dispatches data to redux (userdata and json web tokens). I also do have an interval to renew JWTs every X minutes.
However the subscribed state returns undefined and I´m quite unsure why. If I track the redux store there is data written successfully to it. What do I miss here?
const App = () => {
const dispatch = useDispatch()
const logedInUser = useSelector(state => state.logedInUser.logedInUser)
const tokens = useSelector(state => state.token.tokens)
const intervalRef = useRef();
const refreshToken = useCallback(async () => {
console.log(tokens.refreshToken) //prints undefined
console.log(logedInUser.id) //prints undefined
let response = await restAPI("post", hostAPI + "/refreshToken", {token: tokens.refreshToken})
dispatch(setTokens({
accessToken: response.accessToken,
refreshToken: response.refreshToken
}))
}, [])
useEffect(() => {
const interval = setInterval(() => refreshToken(), 30000)
intervalRef.current = interval;
return () => clearInterval(interval)
}, [refreshToken])
const loginHandler = async (data) => {
let response = await restAPI("post", hostAPI + "/login", {email: data.email, password: data.password}) //Simple Fetch with Post method returns response as JSON
if(response.user.id) {
console.log("RESPONSE",response) //Prints correct Response
dispatch(setLogedInUser(response.user)) //Dispatch returned Data to redux
dispatch(setTokens({
accessToken: response.accessToken,
refreshToken: response.refreshToken
}))
}
}
TokenSlice as example (redux toolkit used):
const initialState = {
tokens: []
}
export const tokenSlice = createSlice({
name: "token",
initialState,
reducers: {
setTokens: (state, action) => {
state.tokens = action.payload
console.log("Token:", state.tokens) //Prints out correct Tokens afterDispatch
},
}
})
If I build up a Component with a button in which I Refresh the Token on click everything works as expected. I´m sure that it is just a silly little thing what I´m missing here but since I´m pretty new to Redux I can´t point out what is the issue here is.
Thanks in advance!
Edit:
I´ve noticed something else. If I change some code and Save it the next "Refresh Token Interval" does print out the correct values. Means somehow "tokens" never updates from the Initial empty state - at least in app component. Like mentoined the redux state itself holds the right values.

Answer 1

I think your method of fetching data from API is wrong. I'm seeing that in your code snippets. You are not using any package like Axios or API request mode. Please see any tutorial on how to fetch data from API?
Try to do this work by using :
const Axios = require("axios");
Axios.defaults.withCredentials = true;