redux-connect icon indicating copy to clipboard operation
redux-connect copied to clipboard

Lazy component load

Open ghost opened this issue 6 years ago • 4 comments

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

ghost avatar Nov 16 '17 10:11 ghost

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

bertho-zero avatar Jan 05 '18 14:01 bertho-zero

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!

AVVS avatar Jan 05 '18 15:01 AVVS

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?

gerhardsletten avatar Feb 05 '18 10:02 gerhardsletten

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

gloompi avatar Sep 23 '20 10:09 gloompi