reactjs importing imported JSON object into array-list - arrays

Question

I can display a JSON object that I get with redux.
but when returning, the list is empty.
How do I transfer a JSON object that I send into list as
payload:
return {
type: USER_INFO,
payload: {
profile: list
},
}
export const USER_INFO = 'USER_INFO';
let list = [];
export function userAction(newValue) {
fetch("http://127.0.0.1:8000/api/account/me", {
headers: {
Authorization: `Bearer ${localStorage.getItem("id_token")}`,
"Content-Type": "application/json"
}
})
.then((response) => response.json() )
.then((responseData) =>{
list = JSON.stringify(responseData);
console.log(list);
// console.log(JSON.parse(liste));
return list;
});
**//list appears empty when I check here**
**console.log(list);**
return {
type: USER_INFO,
payload: {
profile: list
},
}
}

Answer 1

How I handle asynchronous requests with Redux.
I'll have actions for each type of status the user info action could have. For example, there's three states of the user info request: default, loaded, and failed.
const userInfoRequest = () => { type: USER_INFO_REQUEST };
const userInfoLoaded = (userInfo) => { type: USER_INFO_LOADED, userInfo };
const userInfoFailed = (error) => { type: USER_INFO_FAILED, error };
You're going to need to turn the userInfo action into a thunk so that the action can property handle its internal asynchronous state inside the action creator.
const userInfoRequest = () => (dispatch, getState) => {
dispatch(userInfoRequest());
fetch(...)
.then(response => response.json())
.then(result => dispatch(userInfoLoaded(result))
.catch(error => dispatch(userInfoError(error))
}