[Enhancement] Add a nested HOCs example with connect

[estaub]

You might consider writing up techniques for dealing with prop types on components with multiple nested HOCs. For example, I frequently have components with three layers of HOCs: React-Router, Redux, and Apollo-React (graphql client).

I have a handle on how to deal, but recent changes in both Typescript and various declarations have made these stricter and harder to get right. I'm not at all confident that my design pattern for this is the best, but I'll share if you've nothing.

---

IssueHunt Summary

piotrwitek has been rewarded.

Backers (Total: $50.00)

• boostio ($20.00)
• issuehunt ($30.00)

Submitted pull Requests

• #193 Updated Guide and refactored playground project to work with the most recent TypeScript 3.7 and React & Redux type definitions.

---

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

---

IssueHunt has been backed by the following sponsors. Become a sponsor

[piotrwitek]

Hello,
You could definitely share some simple generic example of the use case to provide the better context of your pattern.

PS: If I ever use any part of your work I will give due credits.

[piotrwitek]

Also recently I wanted to rewrite and update entire HOC section, so this could give me some fresh ideas

Related: #100

[IssueHuntBot]

@BoostIO funded this issue with $20. Visit this issue on Issuehunt

[IssueHuntBot]

@IssueHunt has funded $30.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[piotrwitek]

I have added a new section with an example of nested HOC with connect (latest TS and react-redux types):

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;
};