I've just started a new project at work and have implemented the patterns described in this repository. We're starting with one of our internal React starter kits which has Code Splitting w/ Webpack 4 and TypeScript preconfigured using react-loadable
. I thought it was cool that the comments in this repo mentioned this approach as recommended. Has anyone done this though? I ran into a lot of errors when configuring my RouteConfig
and using ConnectedReduxProps
. I was able to resolve the problem just by removing ConnectedReduxProps
from the compound type when creating my components. This of course, is not the best solution.
export const routeConfig: RouteConfig[] = [
{
component: Loadable({
loader: () => import("./pages/Home/Home"),
loading: Loading
}),
path: "/",
exact: true
}
];
(property) RouteConfig.component?: React.ComponentClass<{} | RouteConfigComponentProps<any>, any> | React.StatelessComponent<{} | RouteConfigComponentProps<any>> | undefined
Type '(ComponentClass<Pick<IAllProps, "dispatch">, any> & LoadableComponent) | (StatelessComponent<Pick<IAllProps, "dispatch">> & LoadableComponent)' is not assignable to type 'ComponentClass<{} | RouteConfigComponentProps<any>, any> | StatelessComponent<{} | RouteConfigComponentProps<any>> | undefined'.
Type 'ComponentClass<Pick<IAllProps, "dispatch">, any> & LoadableComponent' is not assignable to type 'ComponentClass<{} | RouteConfigComponentProps<any>, any> | StatelessComponent<{} | RouteConfigComponentProps<any>> | undefined'.
Type 'ComponentClass<Pick<IAllProps, "dispatch">, any> & LoadableComponent' is not assignable to type 'ComponentClass<{} | RouteConfigComponentProps<any>, any>'.
Types of property 'getDerivedStateFromProps' are incompatible.
Type 'GetDerivedStateFromProps<Pick<IAllProps, "dispatch">, any> | undefined' is not assignable to type 'GetDerivedStateFromProps<{} | RouteConfigComponentProps<any>, any> | undefined'.
Type 'GetDerivedStateFromProps<Pick<IAllProps, "dispatch">, any>' is not assignable to type 'GetDerivedStateFromProps<{} | RouteConfigComponentProps<any>, any>'.
Types of parameters 'nextProps' and 'nextProps' are incompatible.
Type 'Readonly<{}> | Readonly<RouteConfigComponentProps<any>>' is not assignable to type 'Readonly<Pick<IAllProps, "dispatch">>'.
Property 'dispatch' is missing in type 'Readonly<{}>' but required in type 'Readonly<Pick<IAllProps, "dispatch">>'.ts(2322)
Home.tsx(27, 3): 'dispatch' is declared here.
Home.tsx(27, 3): 'dispatch' is declared here.
index.d.ts(17, 5): The expected type comes from property 'component' which is declared here on type 'RouteConfig'
Is there interest in updating these examples to show code splitting of Redux and Sagas? I was looking at some Microsoft open source to simplify this solution.
Either way, when we're done with implementing this pattern in our app I'll likely submit a PR with some of our smaller tweaks we felt were an improvement. At the very least it would be helpful to get constructive criticism on the approach.