React-Redux - API de ganchos

Estou tentando configurar meu novo aplicativo react-redux para usar os novos recursos do React-Redux. A documentação oficial diz

O React Redux agora oferece um conjunto de APIs de gancho como uma alternativa ao componente de ordem superior connect () existente.

Eu tenho tentado encontrar alguns artigos de ajuda relacionados à API Hooks com alguns exemplos reais, mas todos os aplicativos react-redux estão usando a função connect. A documentação oficial também mostra exemplos muito básicos.

Desejo alterar as funções de conexão no meu aplicativo com useSelector (oferecido pela API Hooks).

Aqui está um exemplo de trecho de código do meu aplicativo.

//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> {
.
.
.
}

Os ganchos não são compatíveis com os componentes da classe. Para usar Hooks, você converte os componentes da classe em componentes funcionais. Por exemplo, seu código pode ser refatorado para

/**
 *  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;

A API Hooks facilita os componentes de função, então aninhei meu componente de classe dentro de um componente de função 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> {
.
.
.
}

De acordo com minha percepção, é melhor manter os componentes do último nível isolados da loja.