I am having a hell of a time trying to understand the best way to do this and where to even handle this redirect at.

I found an example of creating a ProtectedRoute component which is setup like this

const ProtectedRoute = ({ component: Component, ...rest }) => {
  return (
    <Route {...rest} render={props => (rest.authenticatedUser ? (<Component {...props}/>) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
    )}/>
  );
};

And used like this

<ProtectedRoute path="/" component={HomePage} exact />

I use redux-thunk to make sure I can use async fetch requests in my actions and those are setup something like this

Actions

export const loginSuccess = (user = {}) => ({
  type: 'LOGIN_SUCCESS',
  user
});

...

export const login = ({ userPhone = '', userPass = '' } = {}) => {
  return (dispatch) => {
    dispatch(loggingIn());
    const request = new Request('***', {
      method: 'post',
      body: queryParams({ user_phone: userPhone, user_pass: userPass }),
      headers: new Headers({
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      })
    });
    fetch(request)
      .then((response) => {
        if (!response.ok) {
          throw Error(response.statusText);
        }

        dispatch(loggingIn(false));

        return response;
      })
      .then((response) => response.json())
      .then((data) => dispatch(loginSuccess(data.user[0])))
      .catch((data) => dispatch(loginError(data)));
  };
};

Reducers

export default (state = authenticationReducerDefaultState, action) => {
  switch (action.type) {
    ...
    case 'LOGIN_SUCCESS':
      return {
        ...state,
        authenticatedUser: action.user
      };
    default:
      return state;
  }
};

Where and how would I go about handling a redirect to wherever I was going before I was redirected to the login page, and how can I make sure this only happens on a success from the login fetch promise?