How to wait for the end of an action with useDispatch to move on? - reactjs

Question

I currently have a real problem. I want to redirect my user to the right conversation or publication when they press a notification.
All the code works, but I have the same problem all the time: the redirection happens before the action is completed, which results in a nice error telling me that the item is "null".
If I redirect to a publication with a new comment, it shows the publication, but the comments load one or two seconds after being redirected.
How is it possible to wait for the end of an action before redirecting?
Thanks a lot
My action (with Redux Thunk)
export const fetchPublications = token => {
return async dispatch => {
await axios
.get(`/articles?token=${token}`)
.then(response => {
const articles = response.data.articles;
const groups = response.data.groups;
const groupPosts = response.data.groupPosts;
const comments = response.data.comments;
const loadedArticles = [];
const loadedGroups = [];
const loadedGroupPosts = [];
const loadedComments = [];
for (const key in articles) {
loadedArticles.push(
new Article(
articles[key].id,
articles[key].title,
articles[key].content,
articles[key].description,
articles[key].cover,
articles[key].dateCreation,
articles[key].creatorPhoto,
articles[key].creatorFirstName,
articles[key].creatorLastName,
articles[key].creatorId,
articles[key].slug,
articles[key].isOnline,
articles[key].isForPro,
'article',
),
);
}
for (const key in groups) {
loadedGroups.push(
new Group(
groups[key].id,
groups[key].name,
groups[key].icon,
groups[key].cover,
groups[key].description,
groups[key].isPublic,
groups[key].isOnInvitation,
groups[key].dateCreation,
groups[key].slug,
groups[key].safeMode,
groups[key].isOnTeam,
groups[key].role,
groups[key].isWaitingValidation,
'group',
),
);
}
for (const key in groupPosts) {
loadedGroupPosts.push(
new GroupPost(
groupPosts[key].id,
groupPosts[key].content,
groupPosts[key].dateCreation,
groupPosts[key].lastModification,
groupPosts[key].creatorPhoto,
groupPosts[key].creatorFirstName,
groupPosts[key].creatorLastName,
groupPosts[key].creatorId,
groupPosts[key].onGroupId,
groupPosts[key].groupName,
groupPosts[key].groupIcon,
'groupPost',
groupPosts[key].liked,
groupPosts[key].likesCounter,
groupPosts[key].commentsCounter,
),
);
}
for (const key in comments) {
loadedComments.push(
new Comment(
comments[key].id,
comments[key].content,
comments[key].dateCreation,
comments[key].lastModification,
comments[key].creatorPhoto,
comments[key].creatorFirstName,
comments[key].creatorLastName,
comments[key].creatorId,
comments[key].onPostId,
),
);
}
dispatch({
type: FETCH_PUBLICATIONS,
articles: loadedArticles,
groups: loadedGroups,
groupPosts: loadedGroupPosts,
comments: loadedComments,
});
})
.catch(error => {
console.log(error);
throw new Error('Une erreur est survenue.');
});
};
};
My notification handler
const handleNotificationResponse = async response => {
if (response.actionIdentifier === 'expo.modules.notifications.actions.DEFAULT') {
try {
if (response.notification.request.content.data.discussionId) {
if (isAuth) {
const discussionId =
response.notification.request.content.data.discussionId;
dispatch(messengerActions.fetchMessenger(userToken));
const item = messages.filter(
message => message.id == discussionId,
);
navigationRef.current?.navigate('MessengerApp', {
screen: 'Discussion',
params: { item: item[0] },
});
}
} else if (response.notification.request.content.data.groupPostId) {
if (isAuth) {
const groupPostId =
response.notification.request.content.data.groupPostId;
dispatch(newsfeedActions.fetchPublications(userToken));
const item = groupPosts.filter(
groupPost => groupPost.id == groupPostId,
);
navigationRef.current?.navigate('App', {
screen: 'Comments',
params: {
item: item[0],
},
});
}
}
} catch (err) {}
} else {
}
};