React-Redux - API Hooks

J'essaie de configurer ma nouvelle application react-redux pour utiliser les nouvelles fonctionnalités de React-Redux. La documentation officielle dit

React Redux propose désormais un ensemble d'API hook comme alternative au composant d'ordre supérieur connect () existant.

J'ai essayé de trouver des articles d'aide liés à l'API Hooks avec de vrais exemples, mais toutes les applications react-redux utilisent la fonction de connexion. La documentation officielle montre également des exemples très basiques.

Je souhaite modifier les fonctions de connexion dans mon application avec useSelector (proposé par l'API Hooks).

Voici un exemple d'extrait de code de mon application.

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

Les crochets ne sont pas compatibles avec les composants Class. Pour utiliser des crochets, vous convertissez les composants de classe en composants de fonction. Par exemple, votre code peut être refactorisé en

/**
 *  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 facilite les composants de fonction, j'ai donc imbriqué mon composant de classe dans un composant de fonction comme celui-ci:

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

Selon ma perception, il est préférable de garder les composants de dernier niveau isolés du magasin.