React-Redux - API de ganchos

Estoy tratando de configurar mi nueva aplicación react-redux para usar las nuevas funciones de React-Redux. La documentación oficial dice

React Redux ahora ofrece un conjunto de API de enlace como alternativa al componente de orden superior connect () existente.

He estado tratando de encontrar algunos artículos de ayuda relacionados con la API de Hooks con algunos ejemplos reales, pero todas las aplicaciones react-redux están utilizando la función de conexión. La documentación oficial también muestra ejemplos muy básicos.

Quiero cambiar las funciones de conexión en mi aplicación con useSelector (ofrecido por Hooks API).

Aquí hay un fragmento de código de ejemplo de mi aplicación.

//MessagesListContainer
export default connect(
  // mapStateToProps
  (state:State) => ({
    activeUser: getActiveUser(state),   
    messages: getMessagesList(state),   
  })
)(MessagesList)

//Selectors
export const getActiveUser = (state: State) => state.activeUser;
export const getMessagesList = (state : State) => (
  Object.keys(state.messages).map((key : any)=> state.messages[key])
)

export interface IMessagesListProps {
  activeUser?: User;
  messages?: Message[];
}
/**
 *  Messages List
 */
export default class MessagesList extends PureComponent<IMessagesListProps> {
.
.
.
}

Los ganchos no son compatibles con los componentes de la clase. Para usar Hooks, convierte los componentes de la clase en componentes funcionales. Por ejemplo, su código se puede refactorizar a

/**
 *  Messages List
 */

const getActiveUser = (state: State) => state.activeUser;
const getMessagesList = (state : State) => (Object.keys(state.messages).map((key : any)=> state.messages[key]));

const MessagesList: React.FC = () => {
  const activeUser = useSelector(getActiveUser);
  const messagesList = useSelector(getMessagesList);

  ....
}

export default MessagesList;

Hooks API facilita los componentes de la función, por lo que anidé mi componente de clase dentro de un componente de función como este:

//messages-list.container.tsx
//MessagesListContainer
export const MessagesListContainer = () => {
   const activeUser= useSelector((state:State) => getActiveUser(state));
   const messages= useSelector((state:State) => getMessagesList(state));
   return <MessagesList activeUser={activeUser} messages={messages} />
}


//Selectors
export const getActiveUser = (state: State) => state.activeUser;
export const getMessagesList = (state : State) => (
  Object.keys(state.messages).map((key : any)=> state.messages[key])
)

//end of messages-list.container.tsx

//messages-list.component.tsx
export interface IMessagesListProps {
  activeUser?: User;
  messages?: Message[];
}
/**
 *  Messages List
 */
export default class MessagesList extends PureComponent<IMessagesListProps> {
.
.
.
}

Según mi percepción, es mejor mantener los componentes de último nivel aislados de la tienda.