React-Redux - API Hooks

Sto cercando di configurare la mia nuova applicazione di reattivo-redux per utilizzare le nuove funzionalità di React-Redux. La documentazione ufficiale dice

React Redux ora offre un set di API hook in alternativa al componente di ordine superiore connect () esistente.

Ho cercato di trovare alcuni articoli di aiuto relativi all'API Hooks con alcuni esempi concreti, ma tutte le app di reazione-redux utilizzano la funzione di connessione. La documentazione ufficiale mostra anche esempi di base.

Voglio cambiare le funzioni di connessione nella mia app con useSelector (offerto dall'API Hooks).

Ecco un esempio di frammento di codice dalla mia applicazione.

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

I ganci non sono compatibili con i componenti di classe. Per usare Hook, converti i componenti della classe in componenti funzionali. Ad esempio, è possibile eseguire il refactoring del codice

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

L'API Hooks facilita i componenti delle funzioni, quindi ho annidato il mio componente di classe all'interno di un componente di funzione come questo:

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

Secondo la mia percezione, è meglio mantenere i componenti di ultimo livello isolati dal negozio.