Lazy component load

[ghost]

Does this library allow me to connect lazy loaded (with webpack) component to reducer?

[bertho-zero]

redux-connect can not be used with react-loadable, because of these lines:

redux-connect/modules/helpers/utils.js

Line 105 in cedd35b

const layered = filterComponents(matchRoutes(routes, location.pathname));

redux-connect/modules/helpers/utils.js

Lines 81 to 89 in cedd35b

	export function filterComponents(branch) {
	return branch.reduce((result, { route, match }) => {
	if (route.component && route.component.reduxAsyncConnect) {
	result.push([route.component, { route, match }]);
	}
	return result;
	}, []);
	}

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];
  }, []);
}

[AVVS]

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!

[gerhardsletten]

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?

[gloompi]

@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>