Unable to assign id to items fetched from firebase database - reactjs

Question

I am using react and redux to make a social media app. I'm storing all the data regarding posts in the firebase realtime-database. But when I fetch it I'm unable to assign firebase name property as an id to each and every post.
This is the action responsible for fetching data from firebase.
export const FetchPostStart = () => {
return {
type: actionTypes.Fetch_Post_Start
};
};
export const FetchPostSuccess = (fetchedData) => {
return {
type: actionTypes.Fetch_Post_Success,
payload: fetchedData
}
}
export const FetchPostError = (error) => {
return {
type: actionTypes.Fetch_Post_Error,
error: error
}
}
export const FetchPost = () => {
return dispatch => {
dispatch(FetchPostStart());
axios.get('/Data.json')
.then(response => {
const fetchedData = [];
for(let key in response.data){
fetchedData.push({
...response.data[key],
id: response.data.name
});
}
dispatch(FetchPostSuccess(fetchedData));
})
.catch(error => {
dispatch(FetchPostError(error));
});
}
}
This is the reducer function
case actionTypes.Fetch_Post_Start:
return {
...state,
loading:true
}
case actionTypes.Fetch_Post_Error:
return {
...state,
loading:false
}
case actionTypes.Fetch_Post_Success:
return {
...state,
loading: false,
Data: action.payload
}
The id remains undefined.
EDIT
This is how I'm trying to store id for new posts.
These are the action functions for adding a new post and to delete a post. The firebase name property is getting set as id here. But when I try to delete a post it passes a null value instead of the id.
export const NewPostSuccess = (id, postData) => {
return {
type: actionTypes.New_Post_Success,
payload: {
data: postData,
index: id
}
}
}
export const NewPostError = (error) => {
return {
type: actionTypes.New_Post_Error,
error: error
}
}
export const NewPost = (postData) => {
return (dispatch) => {
axios.post('/Data.json', postData)
.then(response => {
dispatch(NewPostSuccess(response.data.name, postData));
})
.catch(error => {
dispatch(NewPostError(error));
})
}
}
export const DeletePostSuccess = (id) => {
return {
type: actionTypes.Delete_Post_Success,
ID: id
}
}
export const DeletePost = (ID) => {
return (dispatch) => {
axios.delete('/Data/'+ ID + '.json')
.then(response => {
console.log(response.data);
dispatch(DeletePostSuccess(ID));
})
.catch(error => {
dispatch(DeletePostError(error));
})
}
}
THis is the reducer
case actionTypes.New_Post_Success:
const {Comment, ImageUrl, Date, User} = action.payload.data;
const id = action.payload.index;
console.log(id+"Reducer function")
return {
...state,
loading: false,
Data: [
...state.Data,
{Comment, ImageUrl, Date, User},
id
],
}
case actionTypes.Delete_Post_Success:
return {
...state,
loading: false,
}

Answer 1

.then(response => {
const fetchedData = [];
for(let key in response.data){
fetchedData.push({
...response.data[key],
id: response.data[key].name //made a small change here
});
}
dispatch(FetchPostSuccess(fetchedData));
})