Added an example of nested HOC with connect. Fixed #5

Author: piotrwitek

playground/src/hoc/index.ts

@@ -1,2 +1,3 @@
+export * from './with-connected-count';
 export * from './with-error-boundary';
 export * from './with-state';

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

@@ -0,0 +1,59 @@
+import { RootState } from 'MyTypes';
+import React from 'react';
+import { connect } from 'react-redux';
+import { Diff } from 'utility-types';
+import { countersActions, countersSelectors } from '../features/counters';
+
+// These props will be injected into the base component
+interface InjectedProps {
+  count: number;
+  onIncrement: () => void;
+}
+
+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),
+  });
+
+  const dispatchProps = {
+    onIncrement: countersActions.increment,
+  };
+
+  class Hoc extends React.Component<InjectedProps> {
+    // 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;
+
+      return (
+        <BaseComponent
+          count={count} // injected
+          onIncrement={onIncrement} // injected
+          {...(restProps as BaseProps)}
+        />
+      );
+    }
+  }
+
+  const ConnectedHoc = connect<
+    ReturnType<typeof mapStateToProps>,
+    typeof dispatchProps,
+    HocProps,
+    RootState
+  >(
+    mapStateToProps,
+    dispatchProps
+  )(Hoc);
+
+  return ConnectedHoc;
+};

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+import { withConnectedCount } from '../hoc';
+import { FCCounter } from '../components';
+
+const FCCounterWithConnectedCount = withConnectedCount(FCCounter);
+
+export default () => (
+  <FCCounterWithConnectedCount initialCount={5} label={'FCCounterWithState'} />
+);

playground/src/routes/Home.tsx

@@ -1,19 +1,25 @@
 import * as React from 'react';
 
-import FCCounter from '../components/fc-counter.usage';
-import FCSpreadAttributes from '../components/fc-spread-attributes.usage';
-import ClassCounter from '../components/class-counter.usage';
-import ClassCounterWithDefaultProps from '../components/class-counter-with-default-props.usage';
+import FCCounterUsage from '../components/fc-counter.usage';
+import FCSpreadAttributesUsage from '../components/fc-spread-attributes.usage';
+import ClassCounterUsage from '../components/class-counter.usage';
+import ClassCounterWithDefaultPropsUsage from '../components/class-counter-with-default-props.usage';
 import UserListUsage from '../components/generic-list.usage';
+import WithErrorBoundaryUsage from '../hoc/with-error-boundary.usage';
+import WithStateUsage from '../hoc/with-state.usage';
+import WithConnectedCountUsage from '../hoc/with-connected-count.usage';
 
 export default () => {
   return (
     <section>
-      <FCCounter />
-      <FCSpreadAttributes />
-      <ClassCounter />
-      <ClassCounterWithDefaultProps />
+      <FCCounterUsage />
+      <FCSpreadAttributesUsage />
+      <ClassCounterUsage />
+      <ClassCounterWithDefaultPropsUsage />
       <UserListUsage />
+      <WithErrorBoundaryUsage />
+      <WithStateUsage />
+      <WithConnectedCountUsage />
     </section>
   );
 };