redux-connect
redux-connect copied to clipboard
Component attempts to render before asyncConnect promise is fired/resolved
I'm exporting my component as follows:
export default asyncConnect([{ promise: loadAsyncProps }])(
connect(
mapStateToProps,
mapDispatchToProps,
)(MyComponent),
);
And using it in router config like this:
[
{
path: '/',
component: Root,
routes: [
{
path: '/',
exact: true,
component: Home,
},
{
path: '/my-route',
exact: true,
component: MyAsyncConnectedComponent,
},
},
];
Home component doesn't use asyncConnect. It works fine. MyComponent works only when clicking to /my-route through a link in Home.
When entering /my-route in any other way (address bar, hot reload etc.), the inner component, in this case the react-redux connected MyComponent, is rendered without the promise even firing.
MyComponent uses data fetched with asyncConnect, and the component crashes because props are null.
I'm not using SSR.
Library versions:
redux-connect: 9.0.0
react-redux: 7.0.0
react-router: 5.0.0
react: 16.8.6
redux: 4.0.1