I've got more or less the same question as this one: React-Router: how to wait for an async action before route transition
Current situation:
When I'm for example on my Home page, I click a post (e.g. /news/news-article). I immidiately navigate to the route, and I'm showing a Loader untill my Redux action has Fetched the posts content, and then I load the content. (This is also what 'jmancherje' answerred in the other question)
But this means that I have to show a loader on EVERY page my user visits, and this is not what I want.
So what I want:
When I'm on the Home, and I click to another post, I want to wait with navigation to the next route, untill my action has finished (or failed) loading the content.
This seems possible with React-Router-Redux, but I can't find out how to achieve this.
Updated question:
My action looks like this:
export function fetchPage(post_type, postSlug) {
return function (dispatch) {
dispatch({type: FETCH_PAGE_START});
axios.get(`${url}/wp-json/wp/v2/${post_type}?slug=${postSlug}`)
.then(response => {
dispatch({
type: FETCH_PAGE,
payload: response.data
});
dispatch(push('/')) // do the routing here
})
.catch(function (error) {
dispatch({
type: FAILED_PAGE
});
});
}
}
My store looks more or less like this:
const appliedMiddleware = applyMiddleware( thunk, createLogger(), routerMiddleware(history));
export default createStore(combinedReducers, appliedMiddleware);
So I think i'm on the right way, but still I can't get it to work. It still navigates immediately instead of a delay.