Loading HOC with Thunk problem with props propagation - reactjs

Question

I created an HOC to deal with loading. It uses a property isLoading to decide what to show.
When I open a page directly from the URL I haven't any issue and everything works fine (because isLoading property is setted up on true by default).
The problem is that when I click on a link (<Link ... />) things doesn't work as expected because isLoading is now false because the page where I am navigating from setted the state to this value.
So, this is the HOC:
import React from 'react';
export default function WithLoading(WrappedComponent, loadingDelegate) {
class LoadingComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true
};
this.loadingDelegate = loadingDelegate;
}
componentDidMount() {
loadingDelegate(this);
}
render() {
if (this.props.isLoading === true) {
return (
<div>Loading...</div>
);
} else {
return <WrappedComponent {...this.props} />;
}
}
}
return LoadingComponent;
}
And below the component:
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { actionCreators } from './SurveysStore';
import WithLoading from '../LoadingHOC';
//edit/:id
class SurveyDetailRoutedComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
{this.props.survey.questions.length}
</div>
);
}
}
const SurveyDetailRoutedComponentWithLoading = WithLoading(SurveyDetailRoutedComponent, (_context) => _context.props.requestSurvey(parseInt(_context.props.match.params.id)));
export default connect(
state => state.surveysReducer,
dispatch => bindActionCreators(actionCreators, dispatch)
)(SurveyDetailRoutedComponentWithLoading);
The error I have is that survey is null, because I tried to render a not already resolver property.
The problem occurs only when I render this component via a <Link> contained in a page rendered in the same way.
I tried to set isLoading=true on the routing, but this doesn't work for me:
export default class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Layout>
<Route exact path='/' component={(props) => <Home {...props} />} />
<Route path='/survey/edit/:id' component={(props) => <SurveyDetailRoutedComponent {...props} isLoading={true} />} />
</Layout>
);
}
}
The store itself is very simple and I imagine my error is on how I deal with redux, because it looks like the routing operation is not resetting the loading.
const resetLoading = "RESET_LOADING";
const requestSurveys = "REQUEST_SURVEYS";
const receiveSurveys = "RECEIVE_SURVEYS";
const requestSurvey = "REQUEST_SURVEY";
const receiveSurvey = "RECEIVE_SURVEY";
const initialState = { surveys: [], isLoading: true, survey: null };
export const actionCreators = {
resetLoading: () => function (dispatch, getState) {
dispatch({ type: resetLoading })
},
requestSurveys: () => async function (dispatch, getState) {
dispatch({ type: requestSurveys });
const response = await fetch(...)
const responseAsJson = await response.json();
dispatch({ type: receiveSurveys, surveys: responseAsJson.data.surveys });
},
requestSurvey: id => async function (dispatch, getState) {
dispatch({ type: requestSurvey });
const response = await fetch(...)
const responseAsJson = await response.json();
dispatch({ type: receiveSurvey, survey: responseAsJson.data.survey });
}
};
export const reducer = function(state, action) {
state = state || initialState;
switch (action.type) {
case resetLoading:
return {
...state,
isLoading: true
};
case requestSurveys:
return {
...state,
isLoading: true
};
case requestSurvey:
return {
...state,
isLoading: true
};
case receiveSurveys:
return {
...state,
isLoading: false,
surveys: action.surveys
};
case receiveSurvey:
return {
...state,
isLoading: false,
survey: action.survey
};
default:
return state;
}
}