0

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.

coder14
  • 223
  • 1
  • 4
  • 14
  • How does your question differ from the one you linked? What did you try from those answers and what were the results? – Code-Apprentice Nov 16 '17 at 15:56
  • The answer given in the other question (is almost the same as the answer which was given me) is for some reason not working for me. When my action `FetchPost` receives data, I call `dispatch(push('/about/'))`. Now, when I navigate from Home to my News post, it immidiately navigates to the other URL (e.g. /news/newspost) and I see a loader, and when the data is fetched the URL changes from /news/newspost to /about (because I've added '/About/' to test it). But besides the URL change nothing happens. – coder14 Nov 20 '17 at 10:27

1 Answers1

0

This is pretty much covered in details here regarding react-redux async action. But in short, one of the way is you can use redux-thunk middleware as such:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

Once you have redux-thunk middleware, in your action_post.js you can do something like this:

export function fetchPost(id) {
    return dispatch => {
        dispatch(fetchPostRequest())
        axios.get(`/api/post/${id}`)
        .then(res => {
            dispatch(fetchPostSuccess(res.data))
            dispatch(push('/postView')) // do the routing here
        })
        .catch(err => {
            dispatch(fetchPostFailure(err))
        })
    }
}

function fetchPostRequest() {
    return {
        type: "FETCH_POST_REQUEST"
    }
}

function fetchPostSuccess(data) {
    return {
        type: "FETCH_POST_SUCCESS",
        data
    }
}

function fetchPostFailure(err) {
    return {
        type: "FETCH_POST_FAILURE",
        err
    }
}
yonasstephen
  • 2,645
  • 4
  • 23
  • 48