redux-connect
redux-connect copied to clipboard
Lazy component load
Does this library allow me to connect lazy loaded (with webpack) component to reducer?
redux-connect can not be used with react-loadable, because of these lines: https://github.com/makeomatic/redux-connect/blob/cedd35b5bebf1fce3e8359cf8ccbc82c1cd5098f/modules/helpers/utils.js#L105 https://github.com/makeomatic/redux-connect/blob/cedd35b5bebf1fce3e8359cf8ccbc82c1cd5098f/modules/helpers/utils.js#L81-L89
redux-connect should allow to preload the missing files before fetching all the route.component.reduxAsyncConnect
, like that in the case of react-loadable (from here):
function getComponents(match /* the result of matchRoutes */ ) {
return match.map(v => v.route.component).reduce(async (result, component) => {
if (component.preload) {
const res = await component.preload();
const ret = [...(await result), component, ...[].concat(res)];
return ret;
}
return [...(await result), component];
}, []);
}
You are very welcome to provide a PR with this as a non-breaking feature, such as custom component preloading, however async/await would require too much of extra payload, so please refrain from using it and just exploit regular promises
Thanks!
Wrote a comment here #116, could it not be possible if you write your own helper preparing the route-config for redux-connect, you dont need to give it the "original" route-config, but rather a enhanced one where you map the component-field for each field, and if its a async function you add it to a promise.all and when this is done you pass a config with loaded components so redux-connect can reach the static loading-function?
@AVVS Hey Vitaly!
I implemented ssr code-splitting by using this library https://loadable-components.com/docs/server-side-rendering/
but whenever I try to wrap the component with asyncConnect
it just stops working on server side, and by stops working I mean server returns incorrect HTML and it leads to warning react_devtools_backend.js:2273 Warning: Did not expect server HTML to contain a <div> in <div>.
Any ideas on how to make it compatible>