RN & Redux: Unable to put an object into state in the reducer - react-native

Question

I'm getting data from the backend and want to store it in the state.
The server sends some user data (id, mail, name,.. ) as an object. This object I want to store as an attribute of the state object.
Here is the code,
starting with auth.js (action-file):
//loadUser(), which gets called via useEffect in App.js:
export const loadUser = () => async dispatch => {
try {
const token = await AsyncStorage.getItem('token')
await setToken(token)
const res = await axios.get(`${SERVER_IP}/api/auth`)
console.log('res.data', res.data) // see result of clog below
dispatch({
type: USER_LOADED,
payload: res.data
})
} catch (err) {
dispatch({
type: AUTH_ERROR
})
}
}
this is the result of console.log('res.data', res.data), which gets passed on to the reducer. This is also what I want:
Object {
"__v": 0,
"_id": "5d2b422322cdf413d4246566",
"avatar": "//www.gravatar.com/avatar/e14a77efcd408a95332f403e0db40b95?s=200&r=pg&d=mm",
"date": "2019-07-14T14:54:27.265Z",
"email": "awnwen#asdw.de",
"name": "awena",
}
This is what the reducer looks like:
// reducer:
import {
USER_LOADED,
AUTH_ERROR,
} from '../actions/types'
import {getToken, setToken, removeToken} from '../actions/auth'
const initialState = {
token: getToken(),
isAuthenticated: null,
loading: true,
user: null
}
export default async function (state = initialState, action) {
const { type, payload } = action
switch (type) {
case USER_LOADED:
return {
...state,
user: payload,
isAuthenticated: true,
loading: false
}
case AUTH_ERROR:
await removeToken()
return {
...state,
isAuthenticated: false,
token: null,
user: null,
loading: false
}
default:
return state
}
}
In case they are needed: token functions from auth.js actions-file (first file posted)
export const getToken = async () => {
try {
return await AsyncStorage.getItem('token')
} catch (error) {
console.log("Tokenerror: getToken() -" + error);
return null
}
}
export const setToken = async (token) => {
try {
await AsyncStorage.setItem('token', token);
setAuthToken(token)
} catch (error) {
console.log("Tokenerror: setToken() - " + error);
return null
}
}
export const removeToken = async () => {
try {
return await AsyncStorage.removeItem('token')
} catch (error) {
console.log("Tokenerror: removeToken() - " + error);
return null
}
}
I expect the auth state to be like:
{
auth: {
token: 'randomstringofnumbersandletters',
isAuthenticated: true,
loading: false,
user: {
name: 'john',
email: 'jdoe#gmail.com',
.....
}
}
}
This is what RND shows in auth state:
{
auth: {
_40: 0,
_65: 0,
_55: null,
_72: null
}
}
This is my first issue I am posting on stackoverflow, it says I should add more text because the text to code ratio is too bad.. Please feel free to ask questions if you need more information to help me resloving this issue.
Many thanks in advance, guys ;)
EDIT1:
As requested I console logged the payload in the reducer after the USER_LOADED case.
switch (type) {
case USER_LOADED:
console.log('payload: ', payload)
return {
...state,
user: payload,
isAuthenticated: true,
loading: false
}
It is returning the same object:
payload: Object {
"__v": 0,
"_id": "5d2b422322cdf413d4246566",
"avatar": "//www.gravatar.com/avatar/e14a77efcd408a95332f403e0db40b95?s=200&r=pg&d=mm",
"date": "2019-07-14T14:54:27.265Z",
"email": "awnwen#asdw.de",
"name": "awena",
}

Answer 1

The problem could be solved by removing "async" from
export default async function (state = initialState, action) {...}
in the reducer.
Now I get the user in state.
But the token in the auth state is not a string but an object/Promise.
This is what I get from logging the token property in the auth state object:
state.token Promise {
"_40": 0,
"_55": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiNWQyYjc2MzRmN2U1MjcwOGUwNjNmZThmIn0sImlhdCI6MTU2MzEyOTM5NiwiZXhwIjoxODYzMTI5Mzk2fQ.YQayK3HBXIFl6aFSfkojTF8WrZkxXCGMf36Z0rXvRjY",
"_65": 1,
"_72": null,
}
I am not very experienced with promises. Is there a way to only store the value of the token as a string in my state?
I could build and ugly workaround and extract the value of the key with _55.
But on the one hand I don't understand what those keys in the promise are AND I could imagine the keys to change from one client to another.