Pfthb

I have a pretty simple setup with my app looking like:

<Provider store=store>
 <BrowserRouter>
 <App/>
 </BrowserRouter>
</Provider>

And a router switch like

 <Switch>
 <Route path='/test' component=comp1/>
 <Route exact path='/' component=comp2/>
 </Switch>

I haven't worked with routes much but I want to prevent those two routes from loading before my redux fetch is finished but I can't seem to get it working. I've tried checking if the data is loaded in redux, basically wrapping the switch with a check of

this.props.data.size > 0

but it seems to render anyway. They both use the same data so it seems like bad practice to fetch data into redux individually in both components when I should be able to just fetch once regardless of which route was loaded.

Your general idea checking if the data is loaded in redux seems to be ok, the only thing I'd suggest you is to encapsulate this logic into a wrapper component:

export const CheckLoadedApp = (props) => this.props.data.lenght ? <App /> : 'Loading...';

And change your codebase accordingly:

<Provider store=store>
 <BrowserRouter>
 <CheckLoadedApp />
 </BrowserRouter>
</Provider>

But, up to you :)