Improved nested Hoc with connected component example #5

Author: piotrwitek

README.md

@@ -753,7 +753,7 @@ export const withConnectedCount = <BaseProps extends InjectedProps>(
 
   const ConnectedHoc = connect<
     ReturnType<typeof mapStateToProps>,
-    typeof dispatchProps,
+    typeof dispatchProps, // use "undefined" if NOT using dispatchProps
     HocProps,
     RootState
   >(

playground/src/hoc/with-connected-count.tsx

@@ -13,11 +13,6 @@ interface InjectedProps {
 export const withConnectedCount = <BaseProps extends InjectedProps>(
   BaseComponent: React.ComponentType<BaseProps>
 ) => {
-  type HocProps = Diff<BaseProps, InjectedProps> & {
-    // here you can extend hoc with new props
-    initialCount?: number;
-  };
-
   const mapStateToProps = (state: RootState) => ({
     count: countersSelectors.getReduxCounter(state.counters),
   });
@@ -26,18 +21,24 @@ export const withConnectedCount = <BaseProps extends InjectedProps>(
     onIncrement: countersActions.increment,
   };
 
-  class Hoc extends React.Component<InjectedProps> {
+  type HocProps = ReturnType<typeof mapStateToProps> &
+    typeof dispatchProps & {
+      // here you can extend ConnectedHoc with new props
+      overrideCount?: number;
+    };
+
+  class Hoc extends React.Component<HocProps> {
     // Enhance component name for debugging and React-Dev-Tools
     static displayName = `withConnectedCount(${BaseComponent.name})`;
     // reference to original wrapped component
     static readonly WrappedComponent = BaseComponent;
 
     render() {
-      const { count, onIncrement, ...restProps } = this.props;
+      const { count, onIncrement, overrideCount, ...restProps } = this.props;
 
       return (
         <BaseComponent
-          count={count} // injected
+          count={overrideCount || count} // injected
           onIncrement={onIncrement} // injected
           {...(restProps as BaseProps)}
         />
@@ -47,8 +48,8 @@ export const withConnectedCount = <BaseProps extends InjectedProps>(
 
   const ConnectedHoc = connect<
     ReturnType<typeof mapStateToProps>,
-    typeof dispatchProps,
-    HocProps,
+    typeof dispatchProps, // use "undefined" if NOT using dispatchProps
+    Diff<BaseProps, InjectedProps>,
     RootState
   >(
     mapStateToProps,

playground/src/hoc/with-connected-count.usage.tsx

@@ -6,5 +6,5 @@ import { FCCounter } from '../components';
 const FCCounterWithConnectedCount = withConnectedCount(FCCounter);
 
 export default () => (
-  <FCCounterWithConnectedCount initialCount={5} label={'FCCounterWithState'} />
+  <FCCounterWithConnectedCount overrideCount={5} label={'FCCounterWithState'} />
 );