React-Redux - Hooks API

Ich versuche, meine neue React-Redux-Anwendung so zu konfigurieren, dass sie die neuen Funktionen von React-Redux nutzt. Das offizielle Dokumentation sagt

React Redux bietet jetzt eine Reihe von Hook-APIs als Alternative zur vorhandenen connect () -Komponente höherer Ordnung.

Ich habe versucht, einige hilfreiche Artikel im Zusammenhang mit der Hooks-API mit einigen realen Beispielen zu finden, aber alle React-Redux-Apps verwenden die Verbindungsfunktion. Die offizielle Dokumentation zeigt auch sehr grundlegende Beispiele.

Ich möchte die Verbindungsfunktionen in meiner App mit useSelector (angeboten von der Hooks API) ändern.

Hier ist ein Beispiel-Code-Snippet aus meiner Anwendung.

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

Haken sind nicht mit Klassenkomponenten kompatibel. Um Hooks zu verwenden, konvertieren Sie die Klassenkomponenten in Funktionskomponenten. Zum Beispiel kann Ihr Code überarbeitet werden

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

Die Hooks-API erleichtert Funktionskomponenten, daher habe ich meine Klassenkomponente in einer Funktionskomponente wie der folgenden verschachtelt:

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

Nach meiner Auffassung ist es besser, die Komponenten der letzten Ebene vom Geschäft isoliert zu halten.